import { Calendar, FileText } from "lucide-react";
import { cn } from "@/lib/utils";

const projects = [
  { title: "Kitepay — rent paid in two taps", role: "Lead designer · Mobile app", year: "2025", href: "#" },
  { title: "Sehat — a calmer patient portal", role: "Product design · Web app", year: "2024", href: "#" },
  { title: "Tidewater — one system for nine teams", role: "Design systems", year: "2023", href: "#" },
  { title: "Monsoon Atlas — rainfall for farmers", role: "Data visualisation", year: "2022", href: "#" },
];

const experience = [
  { years: "2023 – now", role: "Lead product designer, Kitepay", place: "Chennai" },
  { years: "2020 – 23", role: "Senior designer, Sehat Health", place: "Bengaluru" },
  { years: "2017 – 20", role: "Product designer, Tidewater Labs", place: "Remote" },
  { years: "2015 – 17", role: "Visual designer, Studio Anchor", place: "Mumbai" },
];

const capabilities = [
  { title: "Product", items: ["Discovery and user research", "Flows for regulated products", "Prototypes that test the risky part"] },
  { title: "Systems", items: ["Design systems and tokens", "Accessibility reviews", "Documentation teams read"] },
  { title: "Teams", items: ["Hiring and mentoring designers", "Design critique that ships", "Working with engineering"] },
];

const quotes = [
  { quote: "Meera asks the question nobody in the room has asked yet, and then designs the answer.", name: "Vikram Joshi", role: "Chief product officer, Kitepay" },
  { quote: "Billing complaints to our support team halved after her redesign.", name: "Dr. Rhea Kapoor", role: "Founder, Sehat Health" },
];

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>
      <Container className="flex h-[72px] items-center gap-8">
        <a href="/" className="font-semibold">Meera Iyer</a>
        <span className="hidden items-center gap-2 text-sm text-fg-muted sm:flex">
          <span className="size-2 rounded-full bg-success" aria-hidden />Open to new work from January
        </span>
        <nav aria-label="Main" className="ml-auto flex gap-6 text-sm text-fg-muted">
          {["Work", "About", "Contact"].map((l) => <a key={l} href={"#" + l.toLowerCase()} className="hover:text-fg">{l}</a>)}
        </nav>
      </Container>
    </header>
  );
}

function Intro() {
  return (
    <section className="py-14 sm:py-24">
      <Container>
        <h1 className="max-w-[22ch] text-balance text-3xl font-medium leading-tight tracking-tight sm:text-5xl">
          Meera Iyer designs calm software for money and health.{" "}
          <span className="text-fg-subtle">Ten years in, mostly fintech and healthcare.</span>
        </h1>
        <dl className="mt-10 flex flex-wrap gap-x-12 gap-y-4 text-sm">
          <div><dt className="text-fg-subtle">Now</dt><dd>Lead product designer, Kitepay</dd></div>
          <div><dt className="text-fg-subtle">Before</dt><dd>Sehat Health, Tidewater Labs</dd></div>
          <div><dt className="text-fg-subtle">Based in</dt><dd>Chennai, working in IST</dd></div>
        </dl>
      </Container>
    </section>
  );
}

function Work() {
  return (
    <section id="work" aria-labelledby="work-title" className="pb-20 sm:pb-24">
      <Container>
        <h2 id="work-title" className="sr-only">Selected work</h2>
        <div className="grid gap-10 md:grid-cols-2 md:gap-x-8 md:gap-y-14">
          {projects.map((p, i) => (
            <article key={p.title}>
              <a href={p.href} aria-label={p.title} className={cn("block aspect-[5/4] rounded-lg bg-gradient-to-br", i % 2 ? "from-neutral-200 to-brand-200" : "from-brand-300 to-brand-700")} />
              <div className="mt-4 flex items-baseline justify-between gap-4">
                <h3 className="text-lg font-medium tracking-tight">{p.title}</h3>
                <span className="text-sm text-fg-subtle">{p.year}</span>
              </div>
              <p className="text-sm text-fg-muted">{p.role}</p>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="bg-surface py-20 sm:py-24">
      <Container className="grid gap-10 lg:grid-cols-[340px_1fr] lg:gap-16">
        <div role="img" aria-label="Portrait of Meera Iyer" className="aspect-[4/5] max-w-xs rounded-lg bg-gradient-to-br from-brand-300 to-brand-600 lg:max-w-none" />
        <div className="grid content-start gap-4">
          <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">About</h2>
          <p className="max-w-prose text-lg">I started as a visual designer at a small Mumbai studio and moved into product when I realised I cared more about what happens after the launch.</p>
          <p className="max-w-prose text-fg-muted">I like problems with real stakes, research I do myself, and teams where designers ship alongside engineers.</p>
          <ul className="mt-4 border-b border-border">
            {experience.map((e) => (
              <li key={e.years} className="grid gap-1 border-t border-border py-4 text-sm sm:grid-cols-[120px_1fr_auto] sm:gap-4">
                <span className="tabular-nums text-fg-subtle">{e.years}</span><span>{e.role}</span><span className="text-fg-subtle">{e.place}</span>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  );
}

function Capabilities() {
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <h2 className="mb-10 text-3xl font-semibold tracking-tight sm:text-4xl">What I can help with</h2>
        <div className="grid gap-10 md:grid-cols-3">
          {capabilities.map((c) => (
            <div key={c.title}>
              <h3 className="mb-3 text-sm font-medium text-fg-subtle">{c.title}</h3>
              <ul>{c.items.map((i) => <li key={i} className="border-b border-border py-2.5">{i}</li>)}</ul>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Quotes() {
  return (
    <section aria-label="Kind words" className="bg-surface py-20 sm:py-24">
      <Container className="grid gap-10 md:grid-cols-2 md:gap-12">
        {quotes.map((q) => (
          <figure key={q.name} className="grid gap-5 border-l-2 border-primary pl-6">
            <blockquote className="text-pretty text-lg tracking-tight">“{q.quote}”</blockquote>
            <figcaption className="text-sm"><p className="font-medium">{q.name}</p><p className="text-fg-subtle">{q.role}</p></figcaption>
          </figure>
        ))}
      </Container>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="py-20 sm:py-28">
      <Container className="grid justify-items-start gap-7">
        <p className="text-sm font-medium text-primary">Have a calm product in mind?</p>
        <a href="mailto:hello@meeraiyer.design" className="break-all text-3xl font-medium tracking-tighter underline decoration-primary decoration-2 underline-offset-8 sm:text-7xl">hello@meeraiyer.design</a>
        <div className="flex flex-wrap gap-3">
          <a href="#" className="inline-flex h-11 items-center gap-2 rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover"><Calendar className="size-4" />Book a 20-minute call</a>
          <a href="#" className="inline-flex h-11 items-center gap-2 rounded border border-border-strong px-5 font-medium hover:bg-surface"><FileText className="size-4" />Download CV</a>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <Container className="flex flex-wrap justify-between gap-4 border-t border-border py-7 text-sm text-fg-subtle">
        <span>© 2026 Meera Iyer</span>
        <nav aria-label="Footer" className="flex gap-6">{["Writing", "Talks", "CV"].map((l) => <a key={l} href="#" className="hover:text-fg">{l}</a>)}</nav>
        <span>Chennai · IST</span>
      </Container>
    </footer>
  );
}

export default function Page() {
  return (
    <div className="bg-bg font-sans text-fg">
      <Header />
      <main>
        <Intro />
        <Work />
        <About />
        <Capabilities />
        <Quotes />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}