import { Bell, Calendar, CreditCard, Play, Users } from "lucide-react";
import { cn } from "@/lib/utils";

const stores = [
  { small: "Download on the", label: "App Store", href: "https://apps.apple.com/app/your-app-id", icon: "a" },
  { small: "Get it on", label: "Google Play", href: "https://play.google.com/store/apps/details?id=your.app", icon: "play" },
] as const;
const appointments = [
  { time: "9:00", name: "Riya Kapoor", service: "Haircut · 45 min" },
  { time: "10:30", name: "Anaya Shah", service: "Colour · 90 min", now: true },
  { time: "12:30", name: "Dev Malhotra", service: "Beard trim · 20 min" },
  { time: "14:00", name: "Meera Iyer", service: "Haircut · 45 min" },
];

export function HeroAppDownload() {
  return (
    <section aria-labelledby="hero-title" className="overflow-hidden bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-10 px-4 py-12 sm:px-6 sm:py-16 lg:grid-cols-[1fr_1.1fr]">
        <div className="flex flex-col items-start gap-5">
          <p className="text-[13px] font-medium text-primary">The Slotwise app</p>
          <h1 id="hero-title" className="text-balance text-4xl font-semibold leading-[1.04] tracking-tight text-fg sm:text-5xl lg:text-6xl">
            Your whole booking book, in your pocket.
          </h1>
          <p className="max-w-lg text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            See today’s clients, move an appointment with one drag and get a nudge when someone books — from anywhere.
          </p>
          {/* Swap these for the official store badges before you ship. */}
          <div className="flex flex-wrap gap-2.5">
            {stores.map((s) => (
              <a key={s.label} href={s.href} className="inline-flex h-[52px] items-center gap-2.5 rounded-lg border border-neutral-50/15 bg-neutral-950 pl-3.5 pr-[18px] text-neutral-50 transition hover:bg-neutral-800">
                {s.icon === "play" ? (
                  <Play className="size-5" aria-hidden />
                ) : (
                  <svg viewBox="0 0 24 24" className="size-6" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden><path d="M9.5 4 4 18M14.5 4 20 18M6 13h12" /></svg>
                )}
                <span className="text-left">
                  <span className="block text-[10.5px] leading-tight opacity-80">{s.small}</span>
                  <span className="block text-base font-semibold leading-tight">{s.label}</span>
                </span>
              </a>
            ))}
          </div>
          <p className="text-[13px] text-fg-subtle">Free with every Slotwise plan · iPhone and Android</p>
        </div>

        {/* Phone picture: plain elements, follows the theme */}
        <div aria-hidden className="relative grid place-items-center py-3 lg:min-h-[480px]">
          <div className="absolute aspect-square w-[78%] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_26%,transparent),color-mix(in_srgb,var(--tst-primary)_8%,transparent)_70%,transparent)]" />
          <div className="relative mx-auto h-[500px] w-[248px] rounded-[42px] bg-neutral-900 lg:mr-0 lg:ml-auto p-2.5 shadow-2xl ring-2 ring-inset ring-neutral-700">
            <div className="relative grid h-full grid-rows-[auto_auto_1fr_auto] gap-3 overflow-hidden rounded-[33px] bg-bg px-3.5 pb-3 pt-9 text-[11.5px]">
              <span className="absolute left-1/2 top-2.5 h-5 w-[76px] -translate-x-1/2 rounded-full bg-neutral-900" />
              <div className="flex items-center justify-between">
                <p className="text-[17px] font-semibold tracking-tight text-fg">Today</p>
                <p className="text-fg-subtle">Thu 16 Oct</p>
              </div>
              <div className="flex justify-between text-[11px] text-fg-subtle"><span>5 appointments</span><span>₹4,300</span></div>
              <div className="grid content-start gap-2">
                {appointments.map((a) => (
                  <div key={a.time} className={cn("grid grid-cols-[40px_1fr] items-center gap-2.5 rounded-lg border border-border px-2.5 py-2", a.now && "border-transparent bg-primary text-primary-fg")}>
                    <span className={cn("font-semibold tabular-nums", a.now ? "opacity-85" : "text-fg-muted")}>{a.time}</span>
                    <span className="min-w-0">
                      <span className="block truncate text-xs font-semibold">{a.name}</span>
                      <span className={cn("block truncate", a.now ? "opacity-85" : "text-fg-subtle")}>{a.service}</span>
                    </span>
                  </div>
                ))}
              </div>
              <div className="flex justify-around border-t border-border pt-2.5 text-fg-subtle">
                <Calendar className="size-[18px] text-primary" /><Users className="size-[18px]" /><CreditCard className="size-[18px]" /><Bell className="size-[18px]" />
              </div>
            </div>
          </div>
          <div className="absolute left-0 top-24 hidden items-center gap-2.5 rounded-lg border border-border bg-bg px-3 py-2.5 text-xs shadow-xl lg:flex">
            <span className="grid size-8 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Bell className="size-4" /></span>
            <span>
              <span className="block font-semibold text-fg">New booking</span>
              <span className="block text-fg-subtle">Kabir · Sat 11:00</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}