/* Peptino — landing page part 2: calculators, how, gallery, privacy, cta, footer */

/* ---------------- Calculators highlight (split, live phones) ---------------- */
function CalcLi({ icon, title, desc }) {
  return (
    <div className="lp-li">
      <div className="lp-li-ic"><Icon name={icon} size={15} sw={2.4} /></div>
      <div><b>{title}</b><p>{desc}</p></div>
    </div>
  );
}
function Calculators() {
  return (
    <section className="lp-sec tint" id="calculators">
      <div className="lp-wrap">
        <div className="lp-split">
          <div className="lp-rev">
            <span className="lp-kicker">Math you can trust</span>
            <h2 className="lp-h2" style={{ fontSize: 40 }}>The numbers, handled.</h2>
            <p className="lp-lead">No guesswork. Peptino does the arithmetic on the values you enter — and shows its work, so every dose is yours to verify.</p>
            <CalcLi icon="flask" title="Reconstitution" desc="Vial amount + BAC water → concentration, units to draw and total doses." />
            <CalcLi icon="calculator" title="Unit converter" desc="mcg ↔ mg ↔ mL ↔ IU with a live quick-reference table." />
            <CalcLi icon="book" title="Lab reference" desc="Storage, syringe and needle guidance from published literature." />
          </div>
          <div className="lp-split-phones lp-rev">
            <Device scale={0.5} island><ScreenRecon theme="light" /></Device>
            <Device scale={0.5} island><ScreenConverter theme="light" /></Device>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- How it works ---------------- */
function HowItWorks() {
  const steps = [
    ['Add compounds & vials', 'Set up your fridge — concentration, reconstitution and expiry tracked automatically.'],
    ['Build protocols', 'Pick a schedule and dose. Peptino reminds you exactly when each one is due.'],
    ['Log & track', 'Tap to log each dose, watch your adherence and progress build over time.'],
  ];
  return (
    <section className="lp-sec" id="how">
      <div className="lp-wrap">
        <div className="lp-rev lp-head-center">
          <span className="lp-kicker">How it works</span>
          <h2 className="lp-h2">Up and running in three steps.</h2>
        </div>
        <div className="lp-steps">
          {steps.map((s, i) => (
            <div className="lp-step lp-rev" key={i}>
              <div className="lp-step-n">{i + 1}</div>
              <h3>{s[0]}</h3>
              <p>{s[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Gallery (dark band, live screens) ---------------- */
function Gallery() {
  const items = [
    ['Today', <ScreenToday theme="dark" />],
    ['Protocols', <ScreenProtocols theme="dark" />],
    ['Fridge', <ScreenInventory theme="dark" />],
    ['Compound', <ScreenDetail theme="dark" />],
    ['Progress', <ScreenProgress theme="dark" />],
    ['Reconstitution', <ScreenRecon theme="dark" />],
  ];
  return (
    <section className="lp-gallery" id="gallery">
      <div className="lp-wrap">
        <div className="lp-rev lp-head-center">
          <span className="lp-kicker">Designed for the daily loop</span>
          <h2 className="lp-h2">Calm, fast, and built to read at a glance.</h2>
          <p className="lp-lead">Every screen in a focused dark interface — with a light theme too.</p>
        </div>
      </div>
      <div className="lp-wrap">
        <div className="lp-gal-row lp-rev">
          {items.map(([cap, el], i) => (
            <div className="lp-gal-item" key={i}>
              <Device scale={0.52} island>{el}</Device>
              <span className="lp-gal-cap">{cap}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Privacy ---------------- */
function Privacy() {
  return (
    <section className="lp-sec tint">
      <div className="lp-wrap lp-privacy">
        <div className="lp-rev">
          <span className="lp-kicker">Private by design</span>
          <h2 className="lp-h2" style={{ fontSize: 40 }}>Your data stays yours.</h2>
          <p className="lp-lead">Peptino works without an account and keeps your log on your device. No selling, no profiling, no ads — just your data, under your control.</p>
        </div>
        <div className="lp-priv-cards lp-rev">
          <div className="lp-priv-card"><div className="ic"><Icon name="lock" size={20} /></div><b>On-device</b><p>Your protocols and log live locally — not on someone else's server.</p></div>
          <div className="lp-priv-card"><div className="ic"><Icon name="person" size={20} /></div><b>No account</b><p>Start tracking immediately. Sign in only if you want backup.</p></div>
          <div className="lp-priv-card"><div className="ic"><Icon name="shield" size={20} /></div><b>No ads</b><p>No trackers, no profiling, no third-party advertising. Ever.</p></div>
          <div className="lp-priv-card"><div className="ic"><Icon name="download" size={20} /></div><b>Export anytime</b><p>Your full history as CSV whenever you want it. No lock-in.</p></div>
        </div>
      </div>
      <div className="lp-wrap">
        <div className="lp-disc lp-rev" style={{ marginTop: 36 }}>
          <span className="ic"><Icon name="shield" size={22} /></span>
          <p><b>For research &amp; educational use.</b> Peptino is a logging and reference tool. It does not provide medical advice, dosing recommendations or diagnosis, and is not a substitute for a qualified healthcare professional. All calculations are arithmetic on values you enter — verify everything independently.</p>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Disclaimer (merged into Privacy — kept as no-op) ---------------- */
function Disclaimer() {
  return null;
}

/* ---------------- Final CTA ---------------- */
function FinalCTA() {
  return (
    <section className="lp-cta" id="download">
      <div className="lp-hero-glow" style={{ top: '-420px' }} />
      <div className="lp-wrap" style={{ position: 'relative' }}>
        <div className="lp-rev">
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 26 }}>
            <DropletGlyph size={64} variant="level" />
          </div>
          <h2 className="lp-h2" style={{ fontSize: 52, maxWidth: 720 }}>Start tracking with intent.</h2>
          <p className="lp-lead" style={{ color: '#A1A4AD', margin: '20px auto 0', textAlign: 'center' }}>Free to download. Private from the first tap.</p>
          <div className="lp-cta-actions">
            <StoreBadge kind="apple" dark />
            <StoreBadge kind="play" dark />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const cols = [
    ['Product', ['Features', 'How it works', 'Calculators', 'Screens']],
    ['Company', [['Privacy Policy', '/privacy.html'], ['Terms', '/terms.html'], ['Contact', 'mailto:contact@peptino.app']]],
    ['Resources', ['Lab reference', 'Support', 'Research notice']],
  ];
  return (
    <footer className="lp-foot">
      <div className="lp-wrap lp-foot-in">
        <div style={{ maxWidth: 280 }}>
          <Wordmark dark size={20} />
          <p style={{ color: '#6E7480', fontSize: 14, lineHeight: 1.6, margin: '16px 0 0' }}>The calm, precise way to track peptide protocols. Private and on your device.</p>
        </div>
        <div className="lp-foot-cols">
          {cols.map(([h, links], i) => (
            <div className="lp-foot-col" key={i}>
              <h4>{h}</h4>
              {links.map((l, j) => Array.isArray(l) ? <a href={l[1]} key={j}>{l[0]}</a> : <a href="#" key={j}>{l}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="lp-foot-bot">
        <span>© 2026 Peptino. For research & educational use only.</span>
        <span>Made for people who track with intent.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { CalcLi, Calculators, HowItWorks, Gallery, Privacy, Disclaimer, FinalCTA, Footer });