"use client";

import { motion } from "framer-motion";
import { ArrowRight, Calculator, ShieldCheck, CheckCircle2, Award, HardHat } from "lucide-react";
import { Button } from "@/components/ui/button";
import { COMPANY } from "./site-data";

export function Hero() {
  return (
    <section id="home" className="relative isolate overflow-hidden min-h-[92svh] flex items-center">
      {/* Background image & gradient overlay */}
      <div className="absolute inset-0 -z-10">
        <img
          src="/images/hero.jpg"
          alt="BECS infrastructure construction site"
          className="h-full w-full object-cover scale-105 transition-transform duration-10000 ease-linear animate-pulse-subtle"
        />
        {/* Multi-stage dark gradient & blueprint grid overlay */}
        <div className="absolute inset-0 bg-gradient-to-r from-stone-950/95 via-stone-950/80 to-stone-900/50" />
        <div className="absolute inset-0 blueprint-grid opacity-30" />
      </div>

      <div className="mx-auto w-full max-w-7xl px-4 pt-32 pb-24 md:px-6 md:pt-36">
        <div className="grid items-center gap-12 lg:grid-cols-12">
          {/* Main Hero Copy */}
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
            className="lg:col-span-7"
          >
            {/* Eyebrow badge */}
            <div className="inline-flex items-center gap-3 rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-1.5 backdrop-blur-md">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400" />
              </span>
              <span className="text-xs font-bold uppercase tracking-[0.2em] text-amber-300">
                Government Registered Infrastructure Partner
              </span>
            </div>

            <h1 className="mt-6 text-4xl font-extrabold leading-[1.08] tracking-tight text-white sm:text-5xl md:text-6xl lg:text-[4.1rem]">
              Building the foundation
              <br className="hidden sm:block" /> of{" "}
              <span className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-amber-400 to-amber-500">
                National Progress
                <span className="absolute -bottom-1 left-0 h-[3px] w-full rounded-full bg-amber-400/80" />
              </span>
            </h1>

            <p className="mt-6 max-w-2xl text-base leading-relaxed text-stone-200/90 sm:text-lg">
              {COMPANY.name} ({COMPANY.shortName}) delivers multi-disciplinary civil, hydropower, transport, and environmental engineering across Nepal — backed by an in-house heavy equipment fleet and complete study-to-handover accountability.
            </p>

            {/* Action buttons */}
            <div className="mt-9 flex flex-wrap gap-4 sm:items-center">
              <Button asChild size="lg" className="h-12 px-7 text-base font-semibold shadow-lg shadow-amber-500/20">
                <a href="#estimator">
                  <Calculator className="mr-2 h-4 w-4" />
                  Estimate Project Scope
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="h-12 px-7 text-base text-stone-100 border-stone-600 bg-stone-900/60 hover:bg-stone-800 hover:text-white backdrop-blur"
              >
                <a href="#services">
                  Explore Services
                  <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>

            {/* Micro Trust Pills */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.7, delay: 0.4 }}
              className="mt-12 flex flex-wrap items-center gap-6 border-t border-stone-800/80 pt-6 text-xs text-stone-300/80"
            >
              <span className="flex items-center gap-2">
                <ShieldCheck className="h-4 w-4 text-amber-400" />
                Reg. No. {COMPANY.registrationNo}
              </span>
              <span className="flex items-center gap-2">
                <Award className="h-4 w-4 text-amber-400" />
                Incorporated {COMPANY.incorporatedDate}
              </span>
              <span className="flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-amber-400" />
                Companies Act, 2006
              </span>
            </motion.div>
          </motion.div>

          {/* Right Floating Visual Card */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 30 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="hidden lg:col-span-5 lg:block"
          >
            <div className="relative rounded-2xl border border-white/10 bg-stone-950/70 p-7 backdrop-blur-xl shadow-2xl">
              <div className="flex items-center justify-between border-b border-stone-800 pb-4">
                <div className="flex items-center gap-3">
                  <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-400 text-stone-950 font-bold">
                    <HardHat className="h-5 w-5" />
                  </span>
                  <div>
                    <h3 className="text-sm font-bold text-white">BECS Engineering Scope</h3>
                    <p className="text-[11px] text-stone-400">Integrated Capabilities</p>
                  </div>
                </div>
                <span className="rounded-full bg-emerald-500/20 px-2.5 py-1 text-[10px] font-extrabold uppercase text-emerald-400">
                  Active Operative
                </span>
              </div>

              <div className="mt-5 space-y-3.5">
                {[
                  { label: "Civil & Heavy Construction", desc: "Foundations, RCC, Retaining Walls" },
                  { label: "Energy & Hydropower", desc: "Penstock, Substations, Transmission" },
                  { label: "Roads & Bridge Works", desc: "Highway Paving, Culverts, Bridges" },
                  { label: "Water & Environmental EIA", desc: "Intake Weirs, WTP & EIA Studies" },
                ].map((item) => (
                  <div
                    key={item.label}
                    className="flex items-center justify-between rounded-lg bg-stone-900/80 p-3 border border-stone-800/80 hover:border-amber-400/40 transition-colors"
                  >
                    <div>
                      <div className="text-xs font-bold text-stone-200">{item.label}</div>
                      <div className="text-[11px] text-stone-400">{item.desc}</div>
                    </div>
                    <span className="text-[10px] font-bold text-amber-400">100% Verified</span>
                  </div>
                ))}
              </div>

              <div className="mt-6 rounded-lg bg-amber-400/10 border border-amber-400/30 p-3.5 flex items-center justify-between">
                <div>
                  <div className="text-[10px] uppercase font-bold text-amber-300">In-House Fleet</div>
                  <div className="text-xs font-semibold text-white">Excavators, Dozers, Cranes & Rollers</div>
                </div>
                <Button asChild size="sm" className="h-8 text-xs bg-amber-400 text-stone-950 hover:bg-amber-300">
                  <a href="#why-us">Fleet Details</a>
                </Button>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}