import Image from "next/image";
import { Bell, Bot, CheckCircle2, Gavel, LineChart, MapPin, Truck } from "lucide-react";
import { APP_DOWNLOAD_LINKS } from "@/lib/constants";
import Reveal from "./Reveal";

const FEATURES = [
  { icon: LineChart, title: "Live mandi rates", text: "Daily prices and alerts for the markets you trade in" },
  { icon: Gavel, title: "Post requirements", text: "Get competing offers from verified sellers in minutes" },
  { icon: Truck, title: "Track every order", text: "Vehicle, driver and delivery status on the go" },
  { icon: Bot, title: "Biznie AI assistant", text: "Ask about orders & enquiries in Hindi, English and more" },
];

function GooglePlayIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-7 w-7" aria-hidden>
      <path fill="#34A853" d="M3.6 1.8 13.5 12l-9.9 10.2c-.4-.2-.6-.7-.6-1.2V3c0-.5.2-1 .6-1.2Z" />
      <path fill="#FBBC04" d="m16.8 15.3-3.3-3.3 3.3-3.3 3.8 2.2c1 .6 1 1.6 0 2.2l-3.8 2.2Z" />
      <path fill="#EA4335" d="M16.8 15.3 13.5 12l-9.9 10.2c.4.2.9.2 1.4-.1l11.8-6.8Z" />
      <path fill="#4285F4" d="M16.8 8.7 5 1.9c-.5-.3-1-.3-1.4-.1L13.5 12l3.3-3.3Z" />
    </svg>
  );
}

function AppleIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-7 w-7" fill="currentColor" aria-hidden>
      <path d="M16.37 1.43c0 1.14-.49 2.27-1.18 3.08-.74.9-1.99 1.57-2.99 1.57-.12 0-.23-.02-.3-.03-.01-.06-.04-.22-.04-.39 0-1.15.57-2.27 1.21-2.98.8-.94 2.14-1.64 3.25-1.68.03.13.05.28.05.43Zm4.56 15.71c-.03.07-.46 1.58-1.52 3.12-.94 1.34-1.94 2.71-3.43 2.71-1.52 0-1.9-.88-3.63-.88-1.7 0-2.3.91-3.67.91-1.38 0-2.33-1.26-3.43-2.8C4 18.38 2.96 15.57 2.96 12.92c0-4.28 2.8-6.55 5.55-6.55 1.45 0 2.68.95 3.6.95.87 0 2.22-1.01 3.9-1.01.62 0 2.89.06 4.38 2.19-.13.09-2.38 1.37-2.38 4.19 0 3.26 2.85 4.42 2.95 4.45Z" />
    </svg>
  );
}

function StoreButton({ href, icon, small, big }: { href: string | null; icon: React.ReactNode; small: string; big: string }) {
  // Not listed yet: a muted "Coming soon" badge, never a link that pretends
  // to be a download (B04).
  if (!href) {
    return (
      <span
        aria-disabled
        className="inline-flex h-14 min-w-[172px] cursor-default items-center gap-3 rounded-2xl bg-slate-950/60 px-4 text-white/80 ring-1 ring-white/10"
      >
        {icon}
        <span className="flex flex-col leading-none">
          <span className="text-[10px] font-medium uppercase tracking-wide text-white/60">Coming soon on</span>
          <span className="mt-1 text-lg font-bold tracking-tight">{big}</span>
        </span>
      </span>
    );
  }
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex h-14 min-w-[172px] items-center gap-3 rounded-2xl bg-slate-950 px-4 text-white shadow-lg ring-1 ring-white/10 transition-all hover:-translate-y-0.5 hover:bg-black hover:shadow-xl"
    >
      {icon}
      <span className="flex flex-col leading-none">
        <span className="text-[10px] font-medium uppercase tracking-wide text-white/70">{small}</span>
        <span className="mt-1 text-lg font-bold tracking-tight">{big}</span>
      </span>
    </a>
  );
}

/** A phone outline with an app screen inside (pure markup, no screenshots). */
function Phone({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div
      className={`relative w-[230px] rounded-[2.4rem] bg-slate-950 p-2.5 shadow-[0_40px_80px_rgba(0,0,0,0.45)] ring-1 ring-white/10 sm:w-[250px] ${className ?? ""}`}
    >
      <div className="absolute left-1/2 top-3.5 z-10 h-5 w-20 -translate-x-1/2 rounded-full bg-slate-950" />
      <div className="relative h-[470px] overflow-hidden rounded-[1.9rem] bg-slate-50 sm:h-[500px]">{children}</div>
    </div>
  );
}

function TrackingScreen() {
  const steps = ["Confirmed", "Loading", "Dispatched", "Delivered"];
  return (
    <div className="flex h-full flex-col text-[11px] text-slate-600">
      <div className="bg-[#CC1414] px-4 pb-4 pt-9 text-white">
        <div className="flex items-center justify-between">
          <Image src="/logo-white.png" alt="Biznie" width={76} height={22} className="h-5 w-auto" />
          <Bell size={15} aria-hidden />
        </div>
        <p className="mt-4 text-[10px] text-white/75">Good morning</p>
        <p className="text-sm font-bold">Your orders at a glance</p>
      </div>
      <div className="-mt-3 space-y-2.5 px-3">
        <div className="rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-100">
          <div className="flex items-center justify-between">
            <span className="font-bold text-slate-900">MS TMT · 25 MT</span>
            <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[9px] font-bold text-blue-600">Dispatched</span>
          </div>
          <ol className="mt-3 flex items-center">
            {steps.map((s, i) => (
              <li key={s} className="flex flex-1 items-center">
                <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${i < 3 ? "bg-[#CC1414]" : "bg-slate-200"}`} />
                {i < steps.length - 1 ? <span className={`h-0.5 flex-1 ${i < 2 ? "bg-[#CC1414]" : "bg-slate-200"}`} /> : null}
              </li>
            ))}
          </ol>
          <div className="mt-2 flex justify-between text-[8px] text-slate-400">
            {steps.map((s) => (
              <span key={s}>{s}</span>
            ))}
          </div>
          <div className="mt-3 flex items-center gap-2 rounded-xl bg-slate-50 p-2">
            <Truck size={14} className="text-[#CC1414]" aria-hidden />
            <span className="flex-1 font-semibold text-slate-800">MH 12 AB 4821</span>
            <MapPin size={12} aria-hidden /> Pune
          </div>
        </div>
        <div className="rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-100">
          <div className="flex items-center justify-between">
            <span className="font-bold text-slate-900">MS Angle enquiry</span>
            <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-[9px] font-bold text-emerald-600">3 offers</span>
          </div>
          <p className="mt-1 text-[10px] text-slate-400">Live bidding · ends in 08:42</p>
          <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
            <div className="h-full w-2/3 rounded-full bg-emerald-500" />
          </div>
        </div>
        <div className="grid grid-cols-2 gap-2.5">
          {[
            ["Credit", "Available"],
            ["Wallet", "Active"],
          ].map(([k, v]) => (
            <div key={k} className="rounded-2xl bg-white p-3 shadow-sm ring-1 ring-slate-100">
              <p className="text-[9px] uppercase tracking-wide text-slate-400">{k}</p>
              <p className="mt-0.5 flex items-center gap-1 font-bold text-slate-900">
                <CheckCircle2 size={11} className="text-emerald-500" aria-hidden /> {v}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ChatScreen() {
  return (
    <div className="flex h-full flex-col text-[11px]">
      <div className="flex items-center gap-2 bg-gradient-to-r from-[#CC1414] to-[#A50E0E] px-4 pb-3 pt-9 text-white">
        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-white">
          <Image src="/favicon.png" alt="" width={16} height={16} className="h-4 w-4 rounded-full" />
        </span>
        <div>
          <p className="text-xs font-bold">Biznie AI</p>
          <p className="text-[9px] text-white/75">हमेशा online</p>
        </div>
      </div>
      <div className="flex-1 space-y-2.5 bg-red-50/40 p-3">
        <p className="ml-auto w-fit max-w-[80%] rounded-2xl rounded-tr-sm bg-[#CC1414] px-3 py-2 text-white">मेरा order कहाँ है?</p>
        <p className="w-fit max-w-[85%] rounded-2xl rounded-tl-sm bg-white px-3 py-2 text-slate-700 shadow-sm">
          आपका order dispatch हो चुका है। Vehicle MH 12 AB 4821, कल तक delivery।
        </p>
        <p className="ml-auto w-fit max-w-[80%] rounded-2xl rounded-tr-sm bg-[#CC1414] px-3 py-2 text-white">नई enquiry बनानी है</p>
        <div className="w-[88%] rounded-2xl rounded-tl-sm bg-white p-2.5 shadow-sm">
          <p className="font-semibold text-slate-800">Enquiry form</p>
          <div className="mt-2 space-y-1.5">
            {["Product: MS TMT", "Quantity: 20 MT", "City: Pune"].map((f) => (
              <p key={f} className="rounded-lg border border-slate-100 px-2 py-1 text-[10px] text-slate-500">
                {f}
              </p>
            ))}
          </div>
          <p className="mt-2 rounded-lg bg-[#CC1414] py-1.5 text-center text-[10px] font-bold text-white">Submit enquiry</p>
        </div>
      </div>
    </div>
  );
}

/** "Get the app" — features, store buttons and two phone mockups. */
export default function AppDownloadSection() {
  return (
    <section className="bg-white py-16 sm:py-20" aria-labelledby="app-download-title">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-[#CC1414] via-[#b01010] to-[#6d0a0a] px-6 py-12 text-white shadow-[0_30px_80px_rgba(204,20,20,0.25)] sm:px-10 lg:px-14 lg:py-14">
          <div aria-hidden className="pointer-events-none absolute -right-24 -top-24 h-80 w-80 rounded-full bg-white/10 blur-3xl" />
          <div aria-hidden className="pointer-events-none absolute -bottom-32 left-1/3 h-80 w-80 rounded-full bg-black/20 blur-3xl" />
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(white_1px,transparent_1px)] [background-size:22px_22px]"
          />

          <div className="relative grid items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
            <Reveal>
              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold backdrop-blur">
                <span className="h-1.5 w-1.5 rounded-full bg-white" /> Biznie mobile app
              </span>
              <h2 id="app-download-title" className="mt-4 text-3xl font-black leading-tight tracking-tight sm:text-4xl lg:text-5xl">
                Your business,
                <br />
                in your pocket.
              </h2>
              <p className="mt-4 max-w-lg text-base text-white/80 sm:text-lg">
                Buy, sell and track goods from anywhere. Get quotes, follow your trucks and talk to Biznie AI — right from
                your phone.
              </p>

              <ul className="mt-8 grid gap-4 sm:grid-cols-2">
                {FEATURES.map(({ icon: Icon, title, text }) => (
                  <li key={title} className="flex items-start gap-3">
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/15 backdrop-blur">
                      <Icon size={19} aria-hidden />
                    </span>
                    <span>
                      <span className="block text-sm font-bold">{title}</span>
                      <span className="mt-0.5 block text-[13px] leading-snug text-white/70">{text}</span>
                    </span>
                  </li>
                ))}
              </ul>

              <div className="mt-9 flex flex-wrap gap-3">
                <StoreButton href={APP_DOWNLOAD_LINKS.playStore} icon={<GooglePlayIcon />} small="Get it on" big="Google Play" />
                <StoreButton href={APP_DOWNLOAD_LINKS.appStore} icon={<AppleIcon />} small="Download on the" big="App Store" />
              </div>
            </Reveal>

            <Reveal delay={150} className="relative mx-auto flex h-[520px] w-full max-w-[520px] items-center justify-center sm:h-[560px]">
              <Phone className="absolute left-0 top-6 hidden -rotate-6 sm:block">
                <ChatScreen />
              </Phone>
              <Phone className="relative z-10 sm:absolute sm:right-0 sm:top-0 sm:rotate-3">
                <TrackingScreen />
              </Phone>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}