/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// ── Theme helpers ──────────────────────────────────────────────────────────

function getInitialTheme() {
  try {
    const stored = localStorage.getItem("echo.theme.preference");
    if (stored === "dark" || stored === "light") return stored;
  } catch {}
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}

const APP_STORE_URL = "https://apps.apple.com/us/app/echo-reflective-journal/id6766819002";

// ── Design tokens (terracotta, hardcoded) ──────────────────────────────────

function buildVars(theme) {
  const accent      = "#C4543D";
  const accentSoft  = theme === "dark" ? "rgba(244,238,228,0.06)" : "#F0DDD5";
  const accentDeep  = "#B64A35";
  const glow        = "rgba(196,84,61,0.16)";
  const glow2       = "rgba(122,72,48,0.10)";

  if (theme === "dark") {
    return {
      "--canvas":      "#15120e",
      "--canvas-2":    "#1c1813",
      "--ink":         "#f4eee4",
      "--ink-soft":    "#e7dfd2",
      "--ink-muted":   "#aca094",
      "--accent":      accent,
      "--accent-soft": accentSoft,
      "--accent-deep": accentDeep,
      "--border":      "rgba(244,238,228,0.10)",
      "--hairline":    "rgba(244,238,228,0.07)",
      "--card":        "rgba(38,30,24,0.72)",
      "--card-2":      "rgba(28,22,18,0.78)",
      "--shadow":      "rgba(0,0,0,0.45)",
      "--halo":        glow,
      "--halo-2":      glow2,
      "--paper":       "#1a1410",
      "--paper-ink":   "#f2ebdf",
    };
  }
  return {
    "--canvas":      "#F6F0E6",
    "--canvas-2":    "#EFE6D7",
    "--ink":         "#1f1814",
    "--ink-soft":    "#3a2b24",
    "--ink-muted":   "#6f655d",
    "--accent":      accent,
    "--accent-soft": accentSoft,
    "--accent-deep": accentDeep,
    "--border":      "rgba(80,48,35,0.12)",
    "--hairline":    "rgba(80,48,35,0.08)",
    "--card":        "rgba(255,251,245,0.72)",
    "--card-2":      "rgba(255,251,245,0.55)",
    "--shadow":      "rgba(41,27,22,0.12)",
    "--halo":        glow,
    "--halo-2":      glow2,
    "--paper":       "#1a1410",
    "--paper-ink":   "#f2ebdf",
  };
}

// ── Topbar ─────────────────────────────────────────────────────────────────

function Topbar({ theme, onToggleTheme }) {
  return (
    <header className="topbar">
      <a className="brand" href="#top">
        <span className="brand-mark" aria-hidden="true">
          <span className="brand-dot"></span>
          <span className="brand-ring"></span>
        </span>
        <span className="brand-word">Echo</span>
      </a>
      <nav aria-label="Primary">
        <a href="#what">What it does</a>
        <a href="#how">How it works</a>
        <a href="#sunday">Sunday Echo</a>
        <a href="#pricing">Pricing</a>
      </nav>
      <button
        type="button"
        className="theme-toggle"
        aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
        onClick={onToggleTheme}
      >
        {theme === "dark" ? (
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="4"/>
            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
          </svg>
        ) : (
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>
          </svg>
        )}
      </button>
      <a className="topbar-cta" href={APP_STORE_URL} target="_blank" rel="noopener">Download on App Store <span aria-hidden="true">→</span></a>
    </header>
  );
}

// ── Updates subscribe form ─────────────────────────────────────────────────

const WAITLIST_ENDPOINT = "https://mfbrlvcixrgbxrnmatce.supabase.co/functions/v1/join-waitlist";

function UpdatesForm() {
  const [firstName, setFirstName] = useState("");
  const [email, setEmail]         = useState("");
  const [honey, setHoney]         = useState("");
  const [status, setStatus]       = useState(null); // { kind: "success"|"error", text: string }
  const [loading, setLoading]     = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (loading) return;
    setLoading(true);
    setStatus(null);
    try {
      const res = await fetch(WAITLIST_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          firstName: firstName.trim(),
          email: email.trim(),
          website: honey,
          source: "landing_page",
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        throw new Error(typeof data.error === "string" ? data.error : "Couldn't save your spot right now. Please try again.");
      }
      setFirstName("");
      setEmail("");
      window.location.href = "/thank-you.html";
    } catch (err) {
      setStatus({ kind: "error", text: err instanceof Error ? err.message : "Something went wrong. Please try again." });
    } finally {
      setLoading(false);
    }
  };

  return (
    <form className="waitlist" onSubmit={submit} id="updates">
      {/* honeypot — visually hidden */}
      <div style={{ position: "absolute", left: "-9999px", opacity: 0, pointerEvents: "none" }} aria-hidden="true">
        <label htmlFor="wl-website">Website</label>
        <input id="wl-website" name="website" type="text" tabIndex={-1} autoComplete="off" value={honey} onChange={e => setHoney(e.target.value)} />
      </div>

      <div className="waitlist-name-row" style={{ display: "flex", gap: "8px", marginBottom: "8px", maxWidth: "560px" }}>
        <input
          type="text"
          value={firstName}
          placeholder="First name (optional)"
          onChange={e => setFirstName(e.target.value)}
          aria-label="First name"
          maxLength={80}
          style={{ flex: "0 0 180px", borderRadius: "999px", border: "1px solid var(--border)", padding: "14px 18px", background: "var(--card-2)", color: "var(--ink)", font: "inherit", outline: "none", backdropFilter: "blur(14px)" }}
        />
      </div>

      <div className="waitlist-input">
        <span className="waitlist-icon" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
          </svg>
        </span>
        <input
          type="email"
          value={email}
          placeholder="Your email address"
          onChange={e => setEmail(e.target.value)}
          required
          aria-label="Email address"
          autoComplete="email"
        />
        <button type="submit" disabled={loading}>
          {loading ? "Subscribing…" : <>Get notified <span aria-hidden="true">→</span></>}
        </button>
      </div>

      {status && (
        <div className={`waitlist-status ${status.kind}`} role="status" aria-live="polite">
          {status.text}
        </div>
      )}
      <p className="waitlist-note">
        New versions and features. No spam — unsubscribe anytime.
      </p>
    </form>
  );
}

// ── App Store badge ────────────────────────────────────────────────────────

function AppStoreBadge() {
  return (
    <svg width="20" height="20" viewBox="0 0 814 1000" fill="currentColor" aria-hidden="true" style={{ flexShrink: 0 }}>
      <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-37.5-150.3-96.5c-52.4-65.7-100.8-172.5-100.8-274.4 0-181.1 117.5-277.4 233.1-277.4 62.5 0 114.5 41.5 153.7 41.5 37.2 0 96.5-44.3 164-44.3zm-207.4-195.9c30.9-37.5 52.9-89.8 52.9-142.1 0-7.7-.6-15.4-1.9-21.8-49.3 1.9-108.2 33.2-143.6 75.2-27.6 31.6-54.2 83.9-54.2 137.1 0 8.3 1.3 16.7 1.9 19.2 3.2.6 8.4 1.3 13.5 1.3 44.3 0 100.2-29.6 131.4-68.9z"/>
    </svg>
  );
}

// ── Hero ───────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-copy">
        <span className="eyebrow"><span className="eyebrow-dot" />Now on the App Store · iOS</span>
        <h1 className="hero-h">
          Your voice,<br/>
          <em>your patterns,</em><br/>
          your growth.
        </h1>
        <p className="lede">
          Echo is a private place to speak freely, come back to what you felt, and notice
          the patterns that keep shaping your weeks. Record when you need space. Revisit
          when you need perspective.
        </p>

        <a
          className="hero-appstore-btn"
          href={APP_STORE_URL}
          target="_blank"
          rel="noopener"
        >
          <AppStoreBadge />
          Download on the App Store
        </a>
        <p className="updates-divider">or get notified about updates</p>
        <UpdatesForm />

        <div className="cta-meta">
          <div className="cta-meta-item">
            <span className="cta-meta-label">Free</span>
            <span className="cta-meta-value">Unlimited recording</span>
          </div>
          <div className="cta-meta-divider" aria-hidden="true"></div>
          <div className="cta-meta-item">
            <span className="cta-meta-label">Pro</span>
            <span className="cta-meta-value">Sunday Echo weekly</span>
          </div>
          <div className="cta-meta-divider" aria-hidden="true"></div>
          <div className="cta-meta-item">
            <span className="cta-meta-label">Privacy</span>
            <span className="cta-meta-value">Your voice stays yours</span>
          </div>
        </div>
      </div>

      <div className="hero-stage">
        <DeviceMockup />
      </div>
    </section>
  );
}

// ── Device mockup ──────────────────────────────────────────────────────────

function DeviceMockup() {
  const [t, setT] = useState(0);
  useEffect(() => {
    let id;
    const tick = () => { setT(p => (p + 1) % 1000); id = requestAnimationFrame(tick); };
    id = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(id);
  }, []);

  const bars = Array.from({ length: 28 }, (_, i) => {
    const phase = (t / 18) + i * 0.45;
    return 8 + Math.abs(Math.sin(phase)) * 26 + Math.abs(Math.sin(phase * 1.7)) * 12;
  });

  return (
    <div className="device-wrap">
      <div className="halo halo-1" aria-hidden="true"></div>
      <div className="halo halo-2" aria-hidden="true"></div>

      <div className="float-card cap-1">
        <span className="micro">Private ritual</span>
        <p>Press record, say the thing honestly, come back when you're ready to notice more.</p>
      </div>

      <div className="float-card cap-2">
        <span className="micro" style={{ color: "var(--accent)" }}>Pattern</span>
        <p>You sound gentlest with yourself after you've made it through the hardest part.</p>
      </div>

      <div className="phone-frame">
        <div className="phone-notch" aria-hidden="true"></div>
        <div className="phone-screen">
          <div className="screen-status">
            <span>9:41</span>
            <span className="status-dot"></span>
          </div>
          <div className="screen-brand">Echo</div>
          <div className="screen-sub">Sunday — 8:12 pm</div>

          <div className="record-stage">
            <div className="record-ring r1" aria-hidden="true"></div>
            <div className="record-ring r2" aria-hidden="true"></div>
            <div className="record-ring r3" aria-hidden="true"></div>
            <div className="record-btn" aria-hidden="true">
              <div className="record-btn-inner"></div>
            </div>
          </div>

          <div className="meter" aria-hidden="true">
            {bars.map((h, i) => <span key={i} style={{ height: `${h}px` }} />)}
          </div>

          <div className="screen-timestamp">00:42 · entry #38</div>

          <div className="screen-card">
            <span className="screen-card-eyebrow">This week's Echo</span>
            <p>"I only seem to soften once the day is already over."</p>
            <div className="screen-card-meta">
              <span>12 entries</span>
              <span className="screen-card-dot">·</span>
              <span>3 themes</span>
              <span className="screen-card-dot">·</span>
              <span>1 signal</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── What ───────────────────────────────────────────────────────────────────

function What() {
  const cards = [
    { eyebrow: "Record", title: "Speak before you edit yourself.", copy: "Capture thoughts, spirals, wins, grief, or a single minute you don't want to lose. No blank page. No pressure to write neatly first.", glyph: "rec" },
    { eyebrow: "Replay", title: "Hear your own voice again.", copy: "Come back to recordings and notice tone, hesitation, relief, or tenderness you missed in the moment. Your library, your archive.", glyph: "play" },
    { eyebrow: "Reflect", title: "Let the week speak back.", copy: "Sunday Echo surfaces one meaningful pattern so the insight feels earned, not algorithmically noisy. One thing. Held still.", glyph: "echo" },
  ];

  return (
    <section className="section" id="what">
      <div className="section-head">
        <span className="eyebrow"><span className="eyebrow-dot" />What Echo gives back</span>
        <h2>A voice memo app — if that's all you need.<br/><em>A reflective companion</em> when you want more.</h2>
        <p className="section-lede">
          Echo keeps the basics simple: record, replay, revisit. Then, when you want it,
          it adds a softer layer of pattern-finding and weekly reflection.
        </p>
      </div>
      <div className="trio">
        {cards.map((c, i) => (
          <article key={c.eyebrow} className="trio-card">
            <div className="trio-glyph" aria-hidden="true">
              {c.glyph === "rec"  && <RecordGlyph />}
              {c.glyph === "play" && <PlayGlyph />}
              {c.glyph === "echo" && <EchoGlyph />}
            </div>
            <span className="card-eyebrow">{String(i + 1).padStart(2, "0")} · {c.eyebrow}</span>
            <h3>{c.title}</h3>
            <p>{c.copy}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function RecordGlyph() {
  return (
    <svg viewBox="0 0 80 80" width="64" height="64">
      <circle cx="40" cy="40" r="34" fill="none" stroke="var(--accent)" strokeOpacity="0.25" strokeWidth="1"/>
      <circle cx="40" cy="40" r="24" fill="none" stroke="var(--accent)" strokeOpacity="0.4" strokeWidth="1"/>
      <circle cx="40" cy="40" r="12" fill="var(--accent)"/>
    </svg>
  );
}
function PlayGlyph() {
  return (
    <svg viewBox="0 0 80 80" width="64" height="64">
      <rect x="14" y="32" width="3" height="16" rx="1.5" fill="var(--accent)" opacity="0.4"/>
      <rect x="22" y="26" width="3" height="28" rx="1.5" fill="var(--accent)" opacity="0.7"/>
      <rect x="30" y="22" width="3" height="36" rx="1.5" fill="var(--accent)"/>
      <rect x="38" y="28" width="3" height="24" rx="1.5" fill="var(--accent)" opacity="0.8"/>
      <rect x="46" y="20" width="3" height="40" rx="1.5" fill="var(--accent)"/>
      <rect x="54" y="30" width="3" height="20" rx="1.5" fill="var(--accent)" opacity="0.6"/>
      <rect x="62" y="34" width="3" height="12" rx="1.5" fill="var(--accent)" opacity="0.35"/>
    </svg>
  );
}
function EchoGlyph() {
  return (
    <svg viewBox="0 0 80 80" width="64" height="64">
      <path d="M20 40 Q40 18 60 40 T100 40" fill="none" stroke="var(--accent)" strokeOpacity="0.25" strokeWidth="1.4"/>
      <path d="M14 46 Q34 26 54 46 T94 46" fill="none" stroke="var(--accent)" strokeOpacity="0.5" strokeWidth="1.4"/>
      <path d="M8 52 Q28 32 48 52 T88 52" fill="none" stroke="var(--accent)" strokeWidth="1.6"/>
      <circle cx="40" cy="40" r="3" fill="var(--accent)"/>
    </svg>
  );
}

// ── How ────────────────────────────────────────────────────────────────────

function How() {
  const steps = [
    { n: "01", time: "Any moment", title: "Press record.", copy: "A 2-minute voice note fits anywhere. Morning commute. Bed. The walk between two hard things. No prompts unless you want them." },
    { n: "02", time: "Later that day", title: "Replay yourself.", copy: "Your library holds everything. Hear the tenderness, hesitation, or relief you missed the first time around." },
    { n: "03", time: "Across the week", title: "Echo notices the patterns.", copy: "Transcripts, themes, recurring people, and tone shifts surface quietly in the background — nothing nags." },
    { n: "04", time: "Sunday morning", title: "Receive the weekly Echo.", copy: "One specific, calm insight worth sitting with. Not a flood of generic advice. One thing — held still long enough to feel true." },
  ];

  return (
    <section className="section how" id="how">
      <div className="section-head">
        <span className="eyebrow"><span className="eyebrow-dot" />How it works</span>
        <h2>Designed to feel like a gentle ritual,<br/><em>not another performance.</em></h2>
      </div>
      <ol className="howlist">
        {steps.map(s => (
          <li key={s.n} className="howstep">
            <div className="howstep-rail">
              <span className="howstep-n">{s.n}</span>
            </div>
            <div className="howstep-body">
              <span className="howstep-time">{s.time}</span>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ── Sunday Echo ────────────────────────────────────────────────────────────

function SundayEcho() {
  return (
    <section className="sunday" id="sunday">
      <div className="sunday-grid">
        <div className="sunday-copy">
          <span className="eyebrow on-dark"><span className="eyebrow-dot" />Sunday Echo</span>
          <h2 className="on-dark">
            One pattern.<br/>
            <em>Held still</em><br/>
            long enough to feel true.
          </h2>
          <p className="on-dark-muted">
            Every Sunday morning, Echo reads back across the week and surfaces a single,
            specific reflection in your own language. No infinite dashboards. No streaks
            that punish you. One letter, written quietly, when the noise has gone down.
          </p>
          <ul className="sunday-list">
            <li><span/>Themes are drawn from <em>what you actually said</em>, not a fixed taxonomy.</li>
            <li><span/>Recurring people, moods, and times-of-day surface only when meaningful.</li>
            <li><span/>You can mute, delete, or re-read any week. Your reflection stays yours.</li>
          </ul>
        </div>

        <div className="sunday-letter">
          <div className="letter-head">
            <span className="micro" style={{ color: "var(--paper-ink)", opacity: 0.6 }}>Sunday Echo · week 14</span>
            <span className="letter-time">delivered 7:00 am</span>
          </div>
          <h3 className="letter-h on-dark">
            A quieter week<br/>than you remember.
          </h3>
          <p className="letter-body on-dark-muted">
            Across <em>twelve</em> recordings this week, you talked about Mondays
            <em> four </em>times and never with the same voice. The version of you that
            finished Thursday sounded like the one you keep wanting to hear from on Sunday.
          </p>
          <div className="letter-pull on-dark">
            <span className="micro" style={{ color: "var(--accent)" }}>Phrase you returned to</span>
            <p>"I only seem to soften once the day is already over."</p>
          </div>
          <div className="letter-stats">
            <div><span className="micro">Themes</span><strong>3</strong></div>
            <div><span className="micro">Replays</span><strong>5</strong></div>
            <div><span className="micro">Mood arc</span><strong>↗</strong></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Pricing ────────────────────────────────────────────────────────────────

function Pricing() {
  return (
    <section className="section pricing" id="pricing">
      <div className="section-head">
        <span className="eyebrow"><span className="eyebrow-dot" />Pricing</span>
        <h2>The habit is free.<br/><em>The reflection</em> is the upgrade.</h2>
      </div>

      <div className="price-grid">
        <article className="price free">
          <div className="price-top">
            <span className="card-eyebrow">Free, forever</span>
            <h3>Voice memo, but kinder.</h3>
            <div className="price-amount"><span className="amt">$0</span><span className="per">/ month</span></div>
          </div>
          <ul>
            <li>Unlimited voice entries</li>
            <li>Replay anywhere in your library</li>
            <li>Daily prompts you can ignore</li>
            <li>Light + dark, made for low-light evenings</li>
          </ul>
          <a className="price-cta secondary" href={APP_STORE_URL} target="_blank" rel="noopener">Download free</a>
        </article>

        <article className="price pro">
          <span className="price-tag">Most chosen</span>
          <div className="price-top">
            <span className="card-eyebrow on-pro">Echo Pro</span>
            <h3>Unlock the reflective layer.</h3>
            <div className="price-amount"><span className="amt">$9.99</span><span className="per">/ month · or $59.99/yr</span></div>
          </div>
          <ul>
            <li>Transcripts and AI reflection on individual entries</li>
            <li>Themes, people, and recurring pattern signals</li>
            <li>Sunday Echo — a weekly letter in your voice</li>
            <li>Mood arc and reflection history</li>
            <li>Priority support, fewer assumptions</li>
          </ul>
          <a className="price-cta primary" href={APP_STORE_URL} target="_blank" rel="noopener">Download &amp; upgrade</a>
        </article>
      </div>

      <p className="pricing-foot">
        Free is the foundation. Pro funds the work — including keeping reflection private,
        consent-first, and free from ads.
      </p>
    </section>
  );
}

// ── Quote ──────────────────────────────────────────────────────────────────

function Quote() {
  return (
    <section className="quote-section">
      <blockquote>
        <p>
          "Not everything important arrives in clean paragraphs.
          That's why Echo starts with <em>voice</em>."
        </p>
        <footer>
          <span className="quote-rule" aria-hidden="true"></span>
          A note from the makers
        </footer>
      </blockquote>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────────────

function Faq() {
  const items = [
    { q: "Is Echo a therapy app?", a: "No. Echo is a reflective practice — a place to record, replay, and notice your own patterns. It is not therapy, crisis care, or medical advice. If you're in distress, please reach out to a qualified professional." },
    { q: "Where do my recordings live?", a: "Your entries sync to your account so they travel between your devices. They're never used to train external models. You can export or delete any entry — or your whole archive — at any time." },
    { q: "Will Echo nag me with streaks and notifications?", a: "No. Echo's defaults are quiet. One optional reminder a day, one optional Sunday letter. Nothing red-bubble. Nothing guilt-trippy." },
    { q: "Can I use Echo without paying?", a: "Yes. Recording and replay are free forever — the core habit shouldn't sit behind a paywall. Pro adds transcripts, themes, and the Sunday Echo letter." },
  ];
  const [open, setOpen] = useState(0);

  return (
    <section className="section faq" id="faq">
      <div className="section-head">
        <span className="eyebrow"><span className="eyebrow-dot" />Common questions</span>
        <h2>Quiet by default.<br/><em>Honest</em> about what it is.</h2>
      </div>
      <div className="faqlist">
        {items.map((it, i) => (
          <div key={i} className={`faqitem${open === i ? " open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faqitem-q">
              <span>{it.q}</span>
              <span className="faqitem-toggle" aria-hidden="true">{open === i ? "–" : "+"}</span>
            </div>
            {open === i && <p className="faqitem-a">{it.a}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Final CTA ──────────────────────────────────────────────────────────────

function FinalCta() {
  return (
    <section className="finalcta">
      <div className="finalcta-inner">
        <span className="eyebrow"><span className="eyebrow-dot" />Now available on iOS</span>
        <h2>Bring your voice.<br/><em>We'll keep the room quiet.</em></h2>
        <a className="finalcta-btn" href={APP_STORE_URL} target="_blank" rel="noopener">Download on App Store <span aria-hidden="true">→</span></a>
        <p className="finalcta-note">
          Free to download · Built for gentle reflection, not pressure
        </p>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <a className="brand" href="#top">
            <span className="brand-mark" aria-hidden="true">
              <span className="brand-dot"></span>
              <span className="brand-ring"></span>
            </span>
            <span className="brand-word">Echo</span>
          </a>
          <p>Reflective voice journaling.<br/>Your voice, your patterns, your growth.</p>
        </div>
        <div className="footer-col">
          <span className="micro">Product</span>
          <a href="#what">Features</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="footer-col">
          <span className="micro">Support</span>
          <a href="/support">Support</a>
          <a href="/status">Service status</a>
        </div>
        <div className="footer-col">
          <span className="micro">Legal</span>
          <a href="/privacy">Privacy policy</a>
          <a href="/terms">Terms of service</a>
          <a href="/disclaimer">Disclaimer</a>
        </div>
      </div>
      <div className="footer-foot">
        <span>© 2026 Echo. Built quietly.</span>
        <span>Echo is a reflective practice, not therapy or crisis care.</span>
      </div>
    </footer>
  );
}

// ── App ────────────────────────────────────────────────────────────────────

function App() {
  const [theme, setTheme] = useState(getInitialTheme);

  const toggleTheme = () => {
    setTheme(t => {
      const next = t === "dark" ? "light" : "dark";
      try { localStorage.setItem("echo.theme.preference", next); } catch {}
      return next;
    });
  };

  const vars = buildVars(theme);

  return (
    <div className="root" style={vars} data-theme={theme}>
      <div className="grain" aria-hidden="true"></div>
      <div className="page-halo h-1" aria-hidden="true"></div>
      <div className="page-halo h-2" aria-hidden="true"></div>

      <div className="shell">
        <Topbar theme={theme} onToggleTheme={toggleTheme} />
        <Hero />
      </div>

      <div className="shell">
        <What />
        <How />
      </div>

      <SundayEcho />

      <div className="shell">
        <Pricing />
        <Quote />
        <Faq />
        <FinalCta />
      </div>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
