/* ============================================================
   METABOLE — Sections C: Report, Privacy, Pricing, FAQ, CTA, Footer
   ============================================================ */

/* ---- Provider-ready report ---- */
function ReportDoc({ active }) {
  const doses = [
    ["May 06", "Tirzepatide", "5.0 mg", "L abdomen", "On time"],
    ["May 13", "Tirzepatide", "5.0 mg", "R thigh", "On time"],
    ["May 20", "Tirzepatide", "7.5 mg", "L arm", "+1 day"],
    ["May 27", "Tirzepatide", "7.5 mg", "R abdomen", "On time"],
  ];
  return (
    <div style={{ background: "#fff", borderRadius: 16, boxShadow: "var(--sh-3)", border: "1px solid var(--line)", overflow: "hidden" }}>
      {/* doc header */}
      <div style={{ padding: "20px 24px", borderBottom: "2px solid var(--green)", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <Logo size={18} />
          <div style={{ marginTop: 8, fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em" }}>Provider Summary</div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 2 }}>APR 29 – MAY 27, 2026 · 4 WEEKS</div>
        </div>
        <div style={{ textAlign: "right", fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.7 }}>
          <div><b style={{ color: "var(--ink)" }}>Patient</b> · A. Rivera</div>
          <div><b style={{ color: "var(--ink)" }}>Protocol</b> · Tirzepatide, weekly</div>
          <div><b style={{ color: "var(--ink)" }}>Provider</b> · ____________</div>
        </div>
      </div>
      <div className="m-report-body" style={{ padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
        {/* weight */}
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 8 }}>Weight trend</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span style={{ fontSize: 24, fontWeight: 700 }}>193.6 lb</span>
            <span style={{ fontSize: 13, color: "var(--green)", fontWeight: 600 }}>−9.7 lb / 4wk</span>
          </div>
          <WeightTrend active={active} h={108} compact />
        </div>
        {/* adherence + vitals */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-3)", textTransform: "uppercase" }}>This period</div>
          <div style={{ display: "flex", gap: 18 }}>
            <Ring active={active} pct={100} value="4/4" label="DOSES" size={56} />
            <Ring active={active} pct={91} value="112g" label="PROTEIN" size={56} color="var(--sage)" />
            <Ring active={active} pct={78} value="78%" label="HYDRATION" size={56} color="var(--clay)" />
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
            <b style={{ color: "var(--ink)" }}>Side effects:</b> Nausea mild (wk 3 dose ↑), resolving. Fatigue mild. No constipation reported.
          </div>
        </div>
        {/* dose table */}
        <div style={{ gridColumn: "span 2" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 8 }}>Dose history</div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead>
              <tr style={{ color: "var(--ink-3)", textAlign: "left" }}>
                {["Date", "Compound", "Dose", "Site", "Timing"].map(h => <th key={h} style={{ fontWeight: 500, padding: "6px 4px", borderBottom: "1px solid var(--line)" }}>{h}</th>)}
              </tr>
            </thead>
            <tbody>
              {doses.map((d, i) => (
                <tr key={i} style={{ borderBottom: "1px solid var(--line-2)" }}>
                  {d.map((c, j) => (
                    <td key={j} style={{ padding: "8px 4px", fontWeight: j === 0 ? 600 : 400, fontFamily: j === 2 ? "var(--mono)" : "inherit", color: j === 4 && c !== "On time" ? "var(--clay-deep)" : "var(--ink)" }}>{c}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div style={{ padding: "12px 24px", background: "var(--surface-2)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11, color: "var(--ink-3)" }}>
        <span className="mono">REFILL · 2 PENS REMAINING · DUE JUN 18</span>
        <span>Generated by Metabole · Page 1 of 3</span>
      </div>
    </div>
  );
}

function ProviderReport() {
  const [ref, inView] = useInView({ threshold: 0.15 });
  return (
    <section id="reports" className="section" style={{ padding: "80px 0" }} ref={ref}>
      <div className="wrap">
        <div className="m-split" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 48, alignItems: "center" }}>
          <div>
            <SectionHead eyebrow="Provider-ready reports" title={<>Walk in prepared.<br />Walk out understood.</>} lead="One tap turns weeks of doses, weight, side effects, protein, hydration, sleep, and refill status into a clean PDF your doctor or telehealth provider can read in seconds." />
            <ul style={{ listStyle: "none", padding: 0, margin: "26px 0 0", display: "flex", flexDirection: "column", gap: 13 }}>
              {["Dose history with sites, timing & adherence", "Weight trend and body measurements", "Side-effect summary your provider can act on", "Refill status so nothing lapses"].map(t => (
                <li key={t} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 15.5 }}>
                  <span style={{ display: "grid", placeItems: "center", width: 22, height: 22, borderRadius: 99, background: "var(--mint)", flexShrink: 0, marginTop: 1 }}><Icon name="check" size={14} color="var(--green-deep)" /></span>
                  {t}
                </li>
              ))}
            </ul>
            <a href="#cta" className="btn btn-primary" style={{ marginTop: 28 }}><Icon name="doc" size={17} color="#F4F1EA" /> See a sample report</a>
          </div>
          <Reveal delay={80}><ReportDoc active={inView} /></Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- Privacy manifesto ---- */
function Privacy() {
  const pillars = [
    ["lock", "No ad tracking", "Zero third-party trackers. We don't know — and don't want to know — who you are."],
    ["shield", "No selling health data", "Your data is never sold, rented, or shared for advertising. Ever."],
    ["doc", "Export anytime", "Your full history, yours to take. PDF or open data, one tap away."],
    ["minus", "Delete anytime", "One button erases everything, on every device. No retention, no questions."],
  ];
  return (
    <section id="privacy" className="section" style={{ padding: "84px 0", background: "var(--green-deep)", color: "#E7ECE2", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: "auto auto -30% -10%", width: 600, height: 600, background: "radial-gradient(circle, rgba(127,167,146,0.25), transparent 70%)", pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ maxWidth: 720 }}>
          <Reveal><span className="eyebrow" style={{ color: "var(--mint-2)" }}>Privacy-first, by architecture</span></Reveal>
          <Reveal delay={60}>
            <h2 className="h2" style={{ marginTop: 18, color: "#F2F5EE" }}>
              Your health data stays <span className="serif-em" style={{ color: "var(--clay-soft)" }}>yours.</span> Kept in your private Metabole account, encrypted in transit, never sold — and yours to export or delete anytime.
            </h2>
          </Reveal>
        </div>
        <div className="m-privacy-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: 46 }}>
          {pillars.map(([ic, t, d], i) => (
            <Reveal key={t} delay={i * 80} style={{ padding: "24px 22px", borderRadius: 20, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.10)" }}>
              <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: 12, background: "rgba(255,255,255,0.08)" }}><Icon name={ic} size={22} color="var(--clay-soft)" /></span>
              <h3 style={{ fontSize: 18, marginTop: 16, color: "#F2F5EE" }}>{t}</h3>
              <p style={{ fontSize: 13.5, color: "rgba(231,236,226,0.72)", marginTop: 8, lineHeight: 1.5 }}>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Pricing ---- */
function Pricing() {
  const [annual, setAnnual] = useState(true);
  const premiumFeatures = ["Everything in Free", "Unlimited history & photos", "Provider-ready PDF reports", "Compound level estimator", "AI insights & correlations", "Apple Health sync", "Sleep tracking & heatmaps", "Achievements & themes"];
  const freeFeatures = ["Dose logging & schedule", "Smart reminders", "Injection-site rotation", "Basic weight log", "Side-effect journal"];
  return (
    <section id="pricing" className="section" style={{ padding: "84px 0" }}>
      <div className="wrap">
        <SectionHead align="center" eyebrow="Simple pricing" title="Less than one pen's copay." lead="Start free. Upgrade when you want reports, insights, and the full picture." />
        <div style={{ display: "flex", justifyContent: "center", marginTop: 26 }}>
          <div style={{ display: "inline-flex", padding: 4, borderRadius: 99, background: "var(--paper-2)", boxShadow: "inset 0 0 0 1px var(--line)" }}>
            {[["Monthly", false], ["Annual", true]].map(([l, v]) => (
              <button key={l} onClick={() => setAnnual(v)} style={{
                padding: "8px 20px", borderRadius: 99, fontSize: 14.5, fontWeight: 600,
                background: annual === v ? "var(--surface)" : "transparent",
                color: annual === v ? "var(--ink)" : "var(--ink-2)",
                boxShadow: annual === v ? "var(--sh-1)" : "none", transition: "all .2s",
              }}>{l}{v && <span style={{ marginLeft: 7, fontSize: 11, color: "var(--clay-deep)", fontWeight: 700 }}>SAVE 50%</span>}</button>
            ))}
          </div>
        </div>

        <div className="m-pricing-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 36, maxWidth: 880, margin: "36px auto 0" }}>
          {/* Free */}
          <Reveal className="card price-card">
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)" }}>Free</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 12 }}>
              <span style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.03em" }}>$0</span>
              <span style={{ color: "var(--ink-3)", fontSize: 15 }}>forever</span>
            </div>
            <p style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 8 }}>The essentials, done right. No trial, no card.</p>
            <a href="#cta" className="btn btn-ghost" style={{ width: "100%", marginTop: 20 }}>Get started</a>
            <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "flex", flexDirection: "column", gap: 11 }}>
              {freeFeatures.map(f => (
                <li key={f} style={{ display: "flex", gap: 10, fontSize: 14.5, color: "var(--ink-2)" }}>
                  <Icon name="check" size={17} color="var(--sage)" style={{ flexShrink: 0 }} /> {f}
                </li>
              ))}
            </ul>
          </Reveal>
          {/* Premium */}
          <Reveal delay={80} className="price-card" style={{ background: "var(--green)", color: "#E9EEE3", boxShadow: "var(--sh-3)", position: "relative", overflow: "hidden" }}>
            <span style={{ position: "absolute", top: 20, right: 20, fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", padding: "5px 11px", borderRadius: 99, background: "var(--clay)", color: "#fff" }}>MOST POPULAR</span>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mint-2)" }}>Premium</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 12 }}>
              <span style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.03em", color: "#fff" }}>${annual ? "3.99" : "7.99"}</span>
              <span style={{ color: "rgba(233,238,227,0.7)", fontSize: 15 }}>/ month</span>
            </div>
            <p style={{ fontSize: 14, color: "rgba(233,238,227,0.8)", marginTop: 8 }}>{annual ? "Billed $47.99/year — under a dollar a week." : "Billed monthly. Cancel anytime."}</p>
            <a href="/signup" className="btn btn-light" style={{ width: "100%", marginTop: 20 }}>Start free trial</a>
            <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "flex", flexDirection: "column", gap: 11 }}>
              {premiumFeatures.map(f => (
                <li key={f} style={{ display: "flex", gap: 10, fontSize: 14.5, color: "rgba(233,238,227,0.92)" }}>
                  <Icon name="check" size={17} color="var(--clay-soft)" style={{ flexShrink: 0 }} /> {f}
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
        <p className="tiny muted" style={{ textAlign: "center", marginTop: 22 }}>Clinics &amp; providers — per-seat plans available. <a href="#cta" style={{ color: "var(--green)", fontWeight: 600 }}>Talk to us →</a></p>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
function FaqItem({ q, a, open, onToggle }) {
  const ref = useRef(null);
  const [h, setH] = useState(0);
  useEffect(() => { if (ref.current) setH(open ? ref.current.scrollHeight : 0); }, [open]);
  return (
    <div className="faq-item">
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        {q}
        <span style={{ display: "grid", placeItems: "center", width: 30, height: 30, borderRadius: 99, background: "var(--surface-2)", flexShrink: 0, transition: "transform .3s", transform: open ? "rotate(45deg)" : "none" }}>
          <Icon name="plus" size={17} color="var(--green)" />
        </span>
      </button>
      <div className="faq-a" style={{ height: h }}>
        <div ref={ref} style={{ paddingBottom: 22, paddingRight: 46, color: "var(--ink-2)", fontSize: 15.5, lineHeight: 1.6 }}>{a}</div>
      </div>
    </div>
  );
}
function Faq() {
  const [open, setOpen] = useState(window.__printMode ? "all" : 0);
  const items = [
    ["Is Metabole medical advice?", "No. Metabole is a tracking and organization tool. Pep Bot and our Research Library are educational only, and the compound estimator shows population-average estimates — not your actual blood levels. Always follow your provider's instructions."],
    ["Does it work with compounded medications?", "Yes — that's a core focus. We don't tell you what to take; we help you record exactly what your provider prescribed: concentration, syringe units, label photos, and confirmation prompts to reduce confusion and dosing errors."],
    ["Which medications and peptides are supported?", "Ozempic, Wegovy, Mounjaro, Zepbound, compounded semaglutide and tirzepatide, oral GLP-1s, and 75+ peptide compound profiles. If your provider prescribed it, you can log it."],
    ["Where is my data stored?", "In your private Metabole account on our secure servers. The mobile app keeps your data on-device by default and syncs to your account only when you turn sync on. We never sell it, and you can export or delete everything at any time."],
    ["What about plateaus and maintenance?", "Most apps only care about the scale going down. Metabole helps you handle plateaus, protect muscle by keeping protein up, manage side effects, and prepare for long-term maintenance or discontinuation conversations with your provider."],
    ["Can I cancel anytime?", "Yes. Premium is month-to-month or annual, cancel whenever. Your Free account — and all your data — stays."],
  ];
  return (
    <section id="faq" className="section" style={{ padding: "80px 0" }}>
      <div className="wrap" style={{ maxWidth: 860 }}>
        <SectionHead align="center" eyebrow="Questions" title="The honest answers." />
        <div style={{ marginTop: 36 }}>
          {items.map(([q, a], i) => (
            <FaqItem key={i} q={q} a={a} open={open === "all" || open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Final CTA ---- */
function FinalCTA() {
  return (
    <section id="cta" className="section" style={{ padding: "10px 0 90px" }}>
      <div className="wrap">
        <Reveal className="section" style={{ position: "relative", overflow: "hidden", background: "var(--surface)", borderRadius: 32, padding: "70px 40px", textAlign: "center", boxShadow: "var(--sh-3)", border: "1px solid var(--line-2)" }}>
          <div className="glow-mint" style={{ position: "absolute", inset: "auto 0 -40% 0", height: 500, pointerEvents: "none" }} />
          <div style={{ position: "relative" }}>
            <Logo size={28} text={false} />
            <h2 className="h2" style={{ marginTop: 20, maxWidth: 640, marginInline: "auto" }}>The safest, cleanest, most trusted GLP-1 companion for real patients.</h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: 480, marginInline: "auto" }}>Free to start. Private by design. Your protocol, finally in one calm place.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 30, flexWrap: "wrap" }}>
              <a href="/signup" className="btn btn-primary" style={{ padding: "16px 26px", fontSize: 17 }}>Sign up</a>
              <a href="#features" className="btn btn-ghost" style={{ padding: "16px 24px" }}>Explore features</a>
            </div>
            <p className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 22, letterSpacing: "0.04em" }}>iOS 17+ · iPhone &amp; iPad · Android in beta</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer() {
  const cols = [
    ["Product", ["Features", "Compound estimator", "Provider reports", "Pricing", "What's new"]],
    ["Company", ["About", "Privacy", "Security", "Press", "Contact"]],
    ["Resources", ["Research library", "Help center", "Terms", "DPA", "Data export"]],
  ];
  return (
    <footer style={{ background: "var(--paper-2)", borderTop: "1px solid var(--line)", paddingTop: 56 }}>
      <div className="wrap">
        <div className="m-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 32 }}>
          <div>
            <Logo />
            <p style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 14, maxWidth: 280, lineHeight: 1.55 }}>The private companion for people on GLP-1 and peptide protocols. You, in control.</p>
            <div style={{ marginTop: 18 }}><PrivacyChips /></div>
          </div>
          {cols.map(([h, links]) => (
            <div key={h}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14 }}>{h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {links.map(l => { const hrefs = { "Privacy": "/privacy", "Terms": "/terms", "DPA": "/dpa", "Research library": "/app/library" }; return <li key={l}><a href={hrefs[l] || "#"} className="navlink" style={{ fontSize: 14.5 }}>{l}</a></li>; })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 44, padding: "20px 22px", borderRadius: 16, background: "var(--surface)", border: "1px solid var(--line)", display: "flex", gap: 13, alignItems: "flex-start" }}>
          <Icon name="shield" size={20} color="var(--ink-3)" style={{ flexShrink: 0, marginTop: 1 }} />
          <p style={{ fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.55 }}>
            <b style={{ color: "var(--ink-2)" }}>Not medical advice.</b> Metabole is a personal tracking tool and does not provide medical, diagnostic, or dosing advice. Educational content, the Pep Bot assistant, AI insights, and compound estimates are for informational reference only and are not a substitute for professional medical care. Always consult your licensed provider about your medications and protocol. Metabole is not affiliated with the manufacturers of Ozempic, Wegovy, Mounjaro, or Zepbound.
          </p>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "26px 0", marginTop: 24, borderTop: "1px solid var(--line)", flexWrap: "wrap", gap: 12 }}>
          <span className="tiny muted">© 2026 Metabole. All rights reserved.</span>
          <span className="tiny muted">Made for real patients. Privacy isn't a feature — it's the foundation.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProviderReport, Privacy, Pricing, Faq, FinalCTA, Footer });
