import React from "react";
import { ArrowRight, AlertTriangle, CheckCircle2, MapPin, FileCheck, Users, Factory, Truck, ClipboardCheck, Boxes, Database, ShieldCheck, Leaf, Coffee, Sprout, TreePalm, Trees, PackageCheck, Network, Table2, FileText, BarChart3, Globe2 } from "lucide-react";

const IconCard = ({ icon: Icon, title, small = false }) => (
  <div className={`flex flex-col items-center justify-center rounded-xl border border-slate-200 bg-white/80 text-center shadow-sm ${small ? "p-4" : "p-5"}`}>
    <Icon className="mb-3 h-8 w-8 text-emerald-600" strokeWidth={1.6} />
    <p className="text-sm font-semibold text-slate-900 leading-tight">{title}</p>
  </div>
);

const Capability = ({ icon: Icon, title }) => (
  <div className="flex items-center gap-3 py-3">
    <Icon className="h-8 w-8 shrink-0 text-blue-800" strokeWidth={1.5} />
    <span className="text-sm font-semibold text-slate-800 leading-snug">{title}</span>
  </div>
);

const Outcome = ({ icon: Icon, title, text }) => (
  <div className="border-r border-slate-200 last:border-r-0 pr-5">
    <Icon className="mb-3 h-8 w-8 text-emerald-600" strokeWidth={1.5} />
    <h4 className="text-sm font-bold text-slate-900 leading-tight">{title}</h4>
    <p className="mt-2 text-sm text-slate-600 leading-relaxed">{text}</p>
  </div>
);

const FlowStep = ({ icon: Icon, label }) => (
  <div className="relative z-10 flex flex-col items-center gap-3">
    <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 border-white bg-slate-900/30 backdrop-blur-sm">
      <Icon className="h-9 w-9 text-white" strokeWidth={1.5} />
    </div>
    <span className="text-sm font-semibold text-white">{label}</span>
  </div>
);

export default function EUDR360LandingPage() {
  const misconceptions = [
    [MapPin, "GPS coordinates are enough"],
    [FileCheck, "Certifications guarantee compliance"],
    [Users, "Supplier declarations are sufficient"],
    [Table2, "Spreadsheets are adequate"],
  ];

  const risks = [
    "Incomplete or inaccurate DDS",
    "Supplier verification issues",
    "Traceability inconsistencies",
    "Audit & evidence gaps",
    "Shipment delays",
    "Customs complications",
    "Buyer rejection",
    "Deforestation-risk exposure",
    "Loss of EU market access",
  ];

  const commodities = [
    [Leaf, "Cocoa"],
    [Coffee, "Coffee"],
    [Sprout, "Shea"],
    [TreePalm, "Palm"],
    [Globe2, "Rubber"],
    [Trees, "Wood"],
    [PackageCheck, "Derived & Regulated Raw Materials"],
  ];

  const audiences = [
    [Users, "Cooperatives"],
    [FileCheck, "Exporters"],
    [Boxes, "Traders"],
    [Factory, "Processors"],
    [Truck, "Importers"],
    [ShieldCheck, "EU Buyers"],
    [Network, "Supply Chain Operators"],
  ];

  return (
    <main className="min-h-screen bg-slate-50 font-sans text-slate-900">
      <section className="relative overflow-hidden bg-[#001f3a] text-white">
        <div className="absolute inset-0 opacity-30">
          <div className="absolute right-0 top-0 h-full w-3/4 bg-[radial-gradient(circle_at_center,#0ea5e9_0,transparent_45%)]" />
          <div className="absolute inset-0 bg-[linear-gradient(120deg,#001f3a,#002b4d_45%,#00111f)]" />
        </div>

        <header className="relative mx-auto flex max-w-7xl items-center justify-between px-8 py-8">
          <div>
            <div className="flex items-center gap-2 text-3xl font-black tracking-tight">
              <span className="inline-block h-8 w-8 rounded-full border-4 border-emerald-400 border-l-slate-300" />
              EUDR<span className="text-emerald-400">360°</span>
            </div>
            <p className="ml-10 text-xs font-semibold text-white/90">Trace. Verify. Comply.</p>
          </div>
          <button className="rounded-md bg-emerald-500 px-6 py-3 text-sm font-bold text-white shadow-lg hover:bg-emerald-400">
            Request a Demo <ArrowRight className="ml-1 inline h-4 w-4" />
          </button>
        </header>

        <div className="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-8 pb-20 pt-8 lg:grid-cols-[0.9fr_1.2fr]">
          <div>
            <h1 className="max-w-2xl text-5xl font-black leading-tight tracking-tight">
              Secure EU Market Access Through Structured Traceability & Compliance Workflows
            </h1>
            <p className="mt-7 max-w-xl text-xl leading-relaxed text-white/90">
              EUDR360° helps operators structure sourcing, traceability, and due diligence to meet EUDR requirements and buyer expectations.
            </p>
            <div className="mt-9 flex flex-wrap items-center gap-5">
              <button className="rounded-md bg-emerald-500 px-7 py-4 text-base font-bold text-white shadow-xl hover:bg-emerald-400">
                Assess Your EUDR Readiness <ArrowRight className="ml-1 inline h-5 w-5" />
              </button>
              <a className="font-bold text-emerald-400 underline underline-offset-4" href="#diagnostic">
                Request an EUDR Diagnostic
              </a>
            </div>
          </div>

          <div className="relative min-h-[300px]">
            <div className="absolute left-8 right-8 top-24 h-px bg-white/60" />
            <div className="grid grid-cols-6 gap-4">
              <FlowStep icon={Users} label="Supplier" />
              <FlowStep icon={MapPin} label="Parcel" />
              <FlowStep icon={Boxes} label="Material" />
              <FlowStep icon={Factory} label="Transformation" />
              <FlowStep icon={Truck} label="Consignment" />
              <FlowStep icon={ClipboardCheck} label="DDS" />
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl space-y-6 px-8 py-8">
        <div className="grid gap-6 lg:grid-cols-[1fr_1.8fr_1.1fr]">
          <div className="rounded-xl bg-white p-8 shadow-sm">
            <p className="text-sm font-black uppercase text-blue-900">The Challenge</p>
            <h2 className="mt-4 text-3xl font-black leading-tight text-slate-900">Many Operators Are Not Operationally Ready for EUDR</h2>
            <p className="mt-5 text-base leading-relaxed text-slate-700">
              Certifications, supplier declarations or GPS coordinates alone are not enough. Complex supply chains create fragmentation, gaps and compliance risks.
            </p>
          </div>

          <div className="rounded-xl bg-white p-8 shadow-sm">
            <p className="text-sm font-black uppercase text-blue-900">Common Misconceptions</p>
            <div className="mt-7 grid grid-cols-2 gap-4 md:grid-cols-4">
              {misconceptions.map(([Icon, title]) => (
                <div key={title} className="rounded-lg border border-red-200 p-5 text-center">
                  <Icon className="mx-auto h-11 w-11 text-red-500" strokeWidth={1.5} />
                  <p className="mt-5 min-h-[56px] text-sm font-bold leading-snug text-slate-900">{title}</p>
                  <span className="mt-5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-red-500 text-xs font-bold text-red-500">×</span>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-xl bg-red-50 p-8 shadow-sm">
            <p className="text-sm font-black uppercase text-red-600">This Creates Major Risks</p>
            <ul className="mt-5 space-y-2.5">
              {risks.map((risk) => (
                <li key={risk} className="flex gap-3 text-sm text-slate-800">
                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
                  {risk}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="grid items-center gap-8 rounded-xl bg-white p-8 shadow-sm lg:grid-cols-[1.7fr_0.9fr]">
          <div>
            <p className="text-sm font-black uppercase text-blue-900">Our Infrastructure Capabilities</p>
            <div className="mt-6 grid grid-cols-2 gap-x-8 border-b border-slate-200 pb-4 md:grid-cols-3 lg:grid-cols-5">
              <Capability icon={Network} title="Supply Chain Structuring" />
              <Capability icon={Table2} title="Parcel-Level Traceability" />
              <Capability icon={Users} title="Supplier & Coop Onboarding" />
              <Capability icon={MapPin} title="Geo-coordinates Management" />
              <Capability icon={Boxes} title="Aggregation-Compatible Workflows" />
            </div>
            <div className="grid grid-cols-2 gap-x-8 pt-4 md:grid-cols-3 lg:grid-cols-5">
              <Capability icon={Factory} title="Transformation-Compatible Traceability" />
              <Capability icon={Truck} title="Multi-Supplier Shipment Workflows" />
              <Capability icon={FileText} title="DDS Preparation Support" />
              <Capability icon={ClipboardCheck} title="Evidence Pack Structuring" />
              <Capability icon={ShieldCheck} title="Deforestation-Risk Analysis Support" />
            </div>
            <div className="mt-8 flex flex-wrap gap-5">
              <button className="rounded-md bg-blue-900 px-6 py-4 text-base font-bold text-white">
                Structure Your Supply Chain <ArrowRight className="ml-1 inline h-5 w-5" />
              </button>
              <a className="self-center font-bold text-blue-900 underline underline-offset-4" href="#contact">Discuss Your Compliance Workflow</a>
            </div>
          </div>
          <div className="rounded-xl bg-slate-100 p-6">
            <div className="rounded-xl bg-slate-900 p-4 shadow-2xl">
              <div className="mb-3 flex gap-2">
                <span className="h-3 w-3 rounded-full bg-slate-600" />
                <span className="h-3 w-3 rounded-full bg-slate-600" />
                <span className="h-3 w-3 rounded-full bg-slate-600" />
              </div>
              <div className="grid gap-3">
                <div className="h-10 rounded bg-white/90" />
                <div className="grid grid-cols-3 gap-3">
                  <div className="h-24 rounded bg-emerald-100" />
                  <div className="h-24 rounded bg-blue-100" />
                  <div className="h-24 rounded bg-slate-200" />
                </div>
                <div className="h-36 rounded bg-white/90" />
              </div>
            </div>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-2">
          <div className="rounded-xl bg-white p-8 shadow-sm">
            <p className="text-sm font-black uppercase text-blue-900">Commodities Supported</p>
            <div className="mt-6 grid grid-cols-3 gap-3 md:grid-cols-7">
              {commodities.map(([Icon, title]) => <IconCard key={title} icon={Icon} title={title} small />)}
            </div>
          </div>
          <div className="rounded-xl bg-white p-8 shadow-sm">
            <p className="text-sm font-black uppercase text-blue-900">Designed For</p>
            <div className="mt-6 grid grid-cols-3 gap-3 md:grid-cols-7">
              {audiences.map(([Icon, title]) => <IconCard key={title} icon={Icon} title={title} small />)}
            </div>
          </div>
        </div>

        <div className="rounded-xl bg-white p-8 shadow-sm">
          <p className="text-sm font-black uppercase text-blue-900">Strategic Outcomes</p>
          <div className="mt-6 grid gap-6 md:grid-cols-3 lg:grid-cols-6">
            <Outcome icon={PackageCheck} title="Stronger EUDR Readiness" text="Better prepared for due diligence and EU requirements" />
            <Outcome icon={Network} title="Improved Traceability Visibility" text="End-to-end visibility across parcels, flows and transformations" />
            <Outcome icon={FileCheck} title="More Structured Compliance Preparation" text="Organized data and workflows for accurate DDS preparation" />
            <Outcome icon={ClipboardCheck} title="Auditable Sourcing Records" text="Verifiable, consistent and audit-ready documentation" />
            <Outcome icon={ShieldCheck} title="Reduced Operational Friction" text="Fewer delays, fewer errors, smoother shipments" />
            <Outcome icon={Globe2} title="Better EU Market Access Readiness" text="Stronger position with buyers, customs and regulators" />
          </div>
        </div>

        <div className="grid items-center gap-8 rounded-xl bg-white p-8 shadow-sm lg:grid-cols-[0.8fr_1.2fr_1.2fr]">
          <div>
            <p className="text-sm font-black uppercase text-blue-900">Beyond Spreadsheets</p>
            <p className="mt-5 text-base leading-relaxed text-slate-700">
              Spreadsheets and fragmented files can't handle today's EUDR complexity. EUDR360° centralizes data, structures workflows and delivers real visibility.
            </p>
            <p className="mt-5 text-base leading-relaxed text-slate-700">
              Work with real data. Prove your compliance. Build buyer and regulator trust.
            </p>
          </div>

          <div className="overflow-hidden rounded-xl border border-slate-300 bg-slate-50">
            <div className="bg-slate-800 px-6 py-3 text-sm font-black uppercase text-white">The Old Way</div>
            <ul className="space-y-3 p-6 text-sm font-semibold text-slate-700">
              {['Spreadsheets', 'Emails & WhatsApp', 'Scattered Documents', 'Manual Checks', 'High Risk of Errors', 'No Real Visibility'].map((item) => (
                <li key={item} className="flex items-center gap-3"><AlertTriangle className="h-4 w-4 text-slate-500" /> {item}</li>
              ))}
            </ul>
          </div>

          <div className="overflow-hidden rounded-xl border border-emerald-300 bg-emerald-50">
            <div className="bg-emerald-600 px-6 py-3 text-sm font-black uppercase text-white">The EUDR360° Way</div>
            <ul className="space-y-3 p-6 text-sm font-semibold text-emerald-900">
              {['Structured Workflows', 'Centralized Data', 'Parcel-Level Traceability', 'Automated Validations', 'Audit-Ready Evidence', 'Real-Time Visibility'].map((item) => (
                <li key={item} className="flex items-center gap-3"><CheckCircle2 className="h-4 w-4 text-emerald-600" /> {item}</li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <footer className="bg-[#001f3a] px-8 py-10 text-white">
        <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-6 md:flex-row md:items-center">
          <div>
            <h2 className="text-3xl font-black">Ready to Secure Your EU Market Access?</h2>
            <p className="mt-1 text-xl text-white/90">Get started with EUDR360° today.</p>
          </div>
          <div className="flex gap-4">
            <button className="rounded-md bg-emerald-500 px-7 py-4 text-base font-bold text-white hover:bg-emerald-400">Request a Demo <ArrowRight className="ml-1 inline h-5 w-5" /></button>
            <button className="rounded-md border border-white px-7 py-4 text-base font-bold text-white hover:bg-white hover:text-blue-950">Contact Us</button>
          </div>
        </div>
      </footer>
    </main>
  );
}