"use client";
import { useState } from "react";
import { ArrowRight, Calendar, Check, Clock, Hotel, MapPin, Plane } from "lucide-react";
import { cn } from "@/lib/utils";

type Session = { time: string; title: string; speaker?: string; room?: string };

const facts = [{ value: "2", label: "days" }, { value: "36", label: "talks" }, { value: "6", label: "workshops" }, { value: "900", label: "attendees" }];
const partners = ["Lumen Cloud", "Parallel", "Tinkerbox", "Kitepay", "Halcyon Labs", "Orbit HR"];

const speakers = [
  { name: "Ananya Rao", role: "VP Design, Kitepay", talk: "Designing for money anxiety" },
  { name: "Marcus Oyelaran", role: "Staff engineer, Lumen Cloud", talk: "Shipping weekly with forty teams" },
  { name: "Divya Menon", role: "Founder, Sehat Health", talk: "Healthcare UX without the jargon" },
  { name: "Kenji Tanaka", role: "Design director, Orbit HR", talk: "Systems that survive a reorg" },
  { name: "Fatima Sheikh", role: "Head of research, Parallel", talk: "Research in a week" },
  { name: "Rahul Iyer", role: "CPO, Tinkerbox", talk: "Pricing pages that tell the truth" },
  { name: "Sofia Marques", role: "Brand lead, Okra Studio", talk: "Brands at product speed" },
  { name: "Arjun Desai", role: "Engineer and writer", talk: "Accessibility is a feature" },
];

const days: { label: string; date: string; sessions: Session[] }[] = [
  { label: "Day 1", date: "Thursday, 11 February", sessions: [
    { time: "8:30", title: "Registration and South Indian breakfast" },
    { time: "9:30", title: "Opening keynote: Designing for money anxiety", speaker: "Ananya Rao", room: "Main hall" },
    { time: "10:30", title: "Shipping weekly with forty teams", speaker: "Marcus Oyelaran", room: "Main hall" },
    { time: "11:30", title: "Coffee and hallway track" },
    { time: "12:00", title: "Workshop: Research in a week", speaker: "Fatima Sheikh", room: "Studio B" },
    { time: "14:00", title: "Design systems that survive a reorg", speaker: "Kenji Tanaka", room: "Main hall" },
  ] },
  { label: "Day 2", date: "Friday, 12 February", sessions: [
    { time: "9:30", title: "Healthcare UX without the jargon", speaker: "Divya Menon", room: "Main hall" },
    { time: "10:30", title: "Pricing pages that tell the truth", speaker: "Rahul Iyer", room: "Main hall" },
    { time: "11:30", title: "Workshop: Accessibility is a feature", speaker: "Arjun Desai", room: "Studio B" },
    { time: "13:00", title: "Lunch on the lawn" },
    { time: "14:00", title: "Brands at product speed", speaker: "Sofia Marques", room: "Main hall" },
    { time: "17:00", title: "Closing party on the terrace" },
  ] },
];

const tickets = [
  { name: "Early bird", price: "₹6,999", note: "Until 30 September", soldOut: true, features: ["Both days of talks", "Lunch and coffee", "Talk recordings"] },
  { name: "Standard", price: "₹9,499", note: "Until 10 February", featured: true, features: ["Both days of talks", "Lunch and coffee", "One workshop seat", "Talk recordings", "Closing party"] },
  { name: "Team of five", price: "₹39,999", note: "₹8,000 a person", features: ["Five standard passes", "Reserved seating together", "Invoice with your GSTIN"] },
];

const travel = [
  { icon: Plane, title: "From the airport", body: "About 75 minutes by cab. We run a shuttle on both mornings." },
  { icon: Clock, title: "By metro", body: "Purple line to Whitefield, then a six-minute walk." },
  { icon: Hotel, title: "Where to stay", body: "Three hotels nearby hold rooms at 20% off until 15 January." },
];

const faqs = [
  { q: "Can I transfer my ticket?", a: "Yes, free of charge until 1 February." },
  { q: "Will talks be recorded?", a: "Every main-hall talk is recorded and sent to ticket holders within two weeks." },
  { q: "Is there a refund policy?", a: "Full refund until 31 December, 50% until 20 January, then transfers only." },
  { q: "Do you offer travel grants?", a: "Yes. Twenty grants covering ticket and travel. Applications close 15 December." },
];

function Container({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn("mx-auto w-full max-w-6xl px-5 sm:px-8", className)}>{children}</div>;
}

function Heading({ eyebrow, title, center }: { eyebrow: string; title: string; center?: boolean }) {
  return (
    <div className={cn("mb-10 grid max-w-2xl gap-3", center && "mx-auto text-center")}>
      <p className="text-sm font-medium text-primary">{eyebrow}</p>
      <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2>
    </div>
  );
}

function Header() {
  return (
    <header className="bg-fg text-bg">
      <Container className="relative flex h-16 items-center gap-8">
        <a href="/" className="flex items-center gap-2 font-semibold"><span className="size-6 rounded-sm bg-primary" aria-hidden />Fieldwork 27</a>
        <nav aria-label="Main" className="hidden gap-6 text-sm md:flex">
          {["Speakers", "Schedule", "Tickets", "Venue"].map((l) => <a key={l} href={"#" + l.toLowerCase()} className="opacity-70 hover:opacity-100">{l}</a>)}
        </nav>
        <a href="#tickets" className="ml-auto rounded bg-primary px-4 py-2 text-sm font-medium text-primary-fg hover:bg-primary-hover">Get tickets</a>
      </Container>
    </header>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden bg-fg pb-16 text-bg sm:pb-20">
      <span className="absolute -right-10 top-8 size-56 rounded-full bg-gradient-to-br from-brand-200 via-primary to-brand-900 sm:right-[7%] sm:size-[340px]" aria-hidden />
      <Container className="relative">
        <h1 className="pt-12 text-6xl font-bold leading-[.88] tracking-tighter sm:pt-16 sm:text-8xl lg:text-9xl">Fieldwork<span className="block text-primary">2027</span></h1>
        <p className="mt-7 max-w-xl text-lg">Two days on product, design and the craft of shipping.</p>
        <div className="mt-7 flex flex-wrap gap-2 text-sm">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-fg-muted px-3 py-1.5"><Calendar className="size-3.5" />11–12 February 2027</span>
          <span className="inline-flex items-center gap-1.5 rounded-full border border-fg-muted px-3 py-1.5"><MapPin className="size-3.5" />The Foundry, Whitefield, Bengaluru</span>
        </div>
        <a href="#tickets" className="mt-7 inline-flex h-11 items-center gap-2 rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover">Get tickets from ₹9,499 <ArrowRight className="size-4" /></a>
        <dl className="mt-14 flex flex-wrap border-t border-fg-muted">
          {facts.map((f) => <div key={f.label} className="flex flex-col pr-10 pt-5 sm:pr-12"><dt className="text-sm opacity-70">{f.label}</dt><dd className="order-first text-3xl font-semibold tracking-tight">{f.value}</dd></div>)}
        </dl>
      </Container>
    </section>
  );
}

function Partners() {
  return (
    <section aria-label="Partners" className="bg-surface py-11">
      <Container>
        <p className="mb-4 text-sm text-fg-subtle">Made possible by</p>
        <ul className="flex flex-wrap justify-between gap-x-10 gap-y-3 text-lg font-semibold tracking-tight text-fg-subtle">
          {partners.map((p) => <li key={p}>{p}</li>)}
        </ul>
      </Container>
    </section>
  );
}

function Speakers() {
  return (
    <section id="speakers" className="py-20 sm:py-24">
      <Container>
        <Heading eyebrow="Speakers" title="People who ship, talking about how" />
        <div className="grid grid-cols-2 gap-x-3 gap-y-8 sm:gap-x-5 lg:grid-cols-4">
          {speakers.map((s) => (
            <article key={s.name}>
              <div className="flex aspect-square items-end rounded-lg bg-gradient-to-br from-brand-400 to-brand-900 p-4 text-3xl font-bold text-neutral-50 sm:text-4xl" aria-hidden>
                {s.name.split(" ").map((w) => w[0]).join("")}
              </div>
              <h3 className="mt-3.5 font-semibold">{s.name}</h3>
              <p className="text-sm text-fg-muted">{s.role}</p>
              <p className="mt-1.5 text-sm font-medium text-primary">{s.talk}</p>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Schedule() {
  const [day, setDay] = useState(0);
  return (
    <section id="schedule" className="bg-surface py-20 sm:py-24">
      <Container>
        <Heading eyebrow="Schedule" title="Two days, one track, plenty of breaks" />
        <div role="tablist" aria-label="Conference day" className="mb-7 flex gap-3">
          {days.map((d, i) => (
            <button key={d.label} type="button" role="tab" id={"tab-" + i} aria-controls={"panel-" + i} aria-selected={day === i} onClick={() => setDay(i)}
              className="grid flex-1 rounded-lg border border-border bg-bg px-5 py-3.5 text-left sm:flex-none sm:min-w-52 aria-selected:border-fg aria-selected:bg-fg aria-selected:text-bg">
              <b className="font-semibold">{d.label}</b><span className="text-sm opacity-70">{d.date}</span>
            </button>
          ))}
        </div>
        <div role="tabpanel" id={"panel-" + day} aria-labelledby={"tab-" + day} className="border-b border-border">
          {days[day].sessions.map((s) => (
            <div key={s.time} className="grid grid-cols-[64px_1fr] items-center gap-x-4 gap-y-1.5 border-t border-border py-5 sm:grid-cols-[110px_1fr_150px] sm:gap-6">
              <time className="font-medium tabular-nums">{s.time}</time>
              <div>
                <h3 className={cn(s.speaker ? "font-semibold" : "text-fg-muted")}>{s.title}</h3>
                {s.speaker && <p className="mt-1 text-sm text-fg-muted">{s.speaker}</p>}
              </div>
              {s.room && <span className="col-start-2 inline-flex w-fit items-center gap-1.5 rounded-full border border-border px-3 py-1 text-sm text-fg-muted sm:col-start-auto sm:justify-self-end"><MapPin className="size-3.5" />{s.room}</span>}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Tickets() {
  return (
    <section id="tickets" className="bg-surface pb-20 sm:pb-24">
      <Container>
        <Heading center eyebrow="Tickets" title="Pick your pass" />
        <div className="mx-auto grid max-w-md gap-4 lg:max-w-none lg:grid-cols-3">
          {tickets.map((t) => (
            <article key={t.name} className={cn("grid grid-rows-[auto_auto_1fr_auto] gap-5 rounded-xl border p-7", t.featured ? "border-fg bg-fg text-bg" : "border-border bg-bg", t.soldOut && "opacity-60")}>
              <div className="flex items-center justify-between">
                <h3 className="font-semibold">{t.name}</h3>
                {t.soldOut && <span className="rounded-full bg-surface-2 px-2 py-0.5 text-xs text-fg-muted">Sold out</span>}
              </div>
              <div><p className="text-4xl font-semibold tracking-tight tabular-nums">{t.price}</p><p className="mt-2 text-sm opacity-70">{t.note}</p></div>
              <ul className="grid content-start gap-2.5 border-t border-dashed border-border-strong pt-5 text-sm">
                {t.features.map((f) => <li key={f} className="flex gap-2.5"><Check className="mt-0.5 size-4 shrink-0" />{f}</li>)}
              </ul>
              <button type="button" disabled={t.soldOut} className={cn("h-11 rounded font-medium disabled:cursor-not-allowed", t.featured ? "bg-primary text-primary-fg hover:bg-primary-hover" : "border border-border-strong hover:bg-surface")}>
                {t.soldOut ? "Sold out" : "Buy " + t.name.toLowerCase()}
              </button>
            </article>
          ))}
        </div>
        <p className="mt-5 text-center text-sm text-fg-subtle">Prices include GST. Students get 50% off with a valid ID.</p>
      </Container>
    </section>
  );
}

function Venue() {
  return (
    <section id="venue" className="py-20 sm:py-24">
      <Container className="grid gap-10 lg:grid-cols-2">
        <div role="img" aria-label="The Foundry main hall" className="min-h-60 rounded-lg bg-gradient-to-br from-neutral-700 to-neutral-950 lg:min-h-[420px]" />
        <div>
          <Heading eyebrow="Venue" title="A restored 1960s machine shop in Whitefield" />
          <p className="-mt-6 mb-8 text-fg-muted">The Foundry, 22 ITPL Main Road, Whitefield, Bengaluru 560066. Step-free throughout.</p>
          <ul className="grid gap-5">
            {travel.map(({ icon: Icon, title, body }) => (
              <li key={title} className="flex gap-3.5">
                <span className="grid size-10 shrink-0 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Icon className="size-5" /></span>
                <div><h3 className="font-semibold">{title}</h3><p className="text-sm text-fg-muted">{body}</p></div>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  );
}

function Faq() {
  return (
    <section className="bg-surface py-20 sm:py-24">
      <Container className="grid gap-10 lg:grid-cols-[2fr_3fr] lg:gap-16">
        <Heading eyebrow="FAQ" title="Before you book" />
        <div className="border-t border-border">
          {faqs.map((f, i) => (
            <details key={f.q} open={i === 0} className="border-b border-border">
              <summary className="cursor-pointer list-none py-4 font-medium">{f.q}</summary>
              <p className="pb-5 text-sm text-fg-muted">{f.a}</p>
            </details>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Cta() {
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <div className="flex flex-wrap items-center justify-between gap-6 rounded-xl bg-primary p-6 text-primary-fg sm:p-14">
          <div>
            <h2 className="max-w-[18ch] text-3xl font-bold tracking-tight sm:text-4xl">Seats are limited to 900. Last year sold out in six weeks.</h2>
            <p className="mt-2">Standard passes until 10 February, or until they run out.</p>
          </div>
          <a href="#tickets" className="inline-flex h-11 items-center gap-2 rounded bg-bg px-5 font-medium text-fg">Get tickets <ArrowRight className="size-4" /></a>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border py-10">
      <Container className="flex flex-wrap justify-between gap-4 text-sm text-fg-muted">
        <span className="font-semibold text-fg">Fieldwork 27</span>
        <nav aria-label="Footer" className="flex flex-wrap gap-6">{["Code of conduct", "Accessibility", "Sponsor", "Contact"].map((l) => <a key={l} href="#" className="hover:text-fg">{l}</a>)}</nav>
        <span>© 2026 Fieldwork Events LLP</span>
      </Container>
    </footer>
  );
}

export default function Page() {
  return (
    <div className="bg-bg font-sans text-fg">
      <Header />
      <main>
        <Hero />
        <Partners />
        <Speakers />
        <Schedule />
        <Tickets />
        <Venue />
        <Faq />
        <Cta />
      </main>
      <Footer />
    </div>
  );
}