import type { Metadata } from "next";
import Link from "next/link";
import { AboutScrollReveal } from "@/components/marketing/AboutScrollReveal";

// Fonts (Fraunces, Newsreader, JetBrains Mono) are now loaded globally
// in (marketing)/layout.tsx and available via CSS variables.

// ── Page-level styles (design tokens + letter layout) ─────────────
const CSS = `
.tia-letter {
  --paper:      #f7f1e6;
  --surface:    #fbf6ea;
  --ink:        #1f1b16;
  --ink-soft:   #5a5048;
  --ink-faint:  #8a7e6f;
  --rule:       #ddd2bc;
  --rule-soft:  #e8ded0;
  --accent:     #f43f5e;   /* rose-500 — site primary */
  --accent-2:   #e11d48;  /* rose-600 — emphasis */
  --fd: var(--font-fraunces, Georgia, serif);
  --fb: var(--font-newsreader, Georgia, serif);
  --fl: var(--font-jetbrains, ui-monospace, monospace);
  --fh: var(--font-caveat, cursive);
  --dw: 400;
  --ds: -0.02em;
  --r:  18px;
  --measure: 39rem;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
.tia-letter::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(0deg,rgba(31,27,22,.016) 0 1px,transparent 1px 3px);
}

/* ── hero ── */
.tia-hero {
  padding: clamp(52px,10vw,104px) clamp(20px,5vw,56px) clamp(8px,2vw,24px);
  text-align: center;
  position: relative; z-index: 2;
  background: linear-gradient(135deg, #fff1f2 0%, #fffbeb 50%, #fff1f2 100%);
}
.tia-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fl); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 22px;
}
.tia-eyebrow::before,.tia-eyebrow::after {
  content: ''; width: 24px; height: 1px; background: var(--accent);
}
.tia-hero h1 {
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(2.7rem,7vw,4.6rem); line-height: 1.02;
  letter-spacing: var(--ds); margin: 0; color: var(--ink);
  font-style: italic; text-wrap: balance;
}
.tia-hero h1 .hand {
  font-family: var(--fh); color: var(--accent-2);
  font-weight: 600; font-size: 1.04em; font-style: normal;
}

/* ── letter body ── */
.tia-body {
  position: relative; z-index: 2;
  max-width: 1120px; margin: 0 auto;
  padding: clamp(48px,9vw,96px) clamp(20px,5vw,56px) 0;
}
.tia-col {
  max-width: var(--measure); margin: 0 auto; display: flow-root;
}
.tia-col p { margin: 0 0 1em; }
.tia-col p:last-child { margin-bottom: 0; }
.tia-col strong { font-weight: 600; color: var(--ink); }
.tia-col em { font-style: italic; }

/* drop cap */
.tia-dropcap::first-letter {
  font-family: var(--fd); font-weight: 600; float: left;
  font-size: 4.6em; line-height: .78; padding: 8px 14px 0 0;
  color: var(--accent-2); font-style: italic;
}

/* display highlight line */
.tia-hl {
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.4rem,2.8vw,1.78rem); line-height: 1.28;
  letter-spacing: var(--ds); color: var(--accent-2);
  margin: 1em 0 0; font-style: italic;
}

/* pull quotes */
.tia-pull {
  max-width: var(--measure); margin: 2em auto;
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.7rem,3.6vw,2.5rem); line-height: 1.16;
  letter-spacing: var(--ds); color: var(--ink);
  text-wrap: balance; padding-left: 28px;
  border-left: 2px solid var(--accent); font-style: italic;
}
.tia-pull.accent { color: var(--accent-2); }
.tia-pull.center {
  text-align: center; padding-left: 0; border-left: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.1em 0;
}

/* quiet sub-headings */
.tia-subhead {
  max-width: var(--measure); margin: 2.4em auto .85em;
  padding-top: 1em; border-top: 1px solid var(--rule-soft);
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.45rem,3vw,1.95rem); line-height: 1.14;
  letter-spacing: var(--ds); color: var(--ink); font-style: italic;
}

/* floated photo frame */
.tia-float {
  float: right; width: 250px; margin: 4px 0 18px 34px;
}
@media (max-width: 600px) {
  .tia-float { float: none; width: min(290px,80vw); margin: 0 auto 22px; display: block; }
}
.tia-frame {
  position: relative; background: var(--surface);
  padding: 15px 15px 18px; border: 1px solid var(--rule);
  box-shadow: 0 22px 50px -20px rgba(31,27,22,.34), 0 2px 6px rgba(31,27,22,.08);
  transform: rotate(-1.6deg);
}
.tia-frame img { display: block; width: 100%; height: auto; }
.tia-tape {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 120px; height: 26px;
  background: rgba(201,138,43,.6); opacity: .8;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tia-float figcaption {
  font-family: var(--fh); text-align: center;
  margin-top: 10px; font-size: 1.2rem; color: var(--ink-soft);
}

/* callout card */
.tia-callout {
  max-width: var(--measure); margin: 2.4em auto;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: clamp(24px,4vw,38px);
  position: relative;
}
.tia-callout::before {
  content: '“'; position: absolute; top: -.18em; left: .22em;
  font-family: var(--fd); font-style: italic; font-size: 5rem;
  color: rgba(201,138,43,.4); line-height: 1;
}
.tia-callout p {
  font-size: 1.12rem; color: var(--ink-soft);
  margin: 0 0 .8em; padding-left: 1.6em;
}
.tia-callout p:last-child { margin-bottom: 0; }
.tia-callout .place {
  color: var(--accent); font-weight: 600;
  font-family: var(--fh); font-size: 1.3em;
}

/* creed list — same cream paper as rest of letter */
.tia-creed {
  list-style: none; max-width: var(--measure);
  margin: 1.7em auto; padding: 0;
  border-top: 1px solid var(--rule);
}
.tia-creed li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 2px; border-bottom: 1px solid var(--rule-soft);
}
.tia-creed .n {
  font-family: var(--fl); font-size: 11px; letter-spacing: .12em;
  color: var(--accent); min-width: 24px;
}
.tia-creed .t {
  font-family: var(--fb); font-size: 1.12rem; line-height: 1.5; color: var(--ink);
}
/* ── closing / signature ── */
.tia-closing {
  max-width: var(--measure); margin: 2.6em auto 0; text-align: center;
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.5rem,3.2vw,2.1rem); line-height: 1.22;
  letter-spacing: var(--ds); color: var(--accent-2); font-style: italic;
}
.tia-divider {
  max-width: var(--measure); margin: 2.6em auto; text-align: center;
  line-height: 1; color: var(--accent); font-size: 1.1rem;
}
.tia-sign { max-width: var(--measure); margin: 0 auto; }
.tia-sign .thanks { color: var(--ink-soft); margin: 0 0 1.4em; }
.tia-sign .welcome {
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.5rem,3vw,2rem); letter-spacing: var(--ds);
  margin: 0 0 .2em; color: var(--ink);
}
.tia-sign .warmth { color: var(--ink-faint); margin: 0 0 2em; }
.tia-sign-row { display: flex; align-items: center; gap: 22px; }
.tia-sign-row .names {
  font-family: var(--fh); font-size: 2.1rem; line-height: 1; color: var(--ink); margin: 0;
}
.tia-sign-row .role {
  font-family: var(--fl); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 0;
}

/* P.S. box */
.tia-ps {
  max-width: var(--measure); margin: 2.6em auto 0; display: flow-root;
  background: rgba(244,63,94,.05); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 24px 26px;
  font-style: italic; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.62;
}
.tia-ps-photo {
  float: left; width: 78px; height: 78px; border-radius: 50%;
  object-fit: cover; object-position: center 15%;
  margin: 2px 20px 8px 0;
  border: 2px solid var(--rule);
  shape-outside: circle(52%);
  box-shadow: 0 6px 16px -8px rgba(31,27,22,.4);
}
.tia-ps b {
  font-style: normal; font-family: var(--fl); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-right: 6px; font-weight: 500;
}

/* CTA */
.tia-cta {
  text-align: center; max-width: var(--measure);
  margin: clamp(56px,9vw,96px) auto 0;
  padding-bottom: clamp(56px,9vw,96px);
}
.tia-cta .ck {
  font-family: var(--fl); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px;
}
.tia-cta h3 {
  font-family: var(--fd); font-weight: var(--dw);
  font-size: clamp(1.7rem,4vw,2.4rem); letter-spacing: var(--ds);
  margin: 0 0 28px; color: var(--ink); font-style: italic; text-wrap: balance;
}
.tia-cta .big {
  display: inline-flex; align-items: center; gap: 12px;
  background: #f43f5e; color: #ffffff; border: 0;
  font-family: var(--fb); font-weight: 500; font-size: 1.05rem;
  padding: 16px 32px; border-radius: var(--r); text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(244,63,94,.4);
  transition: transform .2s, background .2s;
}
.tia-cta .big:hover { transform: translateY(-2px); background: #e11d48; }
.tia-cta .fine { font-size: .85rem; color: var(--ink-faint); margin: 16px 0 0; }

/* text helpers */
.tia-soft { color: var(--ink-soft); }
.tia-strong { font-weight: 600; color: var(--ink); }

/* scroll reveal */
.tia-reveal {
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.tia-reveal.tia-pre { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .tia-reveal.tia-pre { opacity: 1 !important; transform: none !important; }
}
`;

export const metadata: Metadata = {
  title: "About Tia",
  description: "A letter to every new parent — the story of why Tia was built, named after our daughter, and made for families like yours.",
  alternates: { canonical: "/about" },
  openGraph: {
    type: "website",
    url: "/about",
    title: "About Tia — A Letter to Every New Parent",
    description: "Built by parents. Inspired by our daughter. Made for families.",
  },
};

const CREED = [
  "Our vaccination schedule follows the IAP chart.",
  "We don't sell your data.",
  "We don't run ads.",
  "We don't build engagement loops.",
  "We don't treat your child as a product.",
  "We build to protect memories, not compete for attention.",
];

export default function AboutPage() {
  return (
    <div>
      {/* Page-specific design system — inline so it's scoped and SSR-safe */}
      {/* eslint-disable-next-line react/no-danger */}
      <style dangerouslySetInnerHTML={{ __html: CSS }} />

      {/* Scroll reveal — client-only behaviour, renders nothing to DOM */}
      <AboutScrollReveal />

      <div className="tia-letter">

        {/* ── HERO: title only — suspense preserved ── */}
        <header className="tia-hero">
          <p className="tia-eyebrow tia-reveal">Our story</p>
          <h1 className="tia-reveal">
            A letter to every<br />
            <span className="hand">new parent</span>
          </h1>
        </header>

        {/* ══ LETTER BODY ══════════════════════════════════════════ */}
        <article className="tia-body" id="story">

          {/* Opening — drop cap + floated photo */}
          <div className="tia-col">
            <p className="tia-dropcap tia-reveal">
              When we held our daughter for the first time, we felt a rush of love we never knew
              we were capable of — and alongside it, a fear we hadn&apos;t expected.
            </p>

            {/* Family illustration — floats right, text wraps */}
            <figure className="tia-float tia-reveal">
              <div className="tia-frame">
                <span className="tia-tape" />
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src="/images/family-illustration.jpg" alt="Yashika and Manohar holding baby Tia" />
              </div>
              <figcaption>the three of us — 2026</figcaption>
            </figure>

            <p className="tia-hl tia-reveal">Everything felt fragile. Everything felt new.</p>

            <p className="tia-reveal">
              In those early days, we wanted to capture every yawn, every gurgle, every tiny
              hand curling around our fingers. But the apps we tried felt cold and clinical — as
              though they had been built by people who had never stayed awake at 3&nbsp;a.m.
              wondering whether their baby&apos;s cough sounded different from yesterday.
            </p>
            <p className="tia-reveal">
              When our daughter, Tia, was born, we made a silent promise: we would remember
              everything.
            </p>
            <p className="tia-strong tia-reveal">We meant it completely.</p>
            <p className="tia-reveal">
              And within weeks, details were already slipping away — not the big milestones, but
              the small things. The exact weight on day five. The way she stretched when she woke
              up. The moment she first looked at us as though she knew who we were.
            </p>
            <p className="tia-soft tia-reveal">
              Those tiny details felt irreplaceable, and yet they were already beginning to fade.
            </p>
          </div>

          <p className="tia-pull accent tia-reveal">
            That realisation became the seed for everything Tia is today.
          </p>

          {/* ── Why we named it ── */}
          <h2 className="tia-subhead tia-reveal">Why we named the app Tia</h2>
          <div className="tia-col">
            <p className="tia-reveal">
              We named this app after our daughter, Tia. Not because we wanted a monument to
              her. Not because we wanted her name attached to a product.
            </p>
            <p className="tia-reveal">
              We named it after her because the love we have for our daughter is the same care
              we bring to building this app every single day.
            </p>
            <p className="tia-reveal">
              When we choose privacy over profit, patience over speed, and thoughtful design
              over endless notifications, we are building Tia the way we hope to raise our
              daughter — with care, responsibility, and respect.
            </p>
          </div>

          <p className="tia-pull accent tia-reveal">
            This app is not a trophy. It is not a brand badge.
          </p>

          <div className="tia-col">
            <p className="tia-reveal">
              It is simply an extension of what matters most to us. We built Tia with the belief
              that the earliest years of a child&apos;s life deserve extraordinary care. Every
              decision we make comes from the same understanding:{" "}
              <strong>small things matter.</strong>
            </p>
            <p className="tia-strong tia-reveal">
              Because one day, those small things become the memories we treasure most.
            </p>
          </div>

          {/* ── Modern families ── */}
          <h2 className="tia-subhead tia-reveal">A note on modern families</h2>
          <div className="tia-col">
            <p className="tia-reveal">
              Like many new parents today, we are raising our daughter in a nuclear family. And
              with that comes a particular kind of loneliness that few people talk about.
            </p>
            <p className="tia-reveal">
              The grandparents who once lived down the street may now live in another city. The
              relatives whose advice once arrived over a cup of tea now appear through video
              calls. The village that helped raise children for generations often feels farther
              away than ever. The hands that could help are now often on the other side of a
              screen.
            </p>
          </div>

          <p className="tia-pull center accent tia-reveal">
            Tia was born from that reality, too.
          </p>

          <div className="tia-callout tia-reveal">
            <p>
              Tia is built so that{" "}
              <span className="place">Nani in Lucknow</span> can see today&apos;s moments
              without you handing over your phone.
            </p>
            <p>
              So that{" "}
              <span className="place">Dadu in Jaipur</span> can be reminded of the vaccination
              schedule without you sending a WhatsApp message at 11&nbsp;PM.
            </p>
            <p>
              So that the aunties — even when they are in another city — can still feel like a
              part of the story.
            </p>
          </div>

          <div className="tia-col">
            <p className="tia-strong tia-reveal">
              Because raising a child was never meant to be done alone.
            </p>
            <p className="tia-reveal">
              In a small way, we hope Tia helps bring that village back — digitally, gently,
              and with respect for the way modern Indian families actually live.
            </p>
          </div>
        </article>

        {/* ══ WHAT WE BELIEVE — same cream paper, continuous letter ═ */}
        <article className="tia-body" id="believe">
          <h2 className="tia-subhead tia-reveal">What we believe</h2>

          <p className="tia-pull accent tia-reveal">
            The first years of your child&apos;s life are not a metric to optimise.
            They are irreplaceable.
          </p>

          <div className="tia-col">
            <p className="tia-reveal">
              No app can give you back a missed moment. No notification can replace being
              present when your baby discovers their hands, says a first word, or falls asleep
              on your shoulder.
            </p>
            <p className="tia-strong tia-reveal">
              Your job is to be present. Ours is to make the rest a little easier.
            </p>
          </div>

          <ul className="tia-creed tia-reveal">
            {CREED.map((item, i) => (
              <li key={i}>
                <span className="n">0{i + 1}</span>
                <span className="t">{item}</span>
              </li>
            ))}
          </ul>

          <div className="tia-col">
            <p className="tia-strong tia-reveal">
              Every choice we make is guided by the same principle: your family&apos;s story
              belongs to your family.
            </p>
          </div>
        </article>

        {/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
        <article className="tia-body">
          <h2 className="tia-subhead tia-reveal">To the parent reading this</h2>
          <div className="tia-col">
            <p className="tia-reveal">
              You are in the middle of something extraordinary.{" "}
              <em>Exhausting. Overwhelming. Beautiful.</em>
            </p>
            <p className="tia-reveal">
              You will never have this week again. Or this month. Or this exact version of your
              child — so small, so curious, and so completely dependent on you.
            </p>
            <p className="tia-reveal">Tia is not here to track your baby.</p>
          </div>

          <p className="tia-pull accent tia-reveal">
            Tia is here to help you remember your baby — and to hand that memory to them
            someday, complete, authentic, and full of love.
          </p>

          <div className="tia-col">
            <p className="tia-reveal">
              And one day, when your child asks,{" "}
              <em>&ldquo;What was I like when I was little?&rdquo;</em> — we hope you&apos;ll
              have an answer richer than memory alone.
            </p>
            <p className="tia-soft tia-reveal">
              Photos. Stories. Milestones. Tiny moments that would otherwise have faded with
              time.
            </p>
            <p className="tia-strong tia-reveal">
              A digital heirloom, built with love and preserved with care.
            </p>
          </div>

          {/* Final reveal — authorship */}
          <p className="tia-closing tia-reveal">
            Built by parents. Inspired by our daughter. Made for families like yours.
          </p>
          <div className="tia-divider tia-reveal">✦</div>

          {/* Signature */}
          <div className="tia-sign tia-reveal">
            <p className="thanks">Thank you for trusting us with your family&apos;s story.</p>
            <p className="welcome">Welcome to the Tia family.</p>
            <p className="warmth">With warmth,</p>
            <div className="tia-sign-row">
              <div>
                <p className="names">Yashika &amp; Manohar</p>
                <p className="role">Co-founders, Tia · Gurugram</p>
              </div>
            </div>
          </div>

          {/* P.S. — Tia's portrait floated left */}
          <div className="tia-ps tia-reveal">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="tia-ps-photo"
              src="/images/tia-portrait.jpg"
              alt="Baby Tia"
            />
            <b>P.S.</b>{" "}
            …and Tia — currently eight months old, trying very hard to eat her own feet, and
            having absolutely no idea that we named this app after her. One day she&apos;ll
            find out. We can&apos;t wait to see her face.
          </div>

          {/* CTA */}
          <div className="tia-cta tia-reveal" id="join">
            <p className="ck">Join the families already building their heirloom</p>
            <h3>Start your child&apos;s story today.</h3>
            <Link className="big" href="/login">
              Get started — it&apos;s free →
            </Link>
            <p className="fine">Free during early access. No credit card.</p>
          </div>
        </article>

      </div>
    </div>
  );
}