import Link from "next/link";
import {
  ArrowRight,
  BadgeCheck,
  Boxes,
  Clock,
  FileText,
  Mail,
  MapPin,
  Phone,
  Radar,
  Route,
  ShieldCheck,
  Sparkles,
  Truck,
  Users,
  Wallet,
} from "lucide-react";
import { FALLBACK_SITE_CONFIG, getSiteConfig } from "@/lib/api/site";
import CargoEarlyAccessForm from "@/components/logistics/CargoEarlyAccessForm";

export const metadata = {
  title: "Biznie Cargo — Coming Soon | Biznie",
  description:
    "Biznie Cargo is under development. Join the early-access list to be notified when verified transporters, live load matching and shipment tracking go live.",
};

const PLANNED_FEATURES = [
  {
    icon: Route,
    title: "Live Load Matching",
    desc: "Post a load and get matched with verified transporters running that lane.",
  },
  {
    icon: Users,
    title: "Verified Transporter Network",
    desc: "KYC-verified truck owners and fleet operators with ratings and trip history.",
  },
  {
    icon: Radar,
    title: "Shipment Tracking",
    desc: "GPS-based live tracking with ETA updates on dashboard, SMS and app.",
  },
  {
    icon: Wallet,
    title: "Transparent Freight Rates",
    desc: "Compare quotes lane by lane — no hidden brokerage, no rate surprises.",
  },
  {
    icon: FileText,
    title: "Digital Documentation",
    desc: "e-LR, e-way bill and POD handling stored against every trip.",
  },
  {
    icon: ShieldCheck,
    title: "Insured Movement",
    desc: "Transit insurance and structured claim support on covered shipments.",
  },
];

const AUDIENCE = [
  {
    icon: Boxes,
    title: "Shippers & Manufacturers",
    desc: "Move raw materials and finished goods without chasing brokers for every trip.",
  },
  {
    icon: Truck,
    title: "Transporters",
    desc: "Fill return loads, reduce empty running and get discovered by verified shippers.",
  },
  {
    icon: BadgeCheck,
    title: "Truck & Fleet Owners",
    desc: "Steady demand, transparent rates and timely settlement for every completed trip.",
  },
];

const ROADMAP = [
  {
    phase: "Phase 1",
    title: "Platform & Network Design",
    desc: "Product blueprint, lane research and transporter partnership framework.",
    status: "Completed",
    statusClass: "bg-green-50 text-green-700 ring-1 ring-green-200",
  },
  {
    phase: "Phase 2",
    title: "Transporter Onboarding",
    desc: "KYC-verified transporters, truck owners and fleet operators being onboarded.",
    status: "In progress",
    statusClass: "bg-blue-50 text-[#2563eb] ring-1 ring-blue-200",
  },
  {
    phase: "Phase 3",
    title: "Pilot on Key Lanes",
    desc: "Closed pilot with early-access shippers on selected industrial corridors.",
    status: "Up next",
    statusClass: "bg-amber-50 text-amber-700 ring-1 ring-amber-200",
  },
  {
    phase: "Phase 4",
    title: "Public Launch",
    desc: "Open access on web and mobile app with live tracking and digital documentation.",
    status: "Planned",
    statusClass: "bg-gray-100 text-gray-600 ring-1 ring-gray-200",
  },
];

const FAQS = [
  {
    q: "When will Biznie Cargo go live?",
    a: "We are currently onboarding transporters and preparing a closed pilot on selected lanes. A public launch date will be shared directly with everyone on the early-access list.",
  },
  {
    q: "Does it cost anything to join the early-access list?",
    a: "No. Joining is free and puts you first in line for pilot access, onboarding support and launch pricing.",
  },
  {
    q: "I am a transporter or truck owner — can I register now?",
    a: "Yes. Choose your role in the form below and our partnerships team will contact you for the onboarding and verification process.",
  },
  {
    q: "Can I still procure raw materials on Biznie today?",
    a: "Absolutely. Biznie Goods is fully live — browse products, compare live prices and raise RFQs right now.",
  },
];

export default async function LogisticsPage() {
  // Same contact source as the footer and contact page (B21).
  const site = await getSiteConfig({ next: { revalidate: 300 } }).catch(() => FALLBACK_SITE_CONFIG);

  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <section className="relative overflow-hidden bg-[#0b1220]">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(37,99,235,0.35),_transparent_58%)]" />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-[0.07] [background-image:linear-gradient(to_right,#fff_1px,transparent_1px),linear-gradient(to_bottom,#fff_1px,transparent_1px)] [background-size:56px_56px]"
        />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
          <div className="max-w-3xl">
            <span className="inline-flex items-center gap-2 rounded-full bg-[#2563eb]/15 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-[#93b4fd] ring-1 ring-[#2563eb]/40">
              <Sparkles size={13} />
              Coming Soon
            </span>

            <h1 className="mt-6 text-3xl font-black leading-tight tracking-[-0.02em] text-white sm:text-4xl lg:text-5xl">
              Biznie Cargo is on the way
            </h1>

            <p className="mt-5 max-w-2xl text-base leading-relaxed text-slate-300 sm:text-lg">
              We are building the smarter way to move cargo — verified transporters, live load
              matching and end-to-end shipment visibility, all inside your Biznie account. The
              platform is currently in development and not yet open to the public.
            </p>

            <div className="mt-9 flex flex-col gap-4 sm:flex-row sm:items-center">
              <a
                href="#early-access"
                className="inline-flex h-[48px] items-center justify-center gap-2.5 rounded-xl bg-[#2563eb] px-7 text-[15px] font-semibold text-white shadow-[0_12px_28px_rgba(37,99,235,0.35)] transition-colors hover:bg-[#1d4ed8]"
              >
                Join the Early-Access List
                <ArrowRight className="h-4 w-4" />
              </a>
              <Link
                href="/products"
                className="inline-flex h-[48px] items-center justify-center gap-2.5 rounded-xl border border-white/20 bg-white/5 px-7 text-[15px] font-semibold text-white transition-colors hover:bg-white/10"
              >
                Explore Biznie Goods
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>

            <div className="mt-10 flex flex-wrap items-center gap-x-7 gap-y-3 text-[13px] text-slate-400">
              <span className="inline-flex items-center gap-2">
                <Clock size={14} className="text-[#93b4fd]" />
                Currently onboarding transport partners
              </span>
              <span className="inline-flex items-center gap-2">
                <MapPin size={14} className="text-[#93b4fd]" />
                Pilot planned on key industrial lanes
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Notice strip */}
      <div className="border-b border-blue-100 bg-blue-50/70">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <p className="text-sm text-[#1e3a8a] text-center">
            <strong className="font-bold">Heads up:</strong> Biznie Cargo is an upcoming service.
            Bookings, tracking and freight quotes are not available yet — everything below is what we
            are building.
          </p>
        </div>
      </div>

      {/* What we are building */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16">
        <div className="max-w-2xl">
          <h2 className="text-2xl font-black text-gray-900 sm:text-3xl">What we&apos;re building</h2>
          <p className="mt-3 text-gray-600">
            Every capability below is planned for the first release of Biznie Cargo.
          </p>
        </div>

        <div className="mt-9 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {PLANNED_FEATURES.map(({ icon: Icon, title, desc }) => (
            <div
              key={title}
              className="relative rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
            >
              <span className="absolute right-4 top-4 rounded-full bg-gray-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-gray-500">
                Planned
              </span>
              <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-[#eff5ff] text-[#2563eb]">
                <Icon size={21} />
              </div>
              <h3 className="font-black text-gray-900">{title}</h3>
              <p className="mt-1.5 text-sm leading-relaxed text-gray-600">{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Who it's for */}
      <section className="bg-gray-50 py-14 sm:py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-2xl font-black text-gray-900 sm:text-3xl">Who it&apos;s for</h2>
            <p className="mx-auto mt-3 max-w-2xl text-gray-600">
              One network connecting the people who send goods with the people who move them.
            </p>
          </div>

          <div className="mt-9 grid grid-cols-1 gap-5 md:grid-cols-3">
            {AUDIENCE.map(({ icon: Icon, title, desc }) => (
              <div key={title} className="rounded-2xl border border-gray-100 bg-white p-7 text-center shadow-sm">
                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[#2563eb] text-white">
                  <Icon size={20} />
                </div>
                <h3 className="font-bold text-gray-900">{title}</h3>
                <p className="mt-1.5 text-sm text-gray-600">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Roadmap */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16">
        <div className="text-center">
          <h2 className="text-2xl font-black text-gray-900 sm:text-3xl">Where we are right now</h2>
          <p className="mx-auto mt-3 max-w-2xl text-gray-600">
            A transparent view of our rollout — we&apos;ll keep this updated as each phase closes.
          </p>
        </div>

        <ol className="mt-10 space-y-4">
          {ROADMAP.map((step) => (
            <li
              key={step.phase}
              className="flex flex-col gap-3 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm sm:flex-row sm:items-center sm:gap-6 sm:p-6"
            >
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#eff5ff] text-sm font-black text-[#2563eb]">
                {step.phase.replace("Phase ", "0")}
              </div>
              <div className="min-w-0 flex-1">
                <div className="text-[11px] font-bold uppercase tracking-wider text-gray-400">
                  {step.phase}
                </div>
                <h3 className="font-bold text-gray-900">{step.title}</h3>
                <p className="mt-1 text-sm text-gray-600">{step.desc}</p>
              </div>
              <span
                className={`shrink-0 self-start rounded-full px-3 py-1 text-[11px] font-bold sm:self-center ${step.statusClass}`}
              >
                {step.status}
              </span>
            </li>
          ))}
        </ol>
      </section>

      {/* Early access */}
      <section id="early-access" className="scroll-mt-24 bg-gray-50 py-14 sm:py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-start">
            <div>
              <h2 className="text-2xl font-black text-gray-900 sm:text-3xl">
                Be first on the road with us
              </h2>
              <p className="mt-3 text-gray-600">
                Join the early-access list and we&apos;ll reach out the moment Biznie Cargo opens in
                your region. Early members get pilot access and onboarding support from our team.
              </p>

              <ul className="mt-7 space-y-3.5">
                {[
                  "Priority access when the pilot opens on your lanes",
                  "Dedicated onboarding and verification support",
                  "Launch pricing for early transport partners",
                  "Direct line to the product team for feedback",
                ].map((point) => (
                  <li key={point} className="flex items-start gap-3 text-sm text-gray-700">
                    <BadgeCheck size={17} className="mt-0.5 shrink-0 text-[#2563eb]" />
                    {point}
                  </li>
                ))}
              </ul>

              <div className="mt-8 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
                <div className="text-xs font-semibold uppercase tracking-wider text-gray-400">
                  Prefer to talk to us directly?
                </div>
                <div className="mt-3 space-y-2.5">
                  <a
                    href={`tel:${site.phone.replace(/\s+/g, "")}`}
                    className="flex items-center gap-3 text-sm font-semibold text-gray-900 transition-colors hover:text-[#2563eb]"
                  >
                    <Phone size={15} className="text-[#2563eb]" />
                    {site.phone}
                  </a>
                  <a
                    href={`mailto:${site.email}`}
                    className="flex items-center gap-3 text-sm font-semibold text-gray-900 transition-colors hover:text-[#2563eb]"
                  >
                    <Mail size={15} className="text-[#2563eb]" />
                    {site.email}
                  </a>
                </div>
              </div>
            </div>

            <CargoEarlyAccessForm />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16">
        <h2 className="text-center text-2xl font-black text-gray-900 sm:text-3xl">
          Frequently asked
        </h2>
        <div className="mt-8 divide-y divide-gray-100 overflow-hidden rounded-2xl border border-gray-100 shadow-sm">
          {FAQS.map((faq) => (
            <details key={faq.q} className="group bg-white">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-sm font-bold text-gray-900 hover:bg-gray-50">
                {faq.q}
                <span className="shrink-0 text-lg font-normal text-[#2563eb] transition-transform group-open:rotate-45">
                  +
                </span>
              </summary>
              <p className="px-6 pb-5 text-sm leading-relaxed text-gray-600">{faq.a}</p>
            </details>
          ))}
        </div>
      </section>

      {/* Meanwhile CTA */}
      <section className="bg-gradient-to-r from-[#1e3a8a] to-[#2563eb] py-14">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
          <h2 className="text-2xl font-black sm:text-3xl">In the meantime, Biznie Goods is live</h2>
          <p className="mx-auto mt-3 max-w-2xl text-blue-100">
            Source raw materials from verified sellers, track live prices and raise RFQs today —
            while we get Biznie Cargo ready for the road.
          </p>
          <div className="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
            <Link
              href="/products"
              className="inline-flex h-[48px] items-center justify-center rounded-xl bg-white px-7 text-[15px] font-bold text-[#1e3a8a] transition-colors hover:bg-gray-100"
            >
              Browse Products
            </Link>
            <Link
              href="/contact"
              className="inline-flex h-[48px] items-center justify-center rounded-xl border border-white/40 px-7 text-[15px] font-bold text-white transition-colors hover:bg-white/10"
            >
              Talk to Our Team
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}