// How it works — clickable 6-step interactive phone preview with real screenshots
function HowItWorks() {
  const { Icon, SectionHead } = window.RMS;
  const [step, setStep] = React.useState(0);

  const STEPS = [
    {
      eyebrow: 'STEP 01 · SNAP',
      title: 'SNAP A SNACK',
      body: "Camera or library. Point at any candy, soda, cracker, or lunchbox chaos. The app downsizes the photo before upload so it ships fast over crummy hotel wifi.",
      bullet: 'Camera · Library · iOS 17+',
      screen: 'images/screens/how_02_home_snack.png',
      kicker: 'Home screen',
    },
    {
      eyebrow: 'STEP 02 · ID CHECK',
      title: 'CONFIRM THE SNACK',
      body: "When vision isn't sure, you get a Confirm Snack screen instead of a wrong roast. Edit the name, pick a category, see what tipped off the AI.",
      bullet: 'Vision · Confidence · Override',
      screen: 'images/screens/06_confirm_snack.png',
      kicker: 'Confirm Snack',
    },
    {
      eyebrow: 'STEP 03 · ANALYZE',
      title: "DR. HAWLEY THINKS",
      body: "Five-step pipeline runs live: intake → detect → score → draft → draw. Each step shows progress + a Dr. Hawley fact while you wait, so the loading state isn't dead time.",
      bullet: 'Intake · Detect · Score · Draft · Draw',
      screen: 'images/screens/07_analyzing_draw.png',
      kicker: 'Analyzing',
    },
    {
      eyebrow: 'STEP 04 · SCORE',
      title: 'THE VERDICT',
      body: "Deterministic math grades sugar, acidity, stickiness, residue, and crunch. The result is a 0 to 100 Smile Threat with reasons and Glow-Up Swap suggestions.",
      bullet: 'Sugar · Acid · Sticky · Residue · Crunch',
      screen: 'images/screens/how_08_verdict.png',
      kicker: 'The Verdict',
    },
    {
      eyebrow: 'STEP 05 · ROAST',
      title: 'THE 2-PANEL COMIC',
      body: "A two-panel Dr. Hawley comic appears: art-only AI image, backend-drawn speech bubbles so the text never melts. Share it, redraw it, or hit New Joke.",
      bullet: 'Script · Render · Caption · Share',
      screen: 'images/screens/how_09_comic.png',
      kicker: 'The Comic',
    },
    {
      eyebrow: 'STEP 06 · SWAP',
      title: 'PICK A STYLE',
      body: "Six comic styles bundled: Clean Cartoon, Action Pop, Soft Paint, Silly Shapes, Bold Ink, Toy Clay. Swipe to re-render the same roast in a totally different look.",
      bullet: '6 styles · Live re-render',
      screen: 'images/screens/10_comic_styles.png',
      kicker: 'Style Swap',
    },
  ];

  // auto-advance
  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % STEPS.length), 4600);
    return () => clearInterval(t);
  }, []);

  const active = STEPS[step];

  return (
    <section id="how" className="section">
      <div className="wrap">
        <SectionHead
          eyebrow={`HOW IT WORKS · ${String(STEPS.length).padStart(2,'0')} STEPS`}
          title="SNAP. SCORE. ROAST. SWAP."
          kicker="Six taps and your snack gets a personality review from the king-tooth himself. Click any step below to lock it."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          gap: 40,
          alignItems: 'start',
        }} className="how-grid">

          {/* LEFT — step list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {STEPS.map((s, i) => {
              const isActive = i === step;
              return (
                <button key={i} onClick={() => setStep(i)} style={{
                  textAlign: 'left',
                  border: '2px solid var(--ink)',
                  borderRadius: 18,
                  padding: 16,
                  background: isActive ? 'var(--ink)' : '#fff',
                  color: isActive ? 'var(--paper)' : 'var(--ink)',
                  boxShadow: isActive ? '6px 6px 0 var(--flame)' : '4px 4px 0 var(--ink)',
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  transition: 'all 220ms ease',
                }}>
                  <div style={{
                    width: 40, height: 40, flexShrink: 0,
                    borderRadius: 10, border: '2px solid ' + (isActive ? 'var(--paper)' : 'var(--ink)'),
                    background: isActive ? 'var(--flame)' : 'var(--paper-2)',
                    color: 'var(--ink)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--font-display)', fontSize: 17,
                  }}>{String(i + 1).padStart(2,'0')}</div>
                  <div style={{ flex: 1 }}>
                    <div className="mono" style={{
                      fontSize: 10.5, letterSpacing: '0.18em',
                      color: isActive ? 'var(--flame)' : 'var(--mute)',
                    }}>{s.eyebrow}</div>
                    <div className="title-m" style={{ fontSize: 20, marginTop: 4 }}>{s.title}</div>
                    {isActive && (
                      <div style={{ marginTop: 8 }}>
                        <p className="body-sm" style={{ color: 'var(--paper-2)', maxWidth: 440 }}>{s.body}</p>
                        <div className="mono" style={{
                          marginTop: 10, fontSize: 11, color: 'var(--mint)', letterSpacing: '0.16em',
                        }}>→ {s.bullet}</div>
                      </div>
                    )}
                  </div>
                </button>
              );
            })}
          </div>

          {/* RIGHT — phone preview */}
          <PhonePreview steps={STEPS} step={step} setStep={setStep}/>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .how-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// -------- Phone preview --------
function PhonePreview({ steps, step, setStep }) {
  const active = steps[step];
  return (
    <div style={{
      position: 'sticky', top: 100,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
    }} className="phone-sticky">

      {/* phone */}
      <div style={{
        position: 'relative',
        width: '100%',
        maxWidth: 440,
      }}>
        <div style={{
          width: '100%',
          aspectRatio: '9 / 19.5',
          background: 'var(--ink)',
          border: '5px solid var(--ink)',
          borderRadius: 56,
          padding: 9,
          boxShadow: '12px 12px 0 var(--ink), 18px 18px 0 var(--flame)',
          position: 'relative',
        }}>
          {/* screen */}
          <div style={{
            width: '100%', height: '100%',
            borderRadius: 46,
            overflow: 'hidden',
            position: 'relative',
            background: 'var(--paper)',
          }}>
            {steps.map((s, i) => (
              <img
                key={i}
                src={s.screen}
                alt={s.title}
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%',
                  objectFit: 'cover',
                  objectPosition: 'top center',
                  opacity: i === step ? 1 : 0,
                  transition: 'opacity 380ms ease',
                  pointerEvents: i === step ? 'auto' : 'none',
                }}
              />
            ))}
          </div>
        </div>

        {/* progress dots floating right */}
        <div style={{
          position: 'absolute',
          right: -38, top: '50%', transform: 'translateY(-50%)',
          display: 'flex', flexDirection: 'column', gap: 10,
        }} className="phone-dots">
          {steps.map((s, i) => (
            <button
              key={i}
              aria-label={`Go to step ${i + 1}`}
              onClick={() => setStep(i)}
              style={{
                width: 14, height: 14, borderRadius: 999,
                border: '2px solid var(--ink)',
                background: i === step ? 'var(--flame)' : 'var(--paper)',
                cursor: 'pointer', padding: 0,
                boxShadow: i === step ? '2px 2px 0 var(--ink)' : 'none',
                transition: 'all 200ms ease',
              }}
            />
          ))}
        </div>
      </div>

      {/* caption strip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        background: 'var(--ink)',
        color: 'var(--paper)',
        padding: '10px 18px',
        borderRadius: 999,
        border: '2px solid var(--ink)',
        boxShadow: '3px 3px 0 var(--flame)',
      }}>
        <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--flame)' }}>
          {String(step + 1).padStart(2,'0')} / {String(steps.length).padStart(2,'0')}
        </span>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--paper-2)' }}/>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em' }}>{active.kicker.toUpperCase()}</span>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .phone-sticky { position: relative !important; top: 0 !important; }
          .phone-dots { right: -28px !important; }
        }
        @media (max-width: 520px) {
          .phone-dots { display: none !important; }
        }
      `}</style>
    </div>
  );
}

window.RMS.HowItWorks = HowItWorks;