import type { Metadata } from "next";
import {
  ArrowRight,
  Check,
  ContactRound,
  KeyRound,
  LockKeyhole,
  ScanLine,
  ShieldCheck,
  Smartphone,
} from "lucide-react";
import Link from "next/link";

import { ProductDevice } from "~/components/product-device";
import { Button } from "~/components/ui/button";
import { productClaims, productRelease } from "~/content/product";
import { BETA_INVITE_MAILTO } from "~/lib/beta";

export const metadata: Metadata = {
  title: "Carry the context when care gets complicated",
  description:
    "Medscribe is a private, patient-controlled beta that helps keep visits, medications, and critical context together on your device.",
};

const visitMoments = [
  {
    number: "01",
    eyebrow: "Visits stay findable",
    title: "The visit has a place to land.",
    body: "Keep the recording, transcript, and reviewed summary together instead of reconstructing the appointment from memory.",
    image: "/screenshots/pitch-glass-2026-08-20/visits-natural.webp",
    darkImage: "/screenshots/pitch-glass-2026-08-20/visits-natural-dark.webp",
    alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
  },
  {
    number: "02",
    eyebrow: "Words stay checkable",
    title: "Go back to what was actually said.",
    body: "Search the local transcript and compare it with the generated summary before anything becomes part of the record you rely on.",
    image: "/screenshots/pitch-glass-2026-08-20/transcript-black.webp",
    darkImage: "/screenshots/pitch-glass-2026-08-20/transcript-black-dark.webp",
    alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
  },
  {
    number: "03",
    eyebrow: "The next step stays visible",
    title: "Review the useful part. Keep the uncertainty.",
    body: "Medications, follow-ups, diagnoses, and instructions are prepared on-device. Suggestions remain suggestions until a person checks them.",
    image: "/screenshots/pitch-glass-2026-08-20/summary-natural.webp",
    darkImage: "/screenshots/pitch-glass-2026-08-20/summary-natural-dark.webp",
    alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
  },
] as const;

const proofStats = [
  {
    value: productRelease.drugFacts.toLocaleString("en-US"),
    label: "bundled medication records",
  },
  {
    value: productRelease.rxNormTerms.toLocaleString("en-US"),
    label: "RxNorm terms for matching",
  },
  {
    value: productRelease.interactionPairs.toLocaleString("en-US"),
    label: "known interaction pairs",
  },
] as const;

const privacyPrinciples = [
  {
    icon: Smartphone,
    title: "Your working record stays local",
    body: productClaims.localRecord.publicCopy,
  },
  {
    icon: LockKeyhole,
    title: "AI runs on the device",
    body: productClaims.localAi.publicCopy,
  },
  {
    icon: ShieldCheck,
    title: "Facts do not come from model memory",
    body: productClaims.medicationFacts.publicCopy,
  },
] as const;

const betaFit = [
  "Managing several medications or repeated visits",
  "Coordinating care with a family caregiver",
  "Willing to review generated information and report errors",
] as const;

export default function HomePage() {
  return (
    <>
      <section className="relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
        <div className="bg-primary-light/55 absolute top-0 left-1/2 -z-10 h-[38rem] w-[68rem] max-w-[120vw] -translate-x-1/2 rounded-full blur-3xl" />
        <div className="mx-auto max-w-7xl text-center">
          <div className="animate-fade-in-up flex items-center justify-center gap-3">
            <span className="bg-success-light text-success rounded-full px-3 py-1.5 text-xs font-bold tracking-[0.12em] uppercase">
              {productRelease.stage}
            </span>
            <span className="text-muted-foreground text-xs font-semibold tracking-[0.12em] uppercase">
              {productRelease.platforms}
            </span>
          </div>
          <h1 className="animate-fade-in-up-delay-1 text-foreground mx-auto mt-7 max-w-6xl font-serif text-[clamp(3.6rem,9vw,8.5rem)] leading-[0.86] font-semibold tracking-[-0.055em]">
            Carry the context.
          </h1>
          <p className="animate-fade-in-up-delay-2 text-muted-foreground mx-auto mt-7 max-w-2xl text-lg leading-relaxed sm:text-xl lg:text-2xl">
            Visits, medications, and the critical details between them—kept
            together on the device you carry.
          </p>
          <div className="animate-fade-in-up-delay-3 mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button asChild size="lg">
              <Link href="/beta">
                Request beta access
                <ArrowRight className="size-4" aria-hidden="true" />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/how-it-works">See how it works</Link>
            </Button>
          </div>
        </div>

        <div className="relative mx-auto mt-12 h-[36rem] max-w-5xl sm:h-[46rem] lg:mt-8 lg:h-[54rem]">
          <div className="absolute top-24 left-1/2 w-[17rem] -translate-x-[86%] -rotate-6 sm:top-28 sm:w-[22rem] lg:top-32 lg:w-[26rem]">
            <ProductDevice
              src="/screenshots/pitch-glass-2026-08-20/summary-natural.webp"
              darkSrc="/screenshots/pitch-glass-2026-08-20/summary-natural-dark.webp"
              alt="Medscribe visit summary in a natural titanium iPhone product bezel"
              className="pitch-device-motion pitch-device-drift-left"
              sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
              priority
            />
          </div>
          <div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
            <ProductDevice
              src="/screenshots/pitch-glass-2026-08-20/home-black.webp"
              darkSrc="/screenshots/pitch-glass-2026-08-20/home-black-dark.webp"
              alt="Medscribe home screen in a black titanium iPhone product bezel"
              className="pitch-device-motion pitch-device-drift-right"
              sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
              priority
            />
          </div>
          <p className="text-muted-foreground absolute inset-x-0 bottom-5 text-center text-xs font-medium tracking-wide sm:bottom-10">
            Synthetic demo data · beta interface
          </p>
        </div>
      </section>

      <section className="pitch-lazy border-border-soft bg-surface/80 flex min-h-[78svh] items-center border-y px-4 py-24 sm:px-6 lg:py-32">
        <div className="pitch-copy-motion mx-auto max-w-6xl text-center">
          <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
            The missing picture
          </p>
          <h2 className="text-foreground mx-auto mt-7 max-w-5xl font-serif text-[clamp(2.8rem,7vw,6.5rem)] leading-[0.98] font-semibold tracking-[-0.045em]">
            Care happens in fragments. Your context shouldn&apos;t.
          </h2>
          <p className="text-muted-foreground mx-auto mt-8 max-w-2xl text-lg leading-relaxed sm:text-xl">
            One instruction lives in a portal. A medication label sits in a
            cabinet. The latest change lives in someone&apos;s memory. Medscribe
            is the patient-held thread between those moments.
          </p>
        </div>
      </section>

      <section className="pitch-lazy px-4 py-24 sm:px-6 lg:py-36">
        <div className="mx-auto grid max-w-7xl gap-16 lg:grid-cols-[0.78fr_1.22fr] lg:gap-24">
          <div className="lg:sticky lg:top-28 lg:h-fit">
            <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
              After the visit
            </p>
            <h2 className="text-foreground mt-6 max-w-xl font-serif text-5xl leading-[0.98] font-semibold tracking-[-0.04em] sm:text-6xl">
              Turn what happened into something you can check.
            </h2>
            <p className="text-muted-foreground mt-7 max-w-lg text-lg leading-relaxed">
              Bring in typed notes, a portal screenshot, a document, or an
              optional consent-gated recording. The work happens locally. You
              decide what is useful.
            </p>
            <div className="border-primary/25 bg-primary-light/35 mt-8 max-w-lg rounded-2xl border p-5">
              <p className="text-foreground text-sm leading-relaxed">
                <strong className="font-semibold">The safety loop:</strong>{" "}
                review generated information before acting. Medscribe does not
                diagnose, prescribe, or replace clinical verification.
              </p>
            </div>
          </div>

          <ol className="space-y-8 sm:space-y-12">
            {visitMoments.map((moment, index) => (
              <li
                key={moment.number}
                className="pitch-card-motion border-border-soft bg-surface relative overflow-hidden rounded-[2.5rem] border px-5 pt-8 shadow-[0_30px_90px_rgba(15,23,42,0.08)] sm:px-10 sm:pt-10 dark:shadow-[0_30px_90px_rgba(0,0,0,0.25)]"
              >
                <div className="relative z-10 max-w-xl">
                  <div className="flex items-center gap-3">
                    <span className="bg-primary-light text-primary flex size-9 items-center justify-center rounded-full text-xs font-bold">
                      {moment.number}
                    </span>
                    <p className="text-primary text-xs font-bold tracking-[0.16em] uppercase">
                      {moment.eyebrow}
                    </p>
                  </div>
                  <h3 className="text-foreground mt-5 font-serif text-3xl font-semibold tracking-[-0.025em] sm:text-4xl">
                    {moment.title}
                  </h3>
                  <p className="text-muted-foreground mt-4 max-w-lg leading-relaxed">
                    {moment.body}
                  </p>
                </div>
                <div className="bg-primary-light/45 absolute -right-36 bottom-14 -z-0 size-96 rounded-full blur-3xl" />
                <div className="relative mx-auto mt-10 w-[min(72vw,21rem)] translate-y-14">
                  <ProductDevice
                    src={moment.image}
                    darkSrc={moment.darkImage}
                    alt={moment.alt}
                    className={`pitch-device-motion ${index % 2 === 0 ? "pitch-device-drift-right" : "pitch-device-drift-left"}`}
                    sizes="(min-width: 1024px) 336px, (min-width: 640px) 320px, 72vw"
                  />
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="pitch-lazy relative isolate overflow-hidden bg-[#082f2c] px-4 py-24 text-white sm:px-6 lg:py-36">
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_78%_18%,rgba(45,212,191,0.25),transparent_32%),radial-gradient(circle_at_16%_80%,rgba(20,184,166,0.15),transparent_28%)]" />
        <div className="mx-auto max-w-7xl">
          <div className="pitch-copy-motion mx-auto max-w-4xl text-center">
            <p className="text-xs font-bold tracking-[0.2em] text-teal-200 uppercase">
              Between visits
            </p>
            <h2 className="mt-6 font-serif text-[clamp(3rem,7vw,6.7rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
              Keep the medication picture from going stale.
            </h2>
            <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-teal-50/75 sm:text-xl">
              The list, the label, the schedule, and the latest confirmation
              belong in the same view—not scattered across paper and memory.
            </p>
          </div>

          <div className="mt-16 grid gap-14 lg:grid-cols-2 lg:items-center lg:gap-6">
            <div className="relative mx-auto h-[42rem] w-full max-w-2xl sm:h-[50rem] lg:h-[56rem]">
              <div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
                <ProductDevice
                  src="/screenshots/pitch-glass-2026-08-20/medication-detail-natural.webp"
                  darkSrc="/screenshots/pitch-glass-2026-08-20/medication-detail-natural-dark.webp"
                  alt="Medscribe medication detail in a natural titanium iPhone product bezel"
                  className="pitch-device-motion pitch-device-drift-left"
                  sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
                />
              </div>
              <div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
                <ProductDevice
                  src="/screenshots/pitch-glass-2026-08-20/medications-black.webp"
                  darkSrc="/screenshots/pitch-glass-2026-08-20/medications-black-dark.webp"
                  alt="Medscribe medication list in a black titanium iPhone product bezel"
                  className="pitch-device-motion pitch-device-drift-right"
                  sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
                />
              </div>
            </div>

            <div className="grid gap-px overflow-hidden rounded-[2rem] border border-white/12 bg-white/12">
              {[
                {
                  title: "Show where a schedule came from",
                  body: "Schedules can carry their source, confirmation, timezone, and freshness state.",
                },
                {
                  title: "Keep facts deterministic",
                  body: productClaims.medicationFacts.publicCopy,
                },
                {
                  title: "Make uncertainty visible",
                  body: "Missing or stale details stay visible so the person or clinician can verify them.",
                },
              ].map((item) => (
                <article
                  key={item.title}
                  className="bg-[#0b3b37]/90 p-7 sm:p-9"
                >
                  <Check className="size-5 text-teal-200" aria-hidden="true" />
                  <h3 className="mt-5 font-serif text-2xl font-semibold sm:text-3xl">
                    {item.title}
                  </h3>
                  <p className="mt-3 leading-relaxed text-teal-50/70">
                    {item.body}
                  </p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="pitch-lazy bg-[#f0ece4] px-4 py-24 sm:px-6 lg:py-36 dark:bg-[#111827]">
        <div className="mx-auto grid max-w-7xl items-center gap-14 lg:grid-cols-[1fr_0.9fr] lg:gap-24">
          <div className="pitch-copy-motion order-2 lg:order-1">
            <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
              Ask from the record
            </p>
            <h2 className="text-foreground mt-6 max-w-2xl font-serif text-[clamp(3.25rem,6vw,6.5rem)] leading-[0.94] font-semibold tracking-[-0.045em]">
              Better questions begin with your context.
            </h2>
            <p className="text-muted-foreground mt-8 max-w-xl text-lg leading-relaxed sm:text-xl">
              Ask about a visit or medication without uploading the record to a
              remote model. Answers are grounded in local history and bundled
              facts, with the boundary kept in view.
            </p>
            <p className="border-primary/35 text-muted-foreground mt-7 max-w-xl border-l-2 pl-5 text-sm leading-relaxed">
              Informational only. Medication changes still belong with a
              clinician or pharmacist.
            </p>
          </div>
          <div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
            <ProductDevice
              src="/screenshots/pitch-glass-2026-08-20/ask-black.webp"
              darkSrc="/screenshots/pitch-glass-2026-08-20/ask-black-dark.webp"
              alt="Medscribe Ask response grounded in local health context, shown in a black titanium iPhone product bezel"
              className="pitch-device-motion pitch-device-drift-right"
              sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
            />
          </div>
        </div>
      </section>

      <section className="pitch-lazy overflow-hidden px-4 py-24 sm:px-6 lg:py-36">
        <div className="mx-auto max-w-7xl">
          <div className="grid items-center gap-16 lg:grid-cols-[0.92fr_1.08fr] lg:gap-24">
            <div className="relative mx-auto w-[min(80vw,28rem)]">
              <div className="bg-primary-light/70 absolute inset-[12%_-12%_8%] -z-10 rounded-[4rem] blur-2xl" />
              <ProductDevice
                src="/screenshots/pitch-glass-2026-08-20/know-me-natural.webp"
                darkSrc="/screenshots/pitch-glass-2026-08-20/know-me-natural-dark.webp"
                alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
                className="pitch-device-motion pitch-device-drift-left"
                sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
              />
            </div>
            <div className="pitch-copy-motion">
              <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
                At the handoff
              </p>
              <h2 className="text-foreground mt-6 max-w-2xl font-serif text-[clamp(3.2rem,6vw,6.2rem)] leading-[0.95] font-semibold tracking-[-0.045em]">
                Bring the picture when the chart is incomplete.
              </h2>
              <p className="text-muted-foreground mt-8 max-w-xl text-lg leading-relaxed sm:text-xl">
                Know Me gathers selected medications, allergies, conditions,
                baseline, and contacts into one readable snapshot. Freshness
                signals show what may need another look.
              </p>
              <div className="mt-9 grid gap-4 sm:grid-cols-2">
                <div className="border-border-soft bg-surface rounded-2xl border p-5">
                  <ScanLine
                    className="text-primary size-6"
                    aria-hidden="true"
                  />
                  <p className="text-foreground mt-4 font-semibold">
                    Quick handoff
                  </p>
                  <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
                    Show or share a selected, readable snapshot.
                  </p>
                </div>
                <div className="border-border-soft bg-surface rounded-2xl border p-5">
                  <ContactRound
                    className="text-primary size-6"
                    aria-hidden="true"
                  />
                  <p className="text-foreground mt-4 font-semibold">
                    Caregiver copy
                  </p>
                  <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
                    Manually export an encrypted copy for a paired recipient.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-24 overflow-hidden rounded-[2.5rem] bg-[#0f4f4b] p-7 text-white sm:p-10 lg:p-14">
            <div className="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
              <div>
                <KeyRound className="size-7 text-teal-200" aria-hidden="true" />
                <h3 className="mt-5 font-serif text-4xl leading-tight font-semibold sm:text-5xl">
                  Share a snapshot. Not an invisible feed.
                </h3>
                <p className="mt-5 max-w-xl leading-relaxed text-teal-50/75">
                  Pair by QR code, compare a safety number, and choose when to
                  export. The caregiver imports a local copy on their device.
                </p>
              </div>
              <ol className="grid gap-3 sm:grid-cols-3">
                {[
                  ["1", "You review", "Choose the record to send"],
                  ["2", "Encrypted copy", "Protected for the recipient key"],
                  ["3", "They import", "A local, readable snapshot"],
                ].map(([number, title, body]) => (
                  <li
                    key={number}
                    className="rounded-2xl border border-white/15 bg-white/8 p-5"
                  >
                    <span className="flex size-8 items-center justify-center rounded-full bg-white/12 text-xs font-bold">
                      {number}
                    </span>
                    <p className="mt-8 font-serif text-xl font-semibold">
                      {title}
                    </p>
                    <p className="mt-2 text-sm leading-relaxed text-teal-50/65">
                      {body}
                    </p>
                  </li>
                ))}
              </ol>
            </div>
            <p className="mt-8 border-t border-white/12 pt-6 text-xs leading-relaxed text-teal-50/60">
              Manual today—not live sync or a household cloud account.
              Import-side sender trust enforcement is still being hardened;
              revocation cannot recall a copy already exported.
            </p>
          </div>
        </div>
      </section>

      <section className="pitch-lazy relative isolate overflow-hidden bg-[#070d15] px-4 py-24 text-white sm:px-6 lg:py-36">
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,rgba(45,212,191,0.13),transparent_36%)]" />
        <div className="mx-auto max-w-7xl">
          <div className="pitch-copy-motion mx-auto max-w-4xl text-center">
            <p className="text-xs font-bold tracking-[0.2em] text-teal-300 uppercase">
              A precise privacy boundary
            </p>
            <h2 className="mt-6 font-serif text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
              Local changes what you have to trust.
            </h2>
            <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-slate-300 sm:text-xl">
              The working record and supported AI tasks stay on the device.
              Medication facts come from bundled references, not a model trying
              to remember medicine.
            </p>
          </div>

          <dl className="mt-20 grid border-y border-white/12 md:grid-cols-3 md:divide-x md:divide-white/12">
            {proofStats.map((stat) => (
              <div
                key={stat.label}
                className="border-b border-white/12 px-5 py-10 text-center last:border-b-0 md:border-b-0 lg:py-14"
              >
                <dt className="text-sm text-slate-400">{stat.label}</dt>
                <dd className="mt-3 font-serif text-5xl font-semibold tracking-[-0.04em] text-teal-200 sm:text-6xl lg:text-7xl">
                  {stat.value}
                </dd>
              </div>
            ))}
          </dl>

          <div className="mt-16 grid gap-4 md:grid-cols-3">
            {privacyPrinciples.map((principle) => {
              const Icon = principle.icon;

              return (
                <article
                  key={principle.title}
                  className="rounded-[1.75rem] border border-white/12 bg-white/[0.045] p-7"
                >
                  <Icon className="size-6 text-teal-200" aria-hidden="true" />
                  <h3 className="mt-8 font-serif text-2xl font-semibold">
                    {principle.title}
                  </h3>
                  <p className="mt-4 text-sm leading-relaxed text-slate-400">
                    {principle.body}
                  </p>
                </article>
              );
            })}
          </div>

          <div className="mt-10 text-center">
            <Button asChild variant="secondary">
              <Link href="/privacy">
                Read privacy & evidence
                <ArrowRight className="size-4" aria-hidden="true" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      <section className="pitch-lazy flex min-h-[82svh] items-center px-4 py-24 sm:px-6 lg:py-32">
        <div className="pitch-copy-motion mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] border border-teal-900/10 bg-[linear-gradient(145deg,#ccfbf1_0%,#f0fdfa_44%,#ffffff_100%)] px-6 py-16 text-center shadow-[0_35px_110px_rgba(15,118,110,0.15)] sm:px-10 lg:px-20 lg:py-24 dark:border-teal-300/10 dark:bg-[linear-gradient(145deg,#134e4a_0%,#0f2930_48%,#111827_100%)]">
          <p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
            The right beta participant
          </p>
          <h2 className="text-foreground mx-auto mt-6 max-w-4xl font-serif text-[clamp(3.2rem,7vw,7rem)] leading-[0.92] font-semibold tracking-[-0.05em]">
            Help build the record people can actually carry.
          </h2>
          <p className="text-muted-foreground mx-auto mt-8 max-w-2xl text-lg leading-relaxed sm:text-xl">
            This is an internal beta. Expect close feedback, manual review,
            rough edges, and possible resets—not guaranteed continuity.
          </p>
          <ul className="mx-auto mt-9 grid max-w-4xl gap-3 text-left md:grid-cols-3">
            {betaFit.map((item) => (
              <li
                key={item}
                className="border-primary/15 bg-surface/65 text-foreground flex items-start gap-3 rounded-2xl border p-4 text-sm leading-relaxed"
              >
                <span className="bg-primary-light mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full">
                  <Check className="text-primary size-3" aria-hidden="true" />
                </span>
                {item}
              </li>
            ))}
          </ul>
          <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button asChild size="lg">
              <a href={BETA_INVITE_MAILTO}>
                Draft beta request
                <ArrowRight className="size-4" aria-hidden="true" />
              </a>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/beta">What to expect</Link>
            </Button>
          </div>
          <p className="text-muted-foreground mx-auto mt-6 max-w-xl text-xs leading-relaxed">
            Start with your platform and whether you are testing as a patient,
            caregiver, or both. Please do not email health details.
          </p>
        </div>
      </section>
    </>
  );
}