// screens-onboarding.jsx — Welcome, Privacy, Setup, Views overview

// Reusable image holder — shows a real photo when `src` is given, else a striped placeholder
function Placeholder({ label, src, h = '100%', radius = 0, dark = false, pos = 'center' }) {
  if (src) {
    return (
      <div style={{ width: '100%', height: h, borderRadius: radius, overflow: 'hidden', background: '#e7e0d0' }}>
        <img src={src} alt={label || ''} loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos, display: 'block' }} />
      </div>
    );
  }
  const base = dark ? '#202b22' : '#e7e0d0';
  const stripe = dark ? 'rgba(138,122,90,.16)' : 'rgba(138,122,90,.14)';
  return (
    <div style={{
      width: '100%', height: h, borderRadius: radius, overflow: 'hidden', position: 'relative',
      background: `repeating-linear-gradient(135deg, ${base} 0 11px, ${stripe} 11px 22px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <span style={{
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace', fontSize: 11,
        letterSpacing: '.04em', color: dark ? 'var(--on-dark-mute)' : 'var(--ink-mute)',
        background: dark ? 'rgba(22,32,26,.6)' : 'rgba(250,248,242,.72)',
        padding: '5px 10px', borderRadius: 6, backdropFilter: 'blur(2px)',
      }}>{label}</span>
    </div>
  );
}

function WelcomeScreen({ ctx }) {
  const warm = ctx.tone === 'warm';
  return (
    <div className="scr scr--light">
      <div style={{ height: '47%', position: 'relative', flex: '0 0 auto' }}>
        <Placeholder src="img/hero.jpg" label="Atelier shelf" pos="center 30%" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,42,31,.12) 0%, transparent 38%, rgba(240,236,226,.97) 100%)' }} />
        <div style={{ position: 'absolute', top: 22, left: 26 }}>
          <span className="eyebrow" style={{ color: 'var(--paper)', mixBlendMode: 'difference' }}>Atelier Gravida</span>
        </div>
      </div>
      <div className="pad flex1 col" style={{ justifyContent: 'space-between', marginTop: -28 }}>
        <div>
          <h1 className="display">What a special moment to capture.</h1>
          <p className="lede" style={{ marginTop: 14 }}>
            {warm
              ? "Let's preserve the shape of this chapter, gently, in your own home. We'll guide you through every photo, one calm step at a time."
              : "Capture your pregnancy in a few photos at home. We'll guide each shot, then craft it in bronze."}
          </p>
        </div>
        <div className="btn-row" style={{ marginTop: 18 }}>
          <button className="btn btn--primary" onClick={() => ctx.go('choose')}>
            Begin <IcArrow size={19} />
          </button>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, flexWrap: 'wrap', marginTop: 2 }}>
            <button className="linkbtn" onClick={() => ctx.go('atelier')}>The Collection</button>
            <span style={{ color: 'var(--hairline)' }}>·</span>
            <button className="linkbtn" onClick={() => ctx.go('poses')}>Poses</button>
            <span style={{ color: 'var(--hairline)' }}>·</span>
            <button className="linkbtn" onClick={() => ctx.go('bts')}>Behind the scenes</button>
            <span style={{ color: 'var(--hairline)' }}>·</span>
            <button className="linkbtn" onClick={() => ctx.onHelp()}>Talk to Atelier</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PrivacyScreen({ ctx }) {
  return (
    <div className="scr scr--paper">
      <TopBar onBack={() => ctx.back()} step={0} total={3} onHelp={ctx.onHelp} />
      <div className="pad flex1 col" style={{ justifyContent: 'space-between' }}>
        <div>
          <div className="center" style={{
            width: 64, height: 64, borderRadius: 999, marginBottom: 20,
            background: 'color-mix(in oklch, var(--gold), transparent 86%)', color: 'var(--gold)',
          }}>
            <IcShield size={30} />
          </div>
          <span className="eyebrow">Before we begin</span>
          <h1 className="title" style={{ marginTop: 8 }}>Your photos never leave Europe.</h1>
          <p className="lede" style={{ marginTop: 12 }}>
            Honesty matters to us. Here's exactly what happens with what you capture.
          </p>

          <div style={{ marginTop: 18 }}>
            {[
              [<IcLeaf size={19} />, 'Stored on European servers', 'Your photos and the model we sculpt stay on our own GDPR-compliant servers in Germany. Never sold, never shared.'],
              [<IcEye size={19} />,  'Only the Atelier sees them', 'Our digital sculptors review your scan by hand. You receive selected screenshots by email, nothing public.'],
              [<IcDrop size={19} />, 'Yours to remove anytime', 'We keep your files for one year for the commission, then delete them. One message removes them sooner.'],
            ].map((r, i) => (
              <div className="checkrow" key={i}>
                <div className="chk">{r[0]}</div>
                <div><h4>{r[1]}</h4><p>{r[2]}</p></div>
              </div>
            ))}
          </div>
        </div>
        <div className="btn-row" style={{ marginTop: 16 }}>
          <button className="btn btn--primary" onClick={() => ctx.go('setup')}>
            I understand, continue
          </button>
        </div>
      </div>
    </div>
  );
}

function SetupScreen({ ctx }) {
  const items = [
    [<IcWear size={20} />, 'What you wear is your choice', 'Nude usually gives the purest, most beautiful result, and it is completely up to you. If you would rather keep something on, a seamless thong works best: it does not cut into the skin, so it keeps your natural shape, and we can edit it away entirely. A bra is harder to remove but still possible. Some mothers choose a flowing dress or blouse instead. Whatever you wear, you decide whether it stays part of the final sculpture.'],
    [<IcSun size={20} />,  'Even, indirect daylight', 'A few steps back from any bright window, never with direct sunlight on one side of her body. Strong side-light casts hard shadows that our AI reads as missing geometry. Overcast diffused daylight or two soft lamps balanced left and right work best.'],
    [<IcWall size={20} />, 'A calm, uniform wall', 'Any uniform colour is fine, white, cream, beige, soft grey. What matters is that there is no pattern or geometry directly behind her: no framed art, no window frames in the shot, no plants, no curtains with vertical stripes. The wall should sit within 1 metre and fill the background calmly.'],
    [<IcRing size={20} />, 'Her posture makes or breaks it', 'Both feet flat on the floor, weight evenly on both sides, not leaning. Shoulders gently back and down, so she stands tall. Fingers closed together, thumb relaxed away from the rest. Hands rest softly on the belly. Breathing slowly.'],
    [<IcSparkle size={20} />, 'Mirrors out of frame', 'Mirrors and other reflective surfaces confuse our AI. Jewellery you would like to keep in your sculpture, like a wedding ring, can stay on.'],
  ];
  return (
    <div className="scr scr--light">
      <div style={{ flex: '0 0 auto' }}>
        <TopBar onBack={() => ctx.back()} step={1} total={3} onHelp={ctx.onHelp} />
      </div>
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        <div className="pad" style={{ paddingBottom: 12 }}>
          <span className="eyebrow">Set the scene</span>
          <h1 className="title" style={{ marginTop: 8 }}>Five small things for a beautiful result.</h1>
          <div className="card" style={{ marginTop: 18, padding: '2px 16px' }}>
            {items.map((r, i) => (
              <div className="checkrow" key={i}>
                <div className="chk">{r[0]}</div>
                <div><h4>{r[1]}</h4><p>{r[2]}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ flex: '0 0 auto', padding: '12px 20px 14px', borderTop: '1px solid var(--hairline)', background: 'var(--beige)' }}>
        <HelpBar prominence={ctx.help} onHelp={ctx.onHelp} />
        <button className="btn btn--primary" style={{ marginTop: 12 }} onClick={() => ctx.go('overview')}>
          The scene is ready <IcArrow size={19} />
        </button>
      </div>
    </div>
  );
}

// Per-mode copy table. CaptureScreen + RotationOverlay both read from this
// via window.SCAN_MODE_COPY to stay in sync with what the OverviewScreen
// promised the customer.
//
// Important UX choice: ALL copy in this table is written in named roles
// ("she" = the pregnant subject, "the partner with the phone" = the
// photographer) and avoids "you" entirely. Reason: during capture the
// person reading the screen is the photographer, not the subject, so the
// previous "you turn" / "you stay still" copy read as instructions to
// THEMSELVES instead of to their partner.

// Per-arm-pose copy override. The customer picks one on OverviewScreen.
// 'belly' = classic, hands cradle the bump, arms visible in the sculpture.
// 'back'  = hands rest on the back of the head, elbows pulled back as far as
//           comfortable so the AI can read a clean belly contour and Laila
//           can sculpt the piece without arms.
//
// Each pose replaces the body-angle hints + the overall callout. The 2 hand
// close-ups are captured for the 'belly' pose (hands on the bump, so the AI
// needs finger reference) but SKIPPED for the 'back' pose, where the piece
// is sculpted without arms so the hands are not part of the sculpture.
const ARM_POSE_COPY = {
  belly: {
    label: 'With arms, hands on belly',
    sub:   'Classic pose, arms visible in the sculpture',
    callout: 'Both hands rest on her belly with fingers closed together and the thumb relaxed.',
    angleSuffix: 'Hands on her belly, fingers closed together, thumb relaxed.',
  },
  back: {
    label: 'No arms in the sculpture',
    sub:   'Hands behind the head, elbows pulled back',
    callout: 'Both hands rest on the back of her head. Pull the elbows back as far as comfortable so the belly silhouette stays clean and the arms are out of the side profile.',
    angleSuffix: 'Hands on the back of her head, elbows pulled back as far as comfortable.',
  },
};
if (typeof window !== 'undefined') window.ARM_POSE_COPY = ARM_POSE_COPY;

const SCAN_MODE_COPY = {
  standing: {
    label: 'Standing scan',
    sub:   'She turns, partner with phone stays put',
    lede:  "She stands in one spot in front of the wall and gently turns between each photo. The partner with the phone stays still. We frame every angle and count down.",
    // Body-positioning callout. The arm-pose specific sentence is appended
    // at runtime from ARM_POSE_COPY[armPose].callout so the same SCAN_MODE_COPY
    // entry serves both 'arms on belly' and 'arms behind head' customers.
    callout: 'the partner with the phone stays at her belly height, never higher, never lower, never tilted up or down. Only she turns. The front and side shots frame her from the top of her head down to her knees, so her hands, belly and face fill the frame. For the back shot the partner steps back so her whole body fits, head to feet. Both feet stay flat on the floor throughout, weight evenly distributed.',
    angles: {
      front:        { label: 'Front',            hint: 'She faces the camera, framed from the top of her head down to her knees, her belly and hands filling the frame. Both feet flat on the floor, weight even.', next: 'She turns a quarter to her right' },
      right:        { label: 'Right side',       hint: 'She is turned a quarter to her right, framed from the top of her head down to her knees.',                  next: 'She turns to face the wall' },
      back:         { label: 'Back · full body', hint: 'She faces the wall. Partner steps back so her ENTIRE body fits in frame, head to feet. This full-body shot lets our AI read her whole pose.', next: 'She turns a quarter further, to her left' },
      left:         { label: 'Left side',        hint: 'She is turned a quarter to her left, framed from the top of her head down to her knees.',                   next: 'One last shot from below' },
      belly_under:  { label: 'Under the belly',  hint: 'Hold the phone just below her belly, angled upward. Capture the underside of her bump with her hands clearly in frame above.', next: 'Lovely, that is everything' },
    },
  },
  seated: {
    label: 'Seated or special pose',
    sub:   'She stays still, partner with phone walks around her',
    lede:  "She holds her pose, comfortably seated or however feels right. The partner with the phone walks around her, stopping at each of the four sides we frame.",
    callout: 'she stays still in her pose. The partner with the phone walks around her at her belly height, never higher, never lower, never tilted up or down. The front and side shots frame her from the top of her head down to her knees, so her belly, hands and face fill the frame. For the back shot the partner steps back so her whole body fits, head to feet. Both feet stay flat on the floor throughout.',
    angles: {
      front:        { label: 'Front',            hint: 'Partner stands in front of her, framed from the top of her head down to her knees, her belly and hands filling the frame. Both feet flat on the floor, weight even.', next: 'Partner walks to her right side' },
      right:        { label: 'Right side',       hint: 'Partner is on her right side, framed from the top of her head down to her knees.',                                    next: 'Partner walks around behind her' },
      back:         { label: 'Back · full body', hint: 'Partner stands directly behind her and steps back so her ENTIRE body fits in frame, head to feet. This full-body shot lets our AI read her whole pose.', next: 'Partner walks around to her left side' },
      left:         { label: 'Left side',        hint: 'Partner is on her left side, framed from the top of her head down to her knees.',                                     next: 'One last shot from below' },
      belly_under:  { label: 'Under the belly',  hint: 'Hold the phone just below her belly, angled upward. Capture the underside of her bump with her hands clearly in frame above.', next: 'Lovely, that is everything' },
    },
  },
};
if (typeof window !== 'undefined') window.SCAN_MODE_COPY = SCAN_MODE_COPY;

function OverviewScreen({ ctx }) {
  const initialMode = (ctx && ctx.capture && ctx.capture.scanMode) || 'standing';
  const initialArm  = (ctx && ctx.capture && ctx.capture.armPose)  || 'belly';
  const [mode, setMode] = React.useState(initialMode);
  const [armPose, setArmPose] = React.useState(initialArm);
  const copy    = SCAN_MODE_COPY[mode];
  const armCopy = ARM_POSE_COPY[armPose];

  // Stash both choices on the capture store so CaptureScreen + the upload
  // helper see them without having to thread them through props.
  const pickMode = (m) => {
    setMode(m);
    if (ctx && ctx.capture) ctx.capture.scanMode = m;
  };
  const pickArm = (a) => {
    setArmPose(a);
    if (ctx && ctx.capture) ctx.capture.armPose = a;
  };

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

      {/* Scrollable main column so the sticky CTA stays reachable. */}
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
        <div className="pad" style={{ paddingBottom: 12 }}>
          <span className="eyebrow">The capture</span>
          <h1 className="title" style={{ marginTop: 8 }}>
            Five photos. A couple of minutes.
          </h1>

          {/* Mode picker. Standing is the default and usually gives the
              cleanest mesh, but seated pose is supported for asymmetric or
              comfort poses. */}
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['standing', SCAN_MODE_COPY.standing.label, SCAN_MODE_COPY.standing.sub],
              ['seated',   SCAN_MODE_COPY.seated.label,   SCAN_MODE_COPY.seated.sub],
            ].map(([k, label, sub]) => {
              const active = mode === k;
              return (
                <button key={k} onClick={() => pickMode(k)} style={{
                  textAlign: 'left', cursor: 'pointer',
                  border: active ? '2px solid var(--gold)' : '1.5px solid var(--hairline)',
                  background: active ? 'color-mix(in oklch, var(--gold), transparent 92%)' : 'var(--paper)',
                  borderRadius: 14, padding: '12px 14px',
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, flex: '0 0 auto',
                    border: active ? '6px solid var(--gold)' : '2px solid var(--hairline)',
                    background: active ? 'var(--gold)' : 'transparent',
                    boxShadow: active ? 'inset 0 0 0 3px var(--paper)' : 'none',
                    transition: 'all .2s',
                  }} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--ink)' }}>{label}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>{sub}</div>
                  </div>
                </button>
              );
            })}
          </div>

          {/* Arm-pose picker. Some customers want the sculpture with arms
              visible (classic, hands cradling the belly); others want a clean
              belly silhouette without arms (hands behind the head, elbows
              tucked back). Either pose is supported. */}
          <div style={{ marginTop: 18 }}>
            <span className="eyebrow">Arms in the sculpture</span>
          </div>
          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['belly', ARM_POSE_COPY.belly.label, ARM_POSE_COPY.belly.sub],
              ['back',  ARM_POSE_COPY.back.label,  ARM_POSE_COPY.back.sub],
            ].map(([k, label, sub]) => {
              const active = armPose === k;
              return (
                <button key={k} onClick={() => pickArm(k)} style={{
                  textAlign: 'left', cursor: 'pointer',
                  border: active ? '2px solid var(--gold)' : '1.5px solid var(--hairline)',
                  background: active ? 'color-mix(in oklch, var(--gold), transparent 92%)' : 'var(--paper)',
                  borderRadius: 14, padding: '12px 14px',
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, flex: '0 0 auto',
                    border: active ? '6px solid var(--gold)' : '2px solid var(--hairline)',
                    background: active ? 'var(--gold)' : 'transparent',
                    boxShadow: active ? 'inset 0 0 0 3px var(--paper)' : 'none',
                    transition: 'all .2s',
                  }} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--ink)' }}>{label}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>{sub}</div>
                  </div>
                </button>
              );
            })}
          </div>

          <p className="lede" style={{ marginTop: 16 }}>{copy.lede}</p>

          <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start', padding: '12px 14px', borderRadius: 12, background: 'color-mix(in oklch, var(--rose), transparent 86%)', border: '1px solid color-mix(in oklch, var(--rose), transparent 64%)' }}>
            <span style={{ color: 'var(--rose-deep)', flex: '0 0 auto', marginTop: 1 }}><IcInfo size={17} /></span>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
              <b>Why this matters</b>, {copy.callout} {armCopy.callout}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 20 }}>
            {['front', 'right', 'back', 'left'].map((k, i) => {
              const a = copy.angles[k];
              return (
                <div className="card" key={k} style={{ padding: 14 }}>
                  <div className="serif-num" style={{ fontSize: 26, color: 'var(--gold)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ fontWeight: 700, fontSize: 15, marginTop: 4 }}>{a.label}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-mute)', marginTop: 2 }}>{a.hint}</div>
                </div>
              );
            })}
          </div>
          {copy.angles.belly_under && (
            <div className="card" style={{ padding: 14, marginTop: 10 }}>
              <div className="serif-num" style={{ fontSize: 26, color: 'var(--gold)' }}>05</div>
              <div style={{ fontWeight: 700, fontSize: 15, marginTop: 4 }}>{copy.angles.belly_under.label}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-mute)', marginTop: 2 }}>{copy.angles.belly_under.hint}</div>
            </div>
          )}
          <div style={{ display: 'flex', gap: 10, marginTop: 16, alignItems: 'flex-start', padding: '12px 14px', borderRadius: 12, background: 'var(--paper-2)', border: '1px solid var(--hairline)' }}>
            <span style={{ color: 'var(--gold)', flex: '0 0 auto', marginTop: 1 }}><IcSparkle size={17} /></span>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
              Afterwards you can add optional <b>detail shots</b>, like a wedding ring, a tattoo, or a scar you'd like to keep.
            </p>
          </div>
        </div>
      </div>

      {/* Sticky footer so Start capturing is always reachable. */}
      <div style={{ flex: '0 0 auto', borderTop: '1px solid var(--hairline)', background: 'var(--paper)' }}>
        {/* Quick posture check — last thing they read before pressing Start. */}
        <div style={{ padding: '12px 20px 0' }}>
          <p style={{ margin: '0 0 7px', fontSize: 11.5, fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>Before you start</p>
          {[
            'Both feet flat on the floor, weight even on both sides',
            'Shoulders back and down, standing tall',
            'Fingers closed together, thumb relaxed apart',
          ].map((txt, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 5 }}>
              <span style={{ color: 'var(--gold)', fontSize: 13, lineHeight: 1, marginTop: 2, flex: '0 0 auto' }}>✓</span>
              <span style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.4 }}>{txt}</span>
            </div>
          ))}
        </div>
        <div style={{ padding: '10px 20px 14px' }}>
        <button className="btn btn--accent" onClick={() => ctx.go('capture')}>
          <IcCamera size={19} /> Start capturing
        </button>
        <button className="btn btn--ghost" style={{ marginTop: 10 }} onClick={() => ctx.go('poses')}>
          <IcSparkle size={18} /> See pose inspiration
        </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Placeholder, WelcomeScreen, PrivacyScreen, SetupScreen, OverviewScreen });