import { ArrowRight, Clock, Menu, Play } from "lucide-react";
import { cn } from "@/lib/utils";

const work = [
  { name: "Tanka Coffee", tags: ["Identity", "Packaging"], year: "2026", result: "+38% wholesale enquiries in six months" },
  { name: "Vidya Learning", tags: ["Website", "Product"], year: "2025", result: "2.1× more trial sign-ups" },
  { name: "Sutra Hotels", tags: ["Brand", "Booking site"], year: "2025", result: "31% more bookings made direct" },
  { name: "Pebble Bank", tags: ["App design", "Motion"], year: "2024", result: "Launched to 80,000 people" },
];

const services = ["Brand strategy", "Identity", "Websites", "Packaging", "Product design", "Motion"];

const stats = [
  { value: "11", label: "years of independent work" },
  { value: "140+", label: "brands and sites launched" },
  { value: "14", label: "designers, writers and developers" },
  { value: "9 in 10", label: "clients come back for more" },
];

const process = [
  { title: "Discover", body: "Interviews with your team and customers, an audit of what exists, one workshop.", time: "2 weeks" },
  { title: "Define", body: "Positioning, naming if needed, and the one idea everything else hangs on.", time: "1–2 weeks" },
  { title: "Design", body: "Identity, website and the system that keeps them consistent.", time: "4–8 weeks" },
  { title: "Deliver", body: "Build, launch and a handover your team can actually use.", time: "2–4 weeks" },
];

const budgets = ["Under ₹5L", "₹5–15L", "₹15–40L", "₹40L+"];

function Label({ children }: { children: React.ReactNode }) {
  return <p className="mb-2 text-xs font-medium uppercase tracking-widest text-fg-subtle">{children}</p>;
}

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 Header() {
  return (
    <header className="border-b border-border">
      <Container className="flex h-16 items-center gap-8">
        <a href="/" className="text-lg font-semibold tracking-tighter">okra<span className="text-primary">/</span>studio</a>
        <nav aria-label="Main" className="ml-auto hidden gap-6 text-sm text-fg-muted md:flex">
          {["Work", "Services", "Studio", "Journal"].map((l) => <a key={l} href="#" className="hover:text-fg">{l}</a>)}
        </nav>
        <a href="#" className="hidden items-center gap-1.5 rounded border border-border-strong px-3.5 py-2 text-sm font-medium hover:bg-surface md:inline-flex">Start a project <ArrowRight className="size-4" /></a>
        <button type="button" aria-label="Open menu" className="ml-auto rounded p-2 hover:bg-surface-2 md:hidden"><Menu className="size-5" /></button>
      </Container>
    </header>
  );
}

function Hero() {
  return (
    <section className="pt-12 sm:pt-20">
      <Container>
        <h1 className="text-balance text-5xl font-medium leading-[.95] tracking-tighter sm:text-7xl lg:text-8xl">
          Brands people <span className="text-primary">remember.</span> Websites people <span className="text-primary">use.</span>
        </h1>
        <div className="mt-12 grid gap-6 border-t border-fg pb-10 pt-5 md:grid-cols-[1.5fr_1fr_1fr] md:gap-8">
          <div><Label>Studio</Label><p>An independent brand and web studio of 14 people, from first name to first thousand customers.</p></div>
          <div><Label>Based in</Label><p>Bengaluru and Lisbon, working everywhere</p></div>
          <div><Label>Availability</Label><p className="flex items-center gap-2"><span className="size-2 rounded-full bg-success" aria-hidden />Booking from March 2027</p></div>
        </div>
        <a href="#" className="relative flex h-64 items-end rounded-xl bg-gradient-to-br from-brand-500 to-neutral-950 p-6 text-neutral-50 sm:h-[440px]">
          <span className="flex items-center gap-3 font-medium">
            <span className="grid size-12 place-items-center rounded-full bg-neutral-50 text-neutral-950"><Play className="size-4 fill-current" /></span>
            Watch the 2026 showreel · 1:42
          </span>
        </a>
      </Container>
    </section>
  );
}

function ServicesBand() {
  return (
    <section aria-label="Services" className="mt-20 overflow-hidden bg-fg py-6 text-bg">
      <ul className="flex gap-9 whitespace-nowrap px-5 text-2xl font-medium tracking-tight sm:text-4xl">
        {services.map((s) => <li key={s} className="flex items-center gap-9">{s}<span className="text-primary" aria-hidden>✦</span></li>)}
      </ul>
    </section>
  );
}

function Work() {
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
          <div><Label>Selected work, 2024–26</Label><h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Recent launches</h2></div>
          <a href="#" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary">All 38 projects <ArrowRight className="size-4" /></a>
        </div>
        <div className="grid gap-12 md:grid-cols-2 md:gap-x-10 md:gap-y-16">
          {work.map((w, i) => (
            <article key={w.name} className={cn(i % 2 === 1 && "md:mt-24")}>
              <a href="#" aria-label={w.name + " case study"} className="block aspect-[4/3] rounded-lg bg-gradient-to-br from-brand-400 to-brand-800" />
              <div className="mt-5 flex items-baseline justify-between gap-4">
                <h3 className="text-xl font-medium tracking-tight">{w.name}</h3>
                <span className="text-sm text-fg-subtle">{w.year}</span>
              </div>
              <div className="mt-2.5 flex flex-wrap gap-1.5">
                {w.tags.map((t) => <span key={t} className="rounded-full border border-border px-3 py-1 text-xs text-fg-muted">{t}</span>)}
              </div>
              <p className="mt-3 text-sm font-medium text-primary">{w.result}</p>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Numbers() {
  return (
    <section aria-label="Studio in numbers" className="bg-surface py-20">
      <Container className="grid grid-cols-2 gap-8 lg:grid-cols-4">
        {stats.map((s) => (
          <div key={s.label} className="border-t border-fg pt-4">
            <p className="text-5xl font-medium tracking-tighter sm:text-6xl">{s.value}</p>
            <p className="mt-2 text-sm text-fg-muted">{s.label}</p>
          </div>
        ))}
      </Container>
    </section>
  );
}

function Process() {
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <Label>Process</Label>
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Four stages, no surprises</h2>
        <ol className="mt-12 grid border-t border-border sm:grid-cols-2 lg:grid-cols-4">
          {process.map((p, i) => (
            <li key={p.title} className="grid content-start gap-3 border-border py-7 sm:pr-7 lg:[&:not(:first-child)]:border-l lg:[&:not(:first-child)]:pl-7">
              <span className="text-6xl font-medium tracking-tighter text-fg-subtle" aria-hidden>0{i + 1}</span>
              <h3 className="text-xl font-medium tracking-tight">{p.title}</h3>
              <p className="text-sm text-fg-muted">{p.body}</p>
              <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border px-3 py-1 text-xs text-fg-muted"><Clock className="size-3.5" />{p.time}</span>
            </li>
          ))}
        </ol>
      </Container>
    </section>
  );
}

function Quote() {
  return (
    <section className="bg-surface py-20 sm:py-24">
      <Container>
        <figure className="grid max-w-4xl gap-8">
          <blockquote className="text-pretty text-2xl font-medium leading-tight tracking-tight sm:text-4xl">
            <span className="block text-6xl text-primary" aria-hidden>“</span>
            Okra took a name we had scribbled on a napkin and made it the brand our customers ask about.
          </blockquote>
          <figcaption className="text-sm"><p className="font-medium">Kavya Reddy</p><p className="text-fg-subtle">Co-founder, Tanka Coffee</p></figcaption>
        </figure>
      </Container>
    </section>
  );
}

function Contact() {
  return (
    <section className="bg-fg text-bg">
      <Container className="grid gap-12 py-20 sm:py-24 lg:grid-cols-2 lg:gap-16">
        <div>
          <h2 className="text-5xl font-medium leading-none tracking-tighter sm:text-7xl">Got a project? Let’s talk.</h2>
          <a href="mailto:hello@okra.studio" className="mt-8 inline-block border-b-2 border-primary pb-1 text-2xl font-medium">hello@okra.studio</a>
        </div>
        <form className="grid gap-4 rounded-xl bg-bg p-6 text-fg sm:p-8" aria-label="Project enquiry">
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="grid gap-1.5 text-sm font-medium">Your name<input className="h-10 rounded border border-border-strong bg-bg px-3 font-normal outline-none focus:ring-2 focus:ring-ring" /></label>
            <label className="grid gap-1.5 text-sm font-medium">Work email<input type="email" className="h-10 rounded border border-border-strong bg-bg px-3 font-normal outline-none focus:ring-2 focus:ring-ring" /></label>
          </div>
          <fieldset className="grid gap-2">
            <legend className="mb-2 text-sm font-medium">Budget</legend>
            <div className="flex flex-wrap gap-2">
              {budgets.map((b, i) => (
                <label key={b} className="cursor-pointer">
                  <input type="radio" name="budget" defaultChecked={i === 1} className="peer sr-only" />
                  <span className="block rounded-full border border-border px-3 py-1.5 text-sm text-fg-muted peer-checked:border-fg peer-checked:bg-fg peer-checked:text-bg">{b}</span>
                </label>
              ))}
            </div>
          </fieldset>
          <label className="grid gap-1.5 text-sm font-medium">What are you making?<textarea rows={4} className="rounded border border-border-strong bg-bg px-3 py-2 font-normal outline-none focus:ring-2 focus:ring-ring" /></label>
          <button type="submit" className="inline-flex h-11 items-center justify-center gap-2 rounded bg-primary font-medium text-primary-fg hover:bg-primary-hover">Send enquiry <ArrowRight className="size-4" /></button>
        </form>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-fg text-bg">
      <Container className="flex flex-wrap items-center justify-between gap-4 border-t border-fg-muted py-7 text-sm">
        <span className="font-semibold">okra<span className="text-primary">/</span>studio</span>
        <nav aria-label="Footer" className="flex flex-wrap gap-6">{["Work", "Studio", "Journal", "Careers"].map((l) => <a key={l} href="#">{l}</a>)}</nav>
        <span>© 2026 Okra Studio LLP</span>
      </Container>
    </footer>
  );
}

export default function Page() {
  return (
    <div className="bg-bg font-sans text-fg">
      <Header />
      <main>
        <Hero />
        <ServicesBand />
        <Work />
        <Numbers />
        <Process />
        <Quote />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}