import { HeroSection } from "@/components/HeroSection";
import { OptimizedImage } from "@/components/OptimizedImage";
import {
  Wallet,
  ShieldCheck,
  Clock,
  Users,
  Smartphone,
  Navigation,
  UserCheck,
  ShieldAlert,
  MapPin,
  Car,
  Briefcase,
  Apple,
  Play,
  ArrowUpRight,
} from "lucide-react";
import {
  UserGroupIcon,
  BriefcaseIcon,
  PaperAirplaneIcon,
  BuildingOffice2Icon,
  TruckIcon,
  CalendarDaysIcon,
  ShieldCheckIcon as HeroShield,
  UsersIcon as HeroUsers,
} from "@heroicons/react/24/outline";
import driverImg from "@/assets/driver.png";
import logoWhite from "@/assets/SWEET SHUTTLE LOGO ON WHITE BG (1).png";
import { SiteFooter } from "@/components/SiteFooter";

const BRAND = "#00A86B";

function Tag({
  children,
  variant = "light",
  centered,
}: {
  children: React.ReactNode;
  variant?: "light" | "dark";
  centered?: boolean;
}) {
  const textColor = variant === "dark" ? "text-white" : "text-[color:var(--brand)]";

  if (centered) {
    return (
      <span className="ss-tag group inline-flex items-center gap-3">
        <span className="ss-tag-bar inline-block h-0.5 w-4 rounded-full bg-[color:var(--brand)]" />
        <span className={`text-[11px] font-extrabold uppercase tracking-[0.25em] ${textColor}`}>
          {children}
        </span>
        <span className="ss-tag-bar inline-block h-0.5 w-4 rounded-full bg-[color:var(--brand)]" />
      </span>
    );
  }

  return (
    <span className="ss-tag group inline-flex items-center gap-3">
      <span className="ss-tag-bar inline-block w-0.5 h-4 rounded-full bg-[color:var(--brand)]" />
      <span className={`text-[11px] font-extrabold uppercase tracking-[0.25em] ${textColor}`}>
        {children}
      </span>
    </span>
  );
}

function Feature({
  icon: Icon,
  title,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
}) {
  return (
    <div className="flex items-center gap-3">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[color:var(--brand)]/10 text-[color:var(--brand)]">
        <Icon className="h-4 w-4" />
      </span>
      <span className="text-sm font-semibold text-foreground">{title}</span>
    </div>
  );
}

export default function Index() {
  return (
    <main
      className="min-h-screen bg-white text-foreground"
      style={{ ["--brand" as string]: BRAND }}
    >
      <h1 className="sr-only">
        Sweet Shuttle — Ride-hailing app in Nigeria for booking safe, fixed-fare rides in Lagos
      </h1>

      {/* ── Hero ───────────────────────────────────────── */}
      <HeroSection />

      <section id="riders" className="border-t border-black/5 py-16 sm:py-24 md:py-32">
        <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 sm:gap-16 sm:px-6 lg:grid-cols-2">
          <div>
            <Tag>For Riders</Tag>
            <h2 className="mt-6 text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
              Getting a ride shouldn't be{" "}
              <span className="italic text-[color:var(--brand)]">stressful.</span>
            </h2>
            <p className="mt-6 max-w-md text-base leading-relaxed text-muted-foreground">
              With Sweet Shuttle, you enjoy:
            </p>

            <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <Feature icon={Wallet} title="Transparent Pricing you both agree on" />
              <Feature icon={Clock} title="Fewer Driver Cancellations" />
              <Feature icon={Navigation} title="Faster Driver Matching" />
              <Feature icon={ShieldCheck} title="Safer Trips" />
              <Feature icon={UserCheck} title="Verified Drivers" />
              <Feature icon={Wallet} title="Multiple Payment Options" />
              <Feature icon={Briefcase} title="Corporate Ride Solutions" />
              <Feature icon={Clock} title="Nearby drivers for pickups within seven minutes" />
            </div>

            <div className="mt-10 flex flex-wrap items-center gap-6">
              <a
                href="#"
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--brand)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[color:var(--brand)]/90"
              >
                Book Your Next Ride
                <span aria-hidden>↗</span>
              </a>
            </div>
          </div>

          {/* Phone mock card */}
          <div className="relative">
            <div className="absolute -inset-6 rounded-[2rem] bg-[color:var(--brand)]/10 blur-2xl" />
            <div className="relative rounded-[1.75rem] border border-black/5 bg-white p-6 shadow-[0_30px_80px_-20px_rgba(0,168,107,0.25)]">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>9:41</span>
                <span className="inline-flex items-center gap-1.5">
                  <span className="h-1.5 w-1.5 rounded-full bg-[color:var(--brand)]" />
                  Live trip
                </span>
              </div>

              <div className="relative mt-4 h-56 overflow-hidden rounded-2xl bg-gradient-to-br from-[color:var(--brand)]/15 via-white to-[color:var(--brand)]/5">
                <svg viewBox="0 0 400 220" className="absolute inset-0 h-full w-full" fill="none">
                  <path
                    d="M40 180 C 120 140, 180 200, 240 120 S 340 40, 370 40"
                    stroke={BRAND}
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                </svg>
                <span className="absolute bottom-8 left-8 h-3 w-3 rounded-full bg-black" />
                <span className="absolute right-6 top-6 flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--brand)] text-white shadow-lg">
                  <MapPin className="h-4 w-4" />
                </span>
              </div>

              <div className="mt-4 flex items-center gap-3 rounded-2xl border border-black/5 bg-secondary/60 p-4">
                <span className="flex h-10 w-10 items-center justify-center rounded-full bg-[color:var(--brand)] text-white">
                  <Car className="h-5 w-5" />
                </span>
                <div className="flex-1">
                  <div className="flex items-center gap-2 text-sm font-semibold">
                    Chidi O.
                    <span className="text-[color:var(--brand)]">★ 4.9</span>
                  </div>
                  <div className="text-xs text-muted-foreground">Toyota Corolla · LAG 248...</div>
                </div>
                <div className="text-right text-xs">
                  <div className="uppercase tracking-wider text-muted-foreground">ETA</div>
                  <div className="font-semibold">3 min</div>
                </div>
              </div>

              <div className="mt-3 flex items-center justify-between rounded-2xl border border-black/5 p-4">
                <div className="flex items-center gap-2 text-sm">
                  Total fare
                  <span className="rounded-full bg-[color:var(--brand)]/10 px-2 py-0.5 text-xs font-semibold text-[color:var(--brand)]">
                    FIXED
                  </span>
                </div>
                <div className="text-xl font-bold">₦3,200</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2 — FOR DRIVERS */}
      <section id="drivers" className="bg-[color:var(--brand)] py-16 text-white sm:py-24 md:py-32">
        <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 sm:gap-16 sm:px-6 lg:grid-cols-2">
          <div className="relative order-2 lg:order-1">
            <div className="overflow-hidden rounded-[1.75rem] border border-white/15 shadow-2xl">
              <OptimizedImage
                src={driverImg}
                alt="Nigerian driver in traffic"
                className="h-[360px] w-full object-cover sm:h-[440px] lg:h-[520px]"
                loading="lazy"
                width={1024}
                height={1536}
              />
              <div className="flex items-end justify-between bg-black/40 px-6 py-4 backdrop-blur">
                <div>
                  <div className="text-xs uppercase tracking-[0.18em] text-white/60">Tunde A.</div>
                  <div className="text-lg font-semibold">3 years on the road</div>
                </div>
                <span className="rounded-full border border-white/30 px-3 py-1 text-xs">
                  Lagos · VI
                </span>
              </div>
            </div>
          </div>

          <div className="order-1 lg:order-2">
            <Tag variant="dark">For Drivers</Tag>
            <h2 className="mt-6 text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
              Driving should be <span className="italic">rewarding.</span>
            </h2>
            <p className="mt-6 max-w-md text-base leading-relaxed text-white/80">
              That's why we built a platform where drivers are valued as partners and enjoy
            </p>

            <div className="mt-10 divide-y divide-white/15 border-y border-white/15">
              {[
                "Better Earnings",
                "Driver Rewards and Incentives",
                "Faster Support",
                "Corporate Ride Opportunities",
                "Fair and Transparent Policies",
              ].map((t, i) => (
                <div
                  key={t}
                  className="ss-reveal flex items-center gap-3 py-4"
                  style={{ animationDelay: `${i * 70}ms` }}
                >
                  <span
                    className="ss-check flex h-6 w-6 items-center justify-center rounded-full bg-white/15 text-xs"
                    style={{ animationDelay: `${i * 70}ms` }}
                  >
                    ✓
                  </span>
                  <div className="text-base font-semibold">{t}</div>
                </div>
              ))}
            </div>

            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href="#"
                className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-[color:var(--brand)] transition hover:bg-white/90"
              >
                Become a Driver Partner <span aria-hidden>↗</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 3 — HOW IT WORKS */}
      <section id="how-it-works" className="relative py-16 sm:py-24 md:py-32 overflow-hidden">
        <div className="relative mx-auto max-w-6xl px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            {/* LARGE PROMINENT Logo badge above tag */}
            <div className="flex justify-center mb-8">
              <div className="relative group">
                <OptimizedImage
                  src={logoWhite}
                  alt="Sweet Shuttle Logo"
                  className="h-24 w-auto sm:h-28 md:h-32 lg:h-36 drop-shadow-2xl transition-all duration-300 group-hover:scale-105"
                  loading="lazy"
                />
                {/* Prominent glow effect */}
                <div 
                  className="absolute inset-0 blur-3xl opacity-40 group-hover:opacity-50 transition-opacity duration-300"
                  style={{
                    background: `radial-gradient(circle, ${BRAND} 30%, transparent 70%)`,
                  }}
                />
              </div>
            </div>

            <div className="flex justify-center">
              <Tag centered>How Sweet Shuttle Works</Tag>
            </div>
            <h2 className="mt-6 text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
              How Sweet Shuttle <span className="italic text-[color:var(--brand)]">Works.</span>
            </h2>
          </div>

          {/* Centered vertical timeline with alternating cards */}
          <ol className="relative mx-auto mt-20 max-w-4xl">
            {/* center spine */}
            <span
              aria-hidden
              className="absolute left-8 top-2 bottom-2 w-px bg-[color:var(--brand)]/25 md:left-1/2 md:-translate-x-1/2"
              style={{
                backgroundImage:
                  "linear-gradient(to bottom, color-mix(in oklab, var(--brand) 45%, transparent) 0 6px, transparent 6px 14px)",
                backgroundSize: "1px 14px",
                backgroundRepeat: "repeat-y",
                backgroundColor: "transparent",
              }}
            />

            {[
              {
                icon: Smartphone,
                title: "Download the App",
                desc: "Create your account in minutes.",
              },
              {
                icon: Navigation,
                title: "Book or Accept a Ride",
                desc: "Riders request rides. Drivers accept trips nearby. Both rider and driver agree fare.",
              },
              {
                icon: UserCheck,
                title: "Ride With Confidence",
                desc: "Track every trip and enjoy a safe, reliable experience.",
              },
              {
                icon: ShieldAlert,
                title: "Rate Your Experience",
                desc: "Help us keep improving every journey.",
              },
            ].map((s, i) => {
              const isLeft = i % 2 === 0;
              return (
                <li
                  key={s.title}
                  className="ss-card ss-reveal relative grid grid-cols-1 items-center gap-4 pb-14 last:pb-0 md:grid-cols-2 md:gap-16"
                  style={{ animationDelay: `${i * 90}ms` }}
                >
                  {/* node on the spine */}
                  <span className="ss-icon-chip ss-icon-float absolute left-8 top-2 z-10 flex h-11 w-11 -translate-x-1/2 items-center justify-center rounded-full bg-[color:var(--brand)] text-white shadow-lg ring-8 ring-white md:left-1/2">
                    <s.icon className="h-5 w-5" />
                  </span>

                  {/* left card */}
                  <div
                    className={`pl-20 md:pl-0 ${
                      isLeft ? "md:pr-16 md:text-right" : "md:order-2 md:pl-16 md:text-left"
                    }`}
                  >
                    <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                      0{i + 1}
                    </div>
                    <h3 className="mt-2 text-2xl font-bold">{s.title}</h3>
                    <p
                      className={`mt-2 text-sm leading-relaxed text-muted-foreground ${
                        isLeft ? "md:ml-auto" : ""
                      } max-w-sm`}
                    >
                      {s.desc}
                    </p>
                  </div>

                  {/* empty opposite side to hold the grid */}
                  <div className={isLeft ? "hidden md:block" : "hidden md:block md:order-1"} />
                </li>
              );
            })}
          </ol>

          {/* Logo watermark at bottom with CTA */}
          <div className="mt-16 flex flex-col items-center gap-6">
            <div className="flex justify-center">
              <a
                href="#download"
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--brand)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[color:var(--brand)]/90 shadow-lg hover:shadow-xl hover:-translate-y-0.5 duration-200"
              >
                Download the App <span aria-hidden>↗</span>
              </a>
            </div>
            
            {/* Branded footer in section with MORE VISIBLE logo */}
            <div className="flex items-center gap-3 opacity-90 hover:opacity-100 transition-opacity">
              <img
                src={logoWhite}
                alt="Sweet Shuttle"
                className="h-10 w-auto sm:h-12"
              />
              <span className="text-sm font-semibold text-muted-foreground">Making every journey sweet</span>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 4 — SAFETY (reimagined: layered safeguards) */}
      <section
        id="safety"
        className="relative overflow-hidden bg-secondary/60 py-16 sm:py-24 md:py-32"
      >
        {/* soft radial backdrop */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              "radial-gradient(60% 40% at 50% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 70%)",
          }}
        />

        <div className="relative mx-auto max-w-6xl px-5 sm:px-6">
          {/* Centered header */}
          <div className="mx-auto max-w-3xl text-center">
            <div className="flex justify-center">
              <Tag>Safety First</Tag>
            </div>
            <h2 className="mt-6 text-4xl font-black leading-[1] tracking-tight sm:text-5xl md:text-7xl">
              Your safety <span className="italic text-[color:var(--brand)]">matters.</span>
            </h2>
          </div>

          <div className="mx-auto mt-16 grid max-w-4xl grid-cols-1 gap-4 md:grid-cols-2">
            <div className="ss-card ss-reveal rounded-[1.5rem] border border-black/5 bg-white p-8 shadow-[0_20px_60px_-30px_rgba(0,168,107,0.35)] transition duration-500 hover:-translate-y-1.5">
              <span className="ss-icon-chip ss-icon-float flex h-11 w-11 items-center justify-center rounded-full bg-[color:var(--brand)]/10 text-[color:var(--brand)]">
                <HeroShield className="h-5 w-5" strokeWidth={1.75} />
              </span>
              <p className="mt-6 text-lg font-semibold leading-snug text-foreground">
                Every driver goes through our verification process, and every trip is supported by
                technology designed to improve safety, accountability and customer confidence.
              </p>
              <div className="ss-underline mt-6 h-px w-10 bg-[color:var(--brand)]" />
            </div>
            <div
              className="ss-card ss-reveal rounded-[1.5rem] border border-black/5 bg-white p-8 shadow-[0_20px_60px_-30px_rgba(0,168,107,0.35)] transition duration-500 hover:-translate-y-1.5 md:mt-10"
              style={{ animationDelay: "120ms" }}
            >
              <span className="ss-icon-chip ss-icon-float flex h-11 w-11 items-center justify-center rounded-full bg-[color:var(--brand)]/10 text-[color:var(--brand)]">
                <HeroUsers className="h-5 w-5" strokeWidth={1.75} />
              </span>
              <p className="mt-6 text-lg font-semibold leading-snug text-foreground">
                Whether you are riding or driving, we are committed to building a transportation
                platform you can trust.
              </p>
              <div className="ss-underline mt-6 h-px w-10 bg-[color:var(--brand)]" />
            </div>
          </div>

          <div className="mt-12 text-center">
            <a
              href="#"
              className="inline-flex items-center gap-2 rounded-full bg-[color:var(--brand)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[color:var(--brand)]/90"
            >
              Learn More <span aria-hidden>↗</span>
            </a>
          </div>
        </div>
      </section>

      {/* SECTION 5 — BUSINESS & CORPORATE TRANSPORT */}
      <section id="business" className="border-t border-black/5 py-16 sm:py-24 md:py-32">
        <div className="mx-auto max-w-7xl px-5 sm:px-6">
          <div className="mx-auto max-w-3xl text-center">
            <div className="flex justify-center">
              <Tag>For Business</Tag>
            </div>
            <h2 className="mt-6 text-4xl font-black leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
              Business and Corporate{" "}
              <span className="italic text-[color:var(--brand)]">Transport.</span>
            </h2>
            <p className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-muted-foreground">
              Reliable transportation for businesses, hotels, airports, schools and organisations.
            </p>
            <div className="mt-8 text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
              Our services include
            </div>
          </div>

          <div className="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {[
              { icon: UserGroupIcon, title: "Staff Transportation" },
              { icon: BriefcaseIcon, title: "Executive Mobility" },
              { icon: PaperAirplaneIcon, title: "Airport Transfers" },
              { icon: BuildingOffice2Icon, title: "Corporate Accounts" },
              { icon: TruckIcon, title: "Fleet Management" },
              { icon: CalendarDaysIcon, title: "Event Transportation" },
            ].map((s, i) => (
              <div
                key={s.title}
                className="ss-card ss-reveal group relative flex flex-col rounded-[1.5rem] border border-black/5 bg-white p-6 shadow-[0_20px_60px_-30px_rgba(0,168,107,0.35)] transition duration-500 hover:-translate-y-1.5 hover:shadow-[0_30px_80px_-30px_rgba(0,168,107,0.5)]"
                style={{ animationDelay: `${i * 60}ms` }}
              >
                <div className="flex items-center justify-between">
                  <span className="ss-numeral text-5xl font-black leading-none tracking-tight">
                    0{i + 1}
                  </span>
                  <span className="ss-icon-chip ss-icon-float flex h-11 w-11 items-center justify-center rounded-full bg-[color:var(--brand)]/10 text-[color:var(--brand)]">
                    <s.icon className="h-5 w-5" strokeWidth={1.75} />
                  </span>
                </div>
                <h3 className="mt-6 text-lg font-bold">{s.title}</h3>
                <div className="ss-underline mt-6 h-px w-10 bg-[color:var(--brand)]" />
              </div>
            ))}
          </div>

          <div className="mt-12 flex justify-center">
            <a
              href="#"
              className="inline-flex items-center gap-2 rounded-full bg-[color:var(--brand)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[color:var(--brand)]/90"
            >
              Request a Corporate Account <ArrowUpRight className="h-4 w-4" />
            </a>
          </div>
        </div>
      </section>

      {/* SECTION 6 — WHY WE STARTED SWEET SHUTTLE */}
      <section
        id="story"
        className="relative overflow-hidden border-t border-black/5 bg-secondary/60 py-16 sm:py-24 md:py-32"
      >
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              "radial-gradient(50% 40% at 15% 0%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 70%)",
          }}
        />
        <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-12 px-5 sm:gap-16 sm:px-6 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <Tag>Our story</Tag>
            <h2 className="mt-6 text-4xl font-black leading-[1.02] tracking-tight sm:text-5xl md:text-6xl">
              Why we started{" "}
              <span className="italic text-[color:var(--brand)]">Sweet Shuttle.</span>
            </h2>
            <p className="mt-8 text-lg leading-relaxed text-foreground/80">
              Nigeria's transportation system works hard but it doesn't always work well.
            </p>
            <div className="mt-10">
              <a
                href="#"
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--brand)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[color:var(--brand)]/90"
              >
                Download the App <span aria-hidden>↗</span>
              </a>
            </div>
          </div>

          <div className="lg:col-span-7">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="rounded-[1.5rem] border border-black/5 bg-white p-8 shadow-[0_20px_60px_-40px_rgba(0,168,107,0.35)]">
                <p className="text-lg font-semibold leading-snug text-foreground">
                  Riders struggle with cancellations, long wait times and inconsistent pricing.
                </p>
              </div>
              <div className="rounded-[1.5rem] border border-black/5 bg-white p-8 shadow-[0_20px_60px_-40px_rgba(0,168,107,0.35)] md:mt-10">
                <p className="text-lg font-semibold leading-snug text-foreground">
                  Drivers struggle with rising operating costs and shrinking earnings.
                </p>
              </div>
            </div>

            <div className="mt-6 overflow-hidden rounded-[1.5rem] bg-neutral-950 p-8 text-white md:p-10">
              <p className="text-2xl font-semibold leading-snug md:text-3xl">
                We believe transportation works better when riders and drivers{" "}
                <span className="italic text-[color:var(--brand)]">both win.</span>
              </p>
              <p className="mt-4 text-sm text-white/70">That is why we built Sweet Shuttle.</p>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 7 — READY TO MOVE SMARTER (final CTA, dark glow + phone) */}
      <section
        id="download"
        className="relative overflow-hidden bg-neutral-950 py-20 text-white sm:py-28 md:py-36"
        style={{ ["--brand" as string]: BRAND }}
      >
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              "radial-gradient(60% 55% at 20% 90%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%), radial-gradient(45% 40% at 90% 10%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%)",
          }}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-[0.08]"
          style={{
            backgroundImage:
              "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
            backgroundSize: "56px 56px",
            maskImage: "radial-gradient(70% 60% at 50% 50%, black, transparent 80%)",
          }}
        />

        <div className="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-5 sm:gap-16 sm:px-6 lg:grid-cols-12">
          <div className="lg:col-span-7">
            <Tag>Ready to move smarter?</Tag>
            <h2 className="mt-6 text-[2.75rem] font-black leading-[0.98] tracking-tight sm:text-6xl md:text-7xl lg:text-[5.5rem]">
              Ready to Move <span className="italic text-[color:var(--brand)]">Smarter?</span>
            </h2>
            <p className="mt-8 max-w-xl text-lg leading-relaxed text-white/70">
              Whether you are looking for your next ride, your next income opportunity or reliable
              transportation for your business, Sweet Shuttle is built for you.
            </p>

            <div className="mt-10 flex flex-wrap gap-3">
              <a
                href="#"
                className="group inline-flex items-center gap-3 rounded-full bg-white px-6 py-4 text-sm font-semibold text-neutral-950 transition hover:bg-white/90"
              >
                <Play className="h-5 w-5 fill-current" />
                <span className="flex flex-col items-start leading-tight">
                  <span className="text-[10px] font-semibold uppercase tracking-[0.22em] text-neutral-500">
                    Download on
                  </span>
                  <span className="text-base font-bold">Android</span>
                </span>
              </a>
              <a
                href="#"
                className="group inline-flex items-center gap-3 rounded-full bg-white px-6 py-4 text-sm font-semibold text-neutral-950 transition hover:bg-white/90"
              >
                <Apple className="h-5 w-5" />
                <span className="flex flex-col items-start leading-tight">
                  <span className="text-[10px] font-semibold uppercase tracking-[0.22em] text-neutral-500">
                    Download on
                  </span>
                  <span className="text-base font-bold">iPhone</span>
                </span>
              </a>
              <a
                href="#"
                className="inline-flex items-center gap-2 rounded-full border border-white/25 px-6 py-4 text-sm font-semibold transition hover:bg-white/10"
              >
                Become a Driver <ArrowUpRight className="h-4 w-4" />
              </a>
            </div>
          </div>

          {/* Phone mock */}
          <div className="lg:col-span-5">
            <div className="relative mx-auto w-full max-w-[320px]">
              <div className="absolute -inset-8 rounded-[3rem] bg-[color:var(--brand)]/25 blur-3xl" />
              <div className="relative rounded-[2.5rem] border border-white/10 bg-neutral-900 p-3 shadow-[0_40px_120px_-20px_rgba(0,168,107,0.45)]">
                <div className="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-[color:var(--brand)] via-[color:var(--brand)]/80 to-neutral-950 p-6 aspect-[9/19]">
                  <div className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-[0.2em] text-white/80">
                    <span>9:41</span>
                    <span className="flex items-center gap-1.5">
                      <span className="h-1.5 w-1.5 rounded-full bg-white" />
                      Live
                    </span>
                  </div>
                  <svg
                    viewBox="0 0 200 320"
                    className="absolute inset-0 h-full w-full opacity-70"
                    fill="none"
                  >
                    <path
                      d="M20 280 C 60 220, 120 260, 140 180 S 180 60, 190 30"
                      stroke="white"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeDasharray="4 6"
                    />
                  </svg>
                  <div className="absolute bottom-6 left-6 right-6 rounded-2xl bg-white/95 p-4 text-neutral-900 backdrop-blur">
                    <div className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-[0.22em] text-neutral-500">
                      <span>Your ride</span>
                      <span>ETA · 3 min</span>
                    </div>
                    <div className="mt-2 text-lg font-bold">Chidi · Corolla</div>
                    <div className="mt-1 text-xs text-neutral-500">LAG 248 · ★ 4.9</div>
                    <div className="mt-3 flex items-center justify-between border-t border-black/5 pt-3">
                      <span className="text-xs text-neutral-500">Fixed fare</span>
                      <span className="text-base font-bold">₦3,200</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter />
    </main>
  );
}