// screens-extra.jsx — Choose (the two routes) + Pose inspiration + Behind the scenes

// ── The two routes, explained up front ──────────────────────
function ChooseScreen({ ctx }) {
  return (
    <div className="scr scr--paper">
      <div style={{ flex: '0 0 auto' }}>
        <TopBar onBack={() => ctx.back()} onHelp={ctx.onHelp} />
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        <div className="pad" style={{ paddingBottom: 26 }}>
          <span className="eyebrow">Two ways to capture you</span>
          <h1 className="title" style={{ marginTop: 8 }}>An AI likeness, or a true 1:1.</h1>
          <p className="lede" style={{ fontSize: 14.5, marginTop: 10 }}>
            Both begin the same calm way. They differ in how exactly your body is captured. Here is the honest difference.
          </p>

          {/* Route A — the app */}
          <div className="card" style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span className="center" style={{ width: 36, height: 36, borderRadius: 999, background: 'color-mix(in oklch, var(--rose), transparent 85%)', color: 'var(--rose-deep)' }}><IcCamera size={19} /></span>
                <b style={{ fontSize: 16 }}>This app · AI sculpting</b>
              </div>
              <span className="tag" style={{ background: 'var(--ink)', color: 'var(--paper)', border: 'none' }}>Free</span>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: '12px 0 0' }}>
              You take a few photos at home. Our AI builds the first form, then our team of digital sculptors refines it by hand, in the Atelier. A warm, artful likeness drawn from your photos. It is an interpretation, not an exact measurement.
            </p>
            <button className="btn btn--primary" style={{ marginTop: 16 }} onClick={() => ctx.go('privacy')}>
              Continue with the app <IcArrow size={18} />
            </button>
          </div>

          {/* Route B — the scan-kit */}
          <div className="card" style={{ marginTop: 12, background: 'var(--ink)', border: 'none', color: 'var(--on-dark)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span className="center" style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(138,122,90,.28)', color: 'var(--gold-soft)' }}><IcSparkle size={19} /></span>
              <b style={{ fontSize: 16, color: 'var(--paper)' }}>DIY Scan-kit · a true 1:1</b>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--on-dark-mute)', margin: '12px 0 14px' }}>
              We post you a professional 3D scanner with clear instructions. You scan in your own light, and we cast a scientifically exact, one to one copy of your body.
            </p>

            {/* how-it-works video */}
            <div style={{ borderRadius: 12, overflow: 'hidden', background: '#000', position: 'relative' }}>
              <video src="img/diy-scan-video.mp4" controls playsInline preload="metadata"
                style={{ width: '100%', display: 'block', maxHeight: 220, background: '#000' }}></video>
            </div>
            <p style={{ fontSize: 11.5, color: 'var(--on-dark-mute)', margin: '7px 0 0', fontFamily: 'ui-monospace, Menlo, monospace' }}>
              See how the kit works
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginTop: 14 }}>
              {['A true one to one copy of your body', 'Ships across Europe', '€200 deposit, fully refundable'].map((b) => (
                <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ color: 'var(--gold-soft)', display: 'flex' }}><IcCheck size={16} /></span>
                  <span style={{ fontSize: 13.5, color: 'var(--on-dark)' }}>{b}</span>
                </div>
              ))}
            </div>
            <button className="btn btn--ghost" style={{ marginTop: 16, borderColor: 'rgba(236,231,218,.28)', color: 'var(--paper)' }}
              onClick={() => window.open('https://www.studiogravida.com/diy-scan', '_blank')}>
              Order the Scan-kit <IcArrow size={17} />
            </button>
          </div>

          <button className="linkbtn" style={{ display: 'block', margin: '16px auto 0' }} onClick={() => ctx.onHelp()}>
            Not sure? Talk to Atelier
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Pose inspiration (from the Atelier's Houdingen guide) ────
const POSES = [
  ['Two hands on the bump', 'Stand tall, shoulders slightly back. Rest both hands on the belly, not underneath and not against the chest. Fingers together, arms relaxed.', 'img/pose-twohands.png'],
  ['One hand on the bump, one on chest, hip or thigh', 'Lovely in many ways, as long as the stance stays the same: upright, shoulders relaxed, fingers together.', 'img/pose-hand-hip.png'],
  ['One hand on the bump, one over the chest', 'A little trickier. Keep the shoulders level and let the covering shoulder drop, so the two stay even. Glance from the side too.', 'img/pose-hand-chest.png'],
  ['Arms raised', 'Arms straight up, fingers interlaced above the head. Bring the elbows back so the pose opens up and feels natural.', 'img/pose-armsup.png'],
  ['Arms relaxed at your sides', 'Stand upright (this really matters), shoulders slightly back. Let the arms fall a little away from the body so there is room to capture.', 'img/pose-armsdown.png'],
  ['A gentle twist', 'Turn the upper body softly to one side. Arms can sit at different heights. Keep it natural, not turned too far.', 'img/pose-twist.png'],
];
const LEG_OPTIONS = ['Feet side by side, calm and even', 'One foot slightly forward, a natural twist', 'Feet crossed, a more playful line'];

function PoseImg({ src }) {
  return (
    <div style={{ position: 'relative', height: 300, background: '#565651' }}>
      <img src={src} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(14,15,10,.55) 100%)' }} />
    </div>
  );
}

function PosesScreen({ ctx }) {
  return (
    <div className="scr scr--paper">
      <div style={{ flex: '0 0 auto' }}>
        <TopBar onBack={() => ctx.back()} onHelp={ctx.onHelp} />
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        <div className="pad" style={{ paddingBottom: 16 }}>
          <span className="eyebrow">Inspiration · poses</span>
          <h1 className="title" style={{ marginTop: 8 }}>Find a pose that feels like you.</h1>
          <p className="lede" style={{ fontSize: 14.5, marginTop: 10 }}>
            Your pose shapes the finished piece, so a stance that feels comfortable is not always the most beautiful as a sculpture. Look together at how the body sits. Stand upright, and keep the fingers of both hands together.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 18 }}>
            {POSES.map((p, i) => (
              <div key={i} style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--hairline)', background: 'var(--paper)' }}>
                <div style={{ position: 'relative' }}>
                  <PoseImg src={p[2]} />
                  <div className="serif-num" style={{ position: 'absolute', top: 10, left: 14, fontSize: 22, color: 'rgba(250,248,242,.9)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <h3 style={{ position: 'absolute', left: 14, right: 14, bottom: 12, margin: 0, fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 20, color: 'var(--paper)', lineHeight: 1.18 }}>{p[0]}</h3>
                </div>
                <p style={{ margin: 0, padding: '12px 14px', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-soft)' }}>{p[1]}</p>
              </div>
            ))}
          </div>

          {/* legs */}
          <h2 className="title" style={{ fontSize: 21, marginTop: 22 }}>And the legs.</h2>
          <p className="lede" style={{ fontSize: 14, marginTop: 6 }}>
            Keep even weight on both legs, with no gap showing between the thighs. A few options:
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
            {LEG_OPTIONS.map((m) => <span key={m} className="tag">{m}</span>)}
          </div>

          <div className="card" style={{ marginTop: 16, display: 'flex', gap: 11, alignItems: 'flex-start', background: 'var(--paper-2)' }}>
            <span style={{ color: 'var(--gold)', flex: '0 0 auto', marginTop: 1 }}><IcInfo size={19} /></span>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
              Whatever you choose, keep your hands and body still while the photos are taken. There is no wrong pose.
            </p>
          </div>
        </div>
      </div>

      <div style={{ flex: '0 0 auto', padding: '12px 20px 14px', borderTop: '1px solid var(--hairline)', background: 'var(--paper)' }}>
        <button className="btn btn--accent" onClick={() => ctx.go('capture')}>
          <IcCamera size={18} /> I'm ready, start capturing
        </button>
      </div>
    </div>
  );
}

// ── Behind the scenes ───────────────────────────────────────
function BTSScreen({ ctx }) {
  const Cap = ({ children }) => (
    <span className="tag" style={{ position: 'absolute', left: 14, bottom: 12, background: 'rgba(20,22,15,.55)', color: 'var(--on-dark)', borderColor: 'rgba(236,231,218,.2)' }}>{children}</span>
  );
  return (
    <div className="scr scr--light">
      <div style={{ flex: '0 0 auto' }}>
        <TopBar onBack={() => ctx.back()} onHelp={ctx.onHelp} />
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        <div className="pad" style={{ paddingBottom: 26 }}>
          <span className="eyebrow">From Haarlem</span>
          <h1 className="title" style={{ marginTop: 8 }}>Shaped by hand in our atelier.</h1>
          <p className="lede" style={{ fontSize: 14.5, marginTop: 10 }}>
            Where most studios outsource, we make everything ourselves. Each piece is poured, finished and packaged by hand, in bronze, copper, resin or stone.
          </p>

          <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', height: 196, marginTop: 18 }}>
            <Placeholder src="img/bts-wax.png" label="applying different coatings" />
            <Cap>Applying different coatings</Cap>
          </div>
          <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', height: 196, marginTop: 12 }}>
            <Placeholder src="img/bts-atelier.jpg" label="hand-finishing the patina" pos="center 40%" />
            <Cap>Hand-finishing the patina</Cap>
          </div>

          <h2 className="title" style={{ fontSize: 22, marginTop: 24 }}>No rush. No shortcuts.</h2>
          <p className="lede" style={{ fontSize: 14.5, marginTop: 8 }}>
            A pregnancy deserves to be remembered with the same attention it asked of you. We shape each sculpture slowly, by the same hands, never two the same.
          </p>

          <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', height: 188, marginTop: 16 }}>
            <Placeholder src="img/bts-story.jpg" label="the atelier" pos="center 30%" />
          </div>

          <p style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink-mute)', marginTop: 16 }}>
            Founded by Marit in Haarlem. Laila is your point of contact, from first hello to the day it arrives.
          </p>
          <button className="btn btn--ghost" style={{ marginTop: 14 }} onClick={() => window.open('https://www.studiogravida.com/atelier', '_blank')}>
            Read our story <IcArrow size={17} />
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ChooseScreen, PosesScreen, BTSScreen, POSES });
