import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import LayersIcon from "@mui/icons-material/Layers";
import TerrainIcon from "@mui/icons-material/Terrain";
import ForestIcon from "@mui/icons-material/Forest";
import MapIcon from "@mui/icons-material/Map";
import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
import RouteIcon from "@mui/icons-material/Route";
import ApartmentIcon from "@mui/icons-material/Apartment";
import FactoryIcon from "@mui/icons-material/Factory";
import ViewInArIcon from "@mui/icons-material/ViewInAr";
import AccountTreeIcon from "@mui/icons-material/AccountTree";
import FolderCopyIcon from "@mui/icons-material/FolderCopy";
import DescriptionIcon from "@mui/icons-material/Description";
import Inventory2Icon from "@mui/icons-material/Inventory2";
import VerifiedIcon from "@mui/icons-material/Verified";
import MemoryIcon from "@mui/icons-material/Memory";
import RadarIcon from "@mui/icons-material/Radar";
import GpsFixedIcon from "@mui/icons-material/GpsFixed";
import CloudQueueIcon from "@mui/icons-material/CloudQueue";
import ImageFallback from "@/src/components/custom-components/image-fallback";

export const metadata = {
    title:
        "LiDAR Survey Services | UAV LiDAR Mapping & 3D Terrain Modeling | Dynatech Innovations",
    description:
        "Advanced UAV LiDAR survey services for high-accuracy point clouds, terrain modeling, infrastructure mapping, forestry, stockpile analysis and CAD/BIM-ready deliverables.",
};

const heroBenefits = [
    "Survey-Grade Accuracy",
    "Dense Point Clouds",
    "Vegetation Penetration",
    "Rapid Large-Area Coverage",
    "CAD & BIM Ready",
];

const capabilities = [
    "High-Density Point Clouds",
    "Ground Surface Extraction",
    "Accurate Terrain Modeling",
    "Engineering-Ready Outputs",
    "Reliable Under Vegetation",
];

const services = [
    {
        title: "High-Density Point Cloud Generation",
        image: "/images/cta.jpg",
        icon: LayersIcon,
        description:
            "Generate millions of highly accurate laser points for engineering design, asset management, digital documentation, terrain analysis and 3D mapping workflows.",
    },
    {
        title: "Terrain Penetration Mapping",
        image: "/images/cta.jpg",
        icon: TerrainIcon,
        description:
            "Reveal ground surfaces beneath vegetation for forestry, archaeology, infrastructure planning, environmental studies and land development projects.",
    },
    {
        title: "Transmission Line Surveys",
        image: "/images/cta.jpg",
        icon: RouteIcon,
        description:
            "Map transmission corridors, towers, utility networks and powerline clearances with high positional accuracy and efficient aerial coverage.",
    },
    {
        title: "Infrastructure Mapping",
        image: "/images/cta.jpg",
        icon: ApartmentIcon,
        description:
            "Capture roads, bridges, railways, pipelines, industrial sites and utility assets for engineering, maintenance and asset management.",
    },
    {
        title: "Stockpile Volume Analysis",
        image: "/images/cta.jpg",
        icon: ViewInArIcon,
        description:
            "Perform precise volumetric calculations for stockpiles, quarries, mining operations, construction materials and industrial storage areas.",
    },
    {
        title: "Forestry & Environmental Surveys",
        image: "/images/cta.jpg",
        icon: ForestIcon,
        description:
            "Measure canopy structure, vegetation density, biomass indicators, terrain morphology, drainage patterns and environmental change.",
    },
    {
        title: "3D Digital Twin Generation",
        image: "/images/cta.jpg",
        icon: MemoryIcon,
        description:
            "Create engineering-grade digital twins for infrastructure, industrial facilities, urban assets and smart asset management applications.",
    },
];

const advantages = [
    "Survey-Grade Accuracy",
    "Millions of Laser Points",
    "Dense Vegetation Penetration",
    "Faster Data Collection",
    "High-Accuracy RTK Integration",
    "Advanced Point Cloud Processing",
];

const workflow = [
    {
        title: "Mission Planning",
        desc: "Survey planning, flight paths and RTK configuration.",
    },
    {
        title: "UAV LiDAR Acquisition",
        desc: "High-density aerial laser scanning.",
    },
    {
        title: "Point Cloud Processing",
        desc: "Registration and quality validation.",
    },
    {
        title: "Classification",
        desc: "Ground, vegetation and structure extraction.",
    },
    {
        title: "Model Generation",
        desc: "DEM, DTM, DSM and engineering datasets.",
    },
    {
        title: "Final Deliverables",
        desc: "CAD, BIM, GIS and survey reports.",
    },
];

const deliverables = [
    {
        icon: CloudQueueIcon,
        title: "Point Clouds",
    },
    {
        icon: MapIcon,
        title: "DEM / DTM / DSM",
    },
    {
        icon: Inventory2Icon,
        title: "CAD & BIM Models",
    },
    {
        icon: FolderCopyIcon,
        title: "GIS Datasets",
    },
    {
        icon: AccountTreeIcon,
        title: "3D Terrain Models",
    },
    {
        icon: DescriptionIcon,
        title: "Survey Reports",
    },
];

const whyDynatech = [
    "Survey-grade UAV LiDAR systems",
    "Experienced UAV & Geospatial specialists",
    "RTK / PPK integrated workflows",
    "Engineering-ready deliverables",
    "Fast turnaround times",
    "End-to-end project execution",
];

export default function LiDARSurveyServicesPage() {
    return (
        <main className="bg-white">

            {/* HERO */}

            <section className="relative overflow-hidden">
                <img
                    src="/images/hero-lidar.jpg"
                    alt="UAV LiDAR Survey Drone"
                    className="absolute inset-0 h-full w-full object-cover"
                />

                <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/90 to-slate-900/30" />

                <div className="relative mx-auto max-w-7xl px-6 py-32">
                    <span className="inline-block rounded-full border border-secondary px-4 py-2 text-xs uppercase tracking-[3px] text-secondary">
                        Aerial & Drone Services
                    </span>

                    <h1 className="mt-6 max-w-3xl text-5xl font-bold leading-tight text-white">
                        LiDAR Survey Services
                    </h1>

                    <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                        Advanced UAV LiDAR solutions for high-accuracy 3D mapping and
                        terrain modeling, even in challenging and densely vegetated
                        environments.
                    </p>

                    <div className="mt-10 flex flex-wrap gap-4">
                        <button className="rounded-lg bg-secondary px-7 py-4 font-semibold text-white hover:bg-secondary">
                            Request a LiDAR Consultation
                        </button>

                        <button className="rounded-lg border border-white/30 px-7 py-4 text-white hover:bg-white/10">
                            Request a Quote
                        </button>
                    </div>

                    <div className="mt-16 grid gap-4 md:grid-cols-5">
                        {heroBenefits.map((item) => (
                            <div
                                key={item}
                                className="flex items-center gap-2 rounded-lg bg-white/10 p-4 backdrop-blur"
                            >
                                <CheckCircleIcon
                                    sx={{ fontSize: 18 }}
                                    className="text-secondary"
                                />
                                <span className="text-sm text-white">{item}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* INTRO */}

            <section className="py-24">
                <div className="mx-auto grid max-w-7xl gap-20 px-6 lg:grid-cols-2">

                    <div>
                        <h2 className="text-4xl font-bold text-slate-900">
                            Unlock Terrain Intelligence Beyond Visible Surfaces
                        </h2>

                        <p className="mt-8 text-lg leading-8 text-slate-600">
                            Unlike conventional image-based mapping, LiDAR actively measures
                            millions of laser returns to accurately capture terrain,
                            structures, and vegetation. This enables highly reliable
                            elevation models and detailed three-dimensional datasets, even in
                            environments where dense tree canopy, shadows, or low-texture
                            surfaces limit traditional photogrammetry.
                        </p>

                        <p className="mt-6 text-lg leading-8 text-slate-600">
                            LiDAR is ideal for engineering, infrastructure, utilities,
                            mining, forestry, environmental monitoring, archaeology, and
                            corridor mapping projects that require superior accuracy, terrain
                            penetration and reliable 3D geospatial outputs.
                        </p>

                        <div className="mt-10 grid gap-4 sm:grid-cols-2">
                            {capabilities.map((item) => (
                                <div key={item} className="flex items-center gap-3">
                                    <VerifiedIcon className="text-secondary" />
                                    {item}
                                </div>
                            ))}
                        </div>
                    </div>

                    <div>
                        <ImageFallback
                            src="/images/overlay.jpg"
                            alt="Forest LiDAR Point Cloud"
                            className="shadow-2xl"
                            width={600}
                            height={200}
                        />
                    </div>
                </div>
            </section>

            {/* SERVICES */}

            <section className="bg-slate-50 py-24">
                <div className="mx-auto max-w-7xl px-6">

                    <h2 className="text-center text-4xl font-bold">
                        Our LiDAR Survey Services
                    </h2>

                    <div className="mt-16 grid gap-8 lg:grid-cols-3 md:grid-cols-2">

                        {services.map((service) => {

                            const Icon = service.icon;

                            return (
                                <div
                                    key={service.title}
                                    className="overflow-hidden rounded-2xl bg-white shadow-lg"
                                >

                                    <img
                                        src={service.image}
                                        alt={service.title}
                                        className="aspect-video w-full object-cover"
                                    />

                                    <div className="p-8">

                                        {/* <div className="mb-6 inline-flex rounded-full bg-secondary p-3 text-white">
                                            <Icon sx={{ fontSize: 30 }} />
                                        </div> */}

                                        <h3 className="text-xl font-semibold">
                                            {service.title}
                                        </h3>

                                        <p className="mt-4 text-slate-600">
                                            {service.description}
                                        </p>

                                    </div>

                                </div>
                            );

                        })}

                    </div>

                </div>
            </section>

            {/* ADVANTAGES */}

            <section className="bg-slate-950 py-16">
                <div className="mx-auto grid max-w-7xl gap-8 px-6 md:grid-cols-3 lg:grid-cols-6">

                    {advantages.map((item) => (
                        <div key={item} className="text-center">
                            <RadarIcon
                                sx={{ fontSize: 42 }}
                                className="mx-auto text-secondary"
                            />
                            <p className="mt-4 text-white">{item}</p>
                        </div>
                    ))}

                </div>
            </section>

            {/* WORKFLOW */}
            <section className="py-20">

                <div className="mx-auto max-w-7xl px-6">


                    <div className="mx-auto mb-12 max-w-3xl text-center">

                        <h2 className="text-3xl font-bold text-slate-900 md:text-4xl">
                            LiDAR Survey Workflow
                        </h2>

                        <p className="mt-4 text-base leading-7 text-slate-600">
                            A structured workflow delivering accurate UAV LiDAR data,
                            processed point clouds and engineering-ready outputs.
                        </p>

                    </div>



                    <div
                        className="
                grid
                gap-6
                md:grid-cols-2
                lg:grid-cols-3
            "
                    >

                        {workflow.map((step, index) => (

                            <div
                                key={step.title}
                                className="
                        group
                        relative
                        rounded-2xl
                        border
                        border-slate-200
                        bg-white
                        p-5
                        transition
                        duration-300
                        hover:-translate-y-1
                        hover:shadow-lg
                    "
                            >


                                {/* NUMBER */}

                                <div
                                    className="
                            absolute
                            -top-3
                            left-5
                            flex
                            h-9
                            w-9
                            items-center
                            justify-center
                            rounded-full
                            bg-secondary
                            text-sm
                            font-bold
                            text-white
                        "
                                >
                                    {index + 1}
                                </div>



                                {/* IMAGE */}

                                <div
                                    className="
                            overflow-hidden
                            rounded-xl
                        "
                                >

                                    <ImageFallback
                                        src="/images/overlay.jpg"
                                        alt={step.title}
                                        width={400}
                                        height={220}
                                        className="
                                aspect-[16/9]
                                w-full
                                object-cover
                                transition
                                duration-500
                                group-hover:scale-105
                            "
                                    />

                                </div>




                                <h3
                                    className="
                            mt-5
                            text-lg
                            font-semibold
                            text-slate-900
                        "
                                >
                                    {step.title}
                                </h3>



                                <p
                                    className="
                            mt-2
                            text-sm
                            leading-6
                            text-slate-600
                        "
                                >
                                    {step.desc}
                                </p>


                            </div>

                        ))}


                    </div>


                </div>

            </section>
            {/* DELIVERABLES */}

            <section className="bg-slate-100 py-24">

                <div className="mx-auto max-w-7xl px-6">

                    <h2 className="text-center text-4xl font-bold">
                        Typical Deliverables
                    </h2>

                    <div className="mt-16 grid gap-8 md:grid-cols-3 lg:grid-cols-6">

                        {deliverables.map((item) => {

                            const Icon = item.icon;

                            return (

                                <div
                                    key={item.title}
                                    className="rounded-xl bg-white p-8 text-center shadow"
                                >
                                    <Icon
                                        sx={{ fontSize: 40 }}
                                        className="mx-auto text-secondary"
                                    />

                                    <p className="mt-5 font-medium">
                                        {item.title}
                                    </p>

                                </div>

                            );

                        })}

                    </div>

                </div>

            </section>

            {/* WHY DYNATECH */}

            <section className="py-24">

                <div className="mx-auto max-w-7xl px-6 lg:grid lg:grid-cols-2 lg:gap-20">

                    <div>

                        <h2 className="text-4xl font-bold">
                            Why Choose Dynatech Innovations?
                        </h2>

                        <div className="mt-10 space-y-5">

                            {whyDynatech.map((item) => (

                                <div
                                    key={item}
                                    className="flex items-center gap-3"
                                >
                                    <GpsFixedIcon className="text-secondary" />
                                    {item}
                                </div>

                            ))}

                        </div>

                    </div>

                    <div>

                        <img
                            src="/images/why-choose.jpg"
                            alt="LiDAR Digital Twin"
                            className=" shadow-xl"
                        />

                    </div>

                </div>

            </section>

            {/* CTA */}

            <section className="relative overflow-hidden">

                <img
                    src="/images/cta.jpg"
                    alt="LiDAR Utility Corridor"
                    className="absolute inset-0 h-full w-full object-cover"
                />

                <div className="absolute inset-0 bg-slate-950/80" />

                <div className="relative mx-auto max-w-6xl px-6 py-24 text-center">

                    <h2 className="text-4xl font-bold text-white">
                        Ready to Capture Every Detail with UAV LiDAR?
                    </h2>

                    <p className="mx-auto mt-8 max-w-4xl text-lg leading-8 text-slate-300">
                        From dense forests and utility corridors to mines,
                        infrastructure, and complex terrain, Dynatech Innovations
                        delivers high-accuracy UAV LiDAR survey solutions that provide
                        engineering-ready geospatial intelligence for informed
                        decision-making.
                    </p>

                    <div className="mt-10 flex flex-wrap justify-center gap-5">

                        <button className="rounded-lg bg-secondary px-8 py-4 font-semibold text-white">
                            Request a LiDAR Consultation
                        </button>

                        <button className="rounded-lg border border-white/30 px-8 py-4 text-white">
                            Request a Quote
                        </button>

                    </div>

                </div>

            </section>

        </main>
    );
}


// app/services/geophysical-survey-services/ground-penetrating-radar-gpr-surveys/page.tsx

// import Image from "next/image";
// import Link from "next/link";

// import RadarIcon from "@mui/icons-material/Radar";
// import SearchIcon from "@mui/icons-material/Search";
// import LayersIcon from "@mui/icons-material/Layers";
// import TerrainIcon from "@mui/icons-material/Terrain";
// import RoadIcon from "@mui/icons-material/AddRoad";
// import AccountTreeIcon from "@mui/icons-material/AccountTree";
// import ArchitectureIcon from "@mui/icons-material/Architecture";
// import CheckCircleIcon from "@mui/icons-material/CheckCircle";
// import MapIcon from "@mui/icons-material/Map";
// import DescriptionIcon from "@mui/icons-material/Description";
// import EngineeringIcon from "@mui/icons-material/Engineering";
// import SatelliteAltIcon from "@mui/icons-material/SatelliteAlt";


// export const metadata = {
//     title:
//         "Ground Penetrating Radar (GPR) Surveys | Dynatech Innovations",

//     description:
//         "Professional GPR Survey Services for utility detection, void detection, subsurface mapping, geological investigations, road & pavement assessment, and archaeological surveys.",
// };


// const services = [
//     {
//         title: "Underground Utility Detection",
//         icon: SearchIcon,
//         description:
//             "Identify buried utilities including pipelines, cables, conduits and underground infrastructure without excavation.",
//     },
//     {
//         title: "Void Detection",
//         icon: RadarIcon,
//         description:
//             "Detect underground voids, cavities, sinkholes and subsurface anomalies for safer engineering decisions.",
//     },
//     {
//         title: "Subsurface Mapping",
//         icon: LayersIcon,
//         description:
//             "Create detailed underground maps showing buried features, geological boundaries and infrastructure layers.",
//     },
//     {
//         title: "Geological Investigation",
//         icon: TerrainIcon,
//         description:
//             "Analyze soil layers, bedrock interfaces and near-surface geological conditions.",
//     },
//     {
//         title: "Road & Pavement Assessment",
//         icon: RoadIcon,
//         description:
//             "Evaluate pavement thickness, structural conditions and hidden defects without disruption.",
//     },
//     {
//         title: "Archaeological Surveys",
//         icon: ArchitectureIcon,
//         description:
//             "Perform non-invasive archaeological investigations to locate buried structures and heritage features.",
//     },
// ];


// const advantages = [
//     "Non-destructive investigation",
//     "Metallic & non-metallic detection",
//     "Minimal site disruption",
//     "High-resolution subsurface data",
//     "Rapid data acquisition",
//     "GIS-ready deliverables",
//     "Access difficult locations",
//     "Improved project planning",
// ];


// const applications = [
//     "Utility Mapping Projects",
//     "Infrastructure Development",
//     "Construction Planning",
//     "Transportation Projects",
//     "Mining Operations",
//     "Environmental Studies",
//     "Archaeological Investigations",
//     "Geotechnical Assessments",
//     "Industrial Facilities",
//     "Energy & Utility Corridors",
// ];


// const workflow = [
//     "Site Assessment & Project Planning",
//     "Data Acquisition",
//     "Data Processing & Interpretation",
//     "Mapping & Analysis",
//     "Reporting & Deliverables",
// ];


// const deliverables = [
//     "GPR Survey Reports",
//     "Utility Detection Maps",
//     "Subsurface Profiles",
//     "Radargram Interpretation",
//     "GIS Data Layers",
//     "CAD Deliverables",
//     "3D Subsurface Models",
//     "Georeferenced Datasets",
//     "Pavement Assessment Reports",
//     "Archaeological Investigation Maps",
// ];


// export default function GPRSurveyPage() {

//     return (

//         <main className="bg-white">


//             {/* HERO */}

//             <section className="relative overflow-hidden">

//                 <Image
//                     src="/images/gpr/hero.webp"
//                     alt="Ground Penetrating Radar Survey"
//                     fill
//                     className="object-cover"
//                 />


//                 <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/90 to-transparent" />


//                 <div className="relative mx-auto max-w-7xl px-6 py-32">


//                     <span className="uppercase tracking-[3px] text-sm text-pink-400">
//                         Geophysical Survey Services
//                     </span>


//                     <h1 className="mt-6 max-w-3xl text-5xl font-bold text-white">

//                         Ground Penetrating Radar (GPR) Surveys

//                     </h1>


//                     <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">

//                         Advanced subsurface investigation solutions for utility detection,
//                         void detection, geological studies, infrastructure assessment and
//                         archaeological surveys.

//                     </p>


//                     <div className="mt-10 flex gap-4 flex-wrap">


//                         <Link
//                             href="/contact"
//                             className="rounded-lg bg-pink-600 px-8 py-4 text-white font-semibold"
//                         >
//                             Request a Consultation
//                         </Link>


//                         <Link
//                             href="/contact"
//                             className="rounded-lg border border-white/30 px-8 py-4 text-white"
//                         >
//                             Talk to a GPR Specialist
//                         </Link>


//                     </div>


//                 </div>

//             </section>



//             {/* INTRO */}


//             <section className="py-24">

//                 <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-16">


//                     <div>

//                         <h2 className="text-4xl font-bold">

//                             What is Ground Penetrating Radar (GPR)?

//                         </h2>


//                         <p className="mt-8 text-lg leading-8 text-slate-600">

//                             Ground Penetrating Radar (GPR) is a non-destructive geophysical
//                             survey technology that transmits electromagnetic signals into the
//                             ground and records reflected responses from subsurface objects and
//                             geological boundaries.

//                         </p>


//                         <p className="mt-6 text-lg leading-8 text-slate-600">

//                             It is used to identify and map buried infrastructure,
//                             underground anomalies and subsurface conditions without excavation.

//                         </p>


//                     </div>


//                     <Image
//                         src="/images/gpr/subsurface.webp"
//                         alt="GPR subsurface mapping visualization"
//                         width={700}
//                         height={500}
//                         className="rounded-3xl"
//                     />


//                 </div>

//             </section>



//             {/* SERVICES */}


//             <section className="bg-slate-50 py-24">

//                 <div className="mx-auto max-w-7xl px-6">


//                     <h2 className="text-center text-4xl font-bold">
//                         Our GPR Survey Services
//                     </h2>


//                     <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-8">


//                         {services.map((item) => {

//                             const Icon = item.icon;

//                             return (

//                                 <div
//                                     key={item.title}
//                                     className="bg-white rounded-2xl p-8 shadow"
//                                 >


//                                     <div className="inline-flex rounded-full bg-pink-600 p-3 text-white">

//                                         <Icon />

//                                     </div>


//                                     <h3 className="mt-6 text-xl font-semibold">
//                                         {item.title}
//                                     </h3>


//                                     <p className="mt-4 text-slate-600">
//                                         {item.description}
//                                     </p>


//                                 </div>

//                             )

//                         })}


//                     </div>


//                 </div>

//             </section>




//             {/* GEOLOGICAL */}


//             <section className="py-24">

//                 <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-16">


//                     <div>

//                         <h2 className="text-4xl font-bold">
//                             Geological Investigation
//                         </h2>


//                         <p className="mt-6 text-slate-600 text-lg">

//                             Ground Penetrating Radar helps identify soil layers,
//                             bedrock interfaces, groundwater-related features and
//                             subsurface conditions.

//                         </p>


//                         <ul className="mt-8 space-y-4">

//                             {
//                                 [
//                                     "Site Characterization",
//                                     "Soil-to-Rock Boundary Mapping",
//                                     "Ground Condition Assessment",
//                                     "Mining Investigations",
//                                     "Foundation Engineering Studies",
//                                     "Geotechnical Support Surveys"
//                                 ].map(x => (

//                                     <li key={x} className="flex gap-3">

//                                         <CheckCircleIcon className="text-pink-600" />

//                                         {x}

//                                     </li>

//                                 ))
//                             }


//                         </ul>

//                     </div>


//                     <Image
//                         src="/images/gpr/geology-ai.webp"
//                         alt="Geological GPR visualization"
//                         width={700}
//                         height={500}
//                         className="rounded-3xl"
//                     />


//                 </div>

//             </section>




//             {/* ADVANTAGES */}


//             <section className="bg-slate-950 py-20">


//                 <div className="mx-auto max-w-7xl px-6 grid md:grid-cols-4 gap-8">


//                     {
//                         advantages.map(item => (

//                             <div
//                                 key={item}
//                                 className="text-center text-white"
//                             >

//                                 <RadarIcon className="mx-auto text-pink-500" />

//                                 <p className="mt-4">
//                                     {item}
//                                 </p>


//                             </div>

//                         ))
//                     }


//                 </div>

//             </section>




//             {/* APPLICATIONS */}


//             <section className="py-24">


//                 <div className="mx-auto max-w-7xl px-6">


//                     <h2 className="text-4xl font-bold text-center">
//                         Applications
//                     </h2>


//                     <div className="mt-12 grid md:grid-cols-3 lg:grid-cols-5 gap-5">


//                         {
//                             applications.map(item => (

//                                 <div
//                                     key={item}
//                                     className="rounded-xl bg-slate-100 p-6 text-center"
//                                 >
//                                     {item}
//                                 </div>

//                             ))
//                         }


//                     </div>


//                 </div>


//             </section>




//             {/* WORKFLOW */}


//             <section className="bg-slate-50 py-24">


//                 <div className="mx-auto max-w-7xl px-6">


//                     <h2 className="text-center text-4xl font-bold">
//                         Survey Workflow
//                     </h2>


//                     <div className="mt-14 grid md:grid-cols-5 gap-6">


//                         {
//                             workflow.map((item, index) => (

//                                 <div
//                                     key={item}
//                                     className="text-center"
//                                 >


//                                     <div className="mx-auto h-16 w-16 rounded-full bg-pink-600 text-white flex items-center justify-center text-xl">
//                                         {index + 1}
//                                     </div>


//                                     <p className="mt-5 font-medium">
//                                         {item}
//                                     </p>


//                                 </div>

//                             ))
//                         }


//                     </div>


//                 </div>

//             </section>




//             {/* DELIVERABLES */}


//             <section className="py-24">


//                 <div className="mx-auto max-w-7xl px-6">


//                     <h2 className="text-center text-4xl font-bold">
//                         Deliverables
//                     </h2>


//                     <div className="mt-12 grid md:grid-cols-3 lg:grid-cols-5 gap-6">


//                         {
//                             deliverables.map(item => (

//                                 <div
//                                     key={item}
//                                     className="rounded-xl border p-6 text-center"
//                                 >

//                                     <DescriptionIcon className="mx-auto text-pink-600" />

//                                     <p className="mt-4">
//                                         {item}
//                                     </p>

//                                 </div>

//                             ))
//                         }


//                     </div>


//                 </div>


//             </section>




//             {/* WHY DYNATECH */}


//             <section className="bg-slate-900 py-24">


//                 <div className="mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-16 items-center">


//                     <div>


//                         <h2 className="text-4xl font-bold text-white">
//                             Why Dynatech Innovations?
//                         </h2>


//                         <p className="mt-6 text-slate-300 text-lg">

//                             Dynatech Innovations combines advanced aerial and
//                             ground-based geophysical technologies with experienced
//                             survey workflows to provide reliable subsurface
//                             investigation solutions.

//                         </p>


//                     </div>


//                     <Image
//                         src="/images/gpr/dynatech-team-ai.webp"
//                         alt="Dynatech engineering team"
//                         width={700}
//                         height={500}
//                         className="rounded-3xl"
//                     />


//                 </div>

//             </section>




//             {/* CTA */}


//             <section className="relative py-24">


//                 <Image
//                     src="/images/gpr/cta-ai.webp"
//                     alt="Drone based GPR survey"
//                     fill
//                     className="object-cover"
//                 />


//                 <div className="absolute inset-0 bg-black/70" />


//                 <div className="relative mx-auto max-w-5xl px-6 text-center">


//                     <h2 className="text-4xl font-bold text-white">

//                         Need to See What Lies Beneath the Surface?

//                     </h2>


//                     <p className="mt-6 text-lg text-slate-200">

//                         Reduce uncertainty and improve project planning with
//                         professional Ground Penetrating Radar Survey Services
//                         from Dynatech Innovations.

//                     </p>


//                     <Link
//                         href="/contact"
//                         className="mt-10 inline-block rounded-lg bg-pink-600 px-8 py-4 text-white font-semibold"
//                     >

//                         Request a Consultation

//                     </Link>


//                 </div>


//             </section>


//         </main>

//     )

// }