/* Peptino — landing page React components. Reuses screens-*.jsx live. */

/* ---------------- Device frame (renders a live 390×844 screen, scaled) ---------------- */
function Device({ children, scale = 0.6, island = true }) {
  const W = 390, H = 844, b = 12, r = 52;
  return (
    <div className="lp-device" style={{
      width: (W + b * 2) * scale, height: (H + b * 2) * scale, borderRadius: r * scale, padding: 0,
    }}>
      <div style={{ width: W + b * 2, height: H + b * 2, transform: `scale(${scale})`, transformOrigin: 'top left', borderRadius: r, padding: b, background: '#0c0d0f', boxSizing: 'border-box' }}>
        <div className="scr" style={{ width: W, height: H, borderRadius: r - b }}>
          {children}
          {island ? <div className="lp-island" /> : null}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Wordmark ---------------- */
function Wordmark({ dark = true, size = 21 }) {
  return (
    <span className="lp-word">
      <DropletGlyph size={Math.round(size * 1.15)} variant="solid" />
      <b style={{ fontSize: size, color: dark ? '#F4F6F7' : '#14161B' }}>
        Peptino<span style={{ color: dark ? '#C4F23D' : '#A6D81F' }}>.</span>
      </b>
    </span>
  );
}

/* ---------------- Store badges ---------------- */
function AppleMark({ c = 'currentColor' }) {
  return (
    <svg width="22" height="26" viewBox="0 0 22 26" fill={c}>
      <path d="M18.3 19.4c-.3.8-.8 1.6-1.3 2.3-.7 1-1.3 1.7-1.7 2-.7.6-1.4.9-2.2.9-.6 0-1.2-.16-2-.5-.8-.33-1.5-.5-2.2-.5-.7 0-1.4.17-2.2.5-.8.34-1.5.52-2 .54-.77.03-1.5-.3-2.2-.97-.45-.36-1.1-1.1-1.8-2.2C-.3 20.2-.9 18.4-1 16.5c-.1-1.9.3-3.5 1.2-4.9.7-1.1 1.7-1.9 2.9-2.5 1.2-.6 2.3-.6 3.5-.5.7.1 1.5.3 2.5.6.9.3 1.5.4 1.7.4.2 0 .9-.2 2-.5 1-.3 1.9-.4 2.6-.35 1.9.15 3.4.9 4.4 2.3-1.7 1-2.5 2.5-2.5 4.4 0 1.5.5 2.7 1.6 3.7.5.5 1 .8 1.6 1-.1.4-.3.8-.5 1.2zM14.6 1c0 1.1-.4 2.2-1.2 3.1-1 1.1-2.1 1.8-3.4 1.7 0-.1 0-.3 0-.4 0-1.1.5-2.2 1.3-3.1.4-.45.9-.82 1.6-1.12C13.1.92 13.7.76 14.3.7c0 .1 0 .2 0 .3z"/>
    </svg>
  );
}
function PlayMark() {
  return (
    <svg width="22" height="24" viewBox="0 0 22 24">
      <defs>
        <linearGradient id="pg1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#00D2FF"/><stop offset="1" stopColor="#01B5E8"/></linearGradient>
      </defs>
      <path d="M1.2 1.1C.9 1.4.8 1.9.8 2.5v19c0 .6.1 1.1.4 1.4l10.6-10.4L1.2 1.1z" fill="url(#pg1)"/>
      <path d="M16 8.2l-3.5-2L2.2 1c-.4-.25-.8-.3-1-.2L11.8 12.5 16 8.2z" fill="#00F076"/>
      <path d="M16 16.8l-4.2-4.3L1.2 23c.2.1.6.05 1-.2l10.3-5.9L16 16.8z" fill="#FF3A44"/>
      <path d="M20.4 10.7L16 8.2l-4.2 4.3 4.2 4.3 4.4-2.5c1-.6 1-2.4 0-3.6z" fill="#FFC900"/>
    </svg>
  );
}
function StoreBadge({ kind, dark = false }) {
  const apple = kind === 'apple';
  return (
    <a className={'lp-badge' + (dark ? ' dark' : '')} href="#download">
      {apple ? <AppleMark c={dark ? '#fff' : '#0A0A0B'} /> : <PlayMark />}
      <span className="lp-badge-tx">
        <small>{apple ? 'Download on the' : 'Get it on'}</small>
        <b>{apple ? 'App Store' : 'Google Play'}</b>
      </span>
    </a>
  );
}

/* ---------------- Nav ---------------- */
function Nav() {
  return (
    <nav className="lp-nav" id="lp-nav">
      <div className="lp-nav-bg" />
      <div className="lp-nav-in">
        <Wordmark dark size={21} />
        <div className="lp-nav-links">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
          <a href="#calculators">Calculators</a>
          <a href="#gallery">Screens</a>
        </div>
        <a className="lp-nav-cta" href="#download"><Icon name="download" size={16} sw={2.2} /> Get the app</a>
      </div>
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero() {
  return (
    <section className="lp-hero">
      <div className="lp-hero-glow" />
      <div className="lp-hero-glow b" />
      <div className="lp-wrap lp-hero-in">
        <div className="lp-rev in">
          <span className="lp-eyebrow"><DropletGlyph size={16} variant="solid" /> Peptide tracking, done right</span>
          <h1 className="lp-h1">Every dose.<br/>Every vial.<br/><em>Perfectly tracked.</em></h1>
          <p className="lp-sub">Peptino is the calm, precise way to log protocols, manage your fridge, and run the numbers — private and entirely on your device.</p>
          <div className="lp-hero-actions">
            <StoreBadge kind="apple" />
            <StoreBadge kind="play" />
          </div>
          <div className="lp-trust">
            <span><Icon name="lock" size={15} color="#C4F23D" /> Private by design</span>
            <span><Icon name="check" size={15} color="#C4F23D" sw={2.4} /> No account required</span>
            <span><Icon name="droplet" size={15} color="#C4F23D" /> Free to start</span>
          </div>
        </div>
        <div className="lp-hero-phone lp-rev in">
          <Device scale={0.66} island><ScreenToday theme="dark" /></Device>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Features ---------------- */
function Feat({ icon, tint, title, desc, tags }) {
  return (
    <div className="lp-feat lp-rev">
      <div className="lp-feat-ic" style={{ background: tint.bg, color: tint.fg }}><Icon name={icon} size={26} sw={1.9} /></div>
      <h3>{title}</h3>
      <p>{desc}</p>
      <div className="lp-feat-tags">{tags.map((t, i) => <span className="lp-tag" key={i}>{t}</span>)}</div>
    </div>
  );
}
function Features() {
  return (
    <section className="lp-sec" id="features">
      <div className="lp-wrap">
        <div className="lp-rev">
          <span className="lp-kicker">Everything in one place</span>
          <h2 className="lp-h2">A complete system for serious tracking.</h2>
          <p className="lp-lead">Four tools that work together — built around how protocols actually run.</p>
        </div>
        <div className="lp-feats">
          <Feat icon="flask" tint={{ bg: '#ECF7CF', fg: '#4F7A12' }} title="Protocols"
            desc="Build any schedule — daily, weekly, every-N-days or custom — with dose, route and reminders that fire on time."
            tags={['Reminders', 'Cycles', 'Flexible frequency']} />
          <Feat icon="cube" tint={{ bg: '#D5F2F6', fg: '#0E7490' }} title="Fridge"
            desc="Track every vial: fill level, reconstitution date and expiry. Low-stock and expiring alerts before you run out."
            tags={['Vial levels', 'Expiry alerts', 'Inventory']} />
          <Feat icon="calculator" tint={{ bg: '#EDE6FE', fg: '#6D28D9' }} title="Calculators"
            desc="Reconstitution math, unit conversion and a lab reference — arithmetic on your values, verifiable every time."
            tags={['Reconstitution', 'Unit convert', 'Lab reference']} />
          <Feat icon="trending" tint={{ bg: '#FBEFCF', fg: '#92600A' }} title="Progress"
            desc="Log weight and body metrics, see the trend over any range, and tie it back to what you're running."
            tags={['Weight trend', 'Body metrics', 'History']} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Device, Wordmark, AppleMark, PlayMark, StoreBadge, Nav, Hero, Feat, Features });