// How It Works — three editorial steps with a connecting timeline
const HowItWorks = () => {
  const steps = [
    {
      n: '01',
      kicker: 'Point',
      title: 'Aim your agent at the repo.',
      body: 'Open the project in Claude Code or Cursor. Run npx pitchkit init. pitchkit reads your README, package.json, source tree, and screenshots folder.',
      meta: '~5 seconds',
      code: ['$ npx pitchkit init', '↳ scanning repo…', '↳ detected: Next.js · Stripe · Supabase'],
    },
    {
      n: '02',
      kicker: 'Prompt',
      title: 'Answer five short questions.',
      body: 'A guided conversation, in your terminal: who is it for, what feeling, three reference brands, a soundtrack mood, a one-line promise. That becomes the creative brief.',
      meta: '~2 minutes',
      code: ['Q. one line that describes it?', '> the launch kit for builders', 'Q. visual mood?', '> warm · editorial · confident'],
    },
    {
      n: '03',
      kicker: 'Render',
      title: 'Three artifacts. One run. Locally.',
      body: 'The agent renders a 30s promo video (MP4), a 12-slide deck (PPTX + PDF), and a landing page (static HTML + Tailwind). All in /launch — yours to ship or refine.',
      meta: '~2 minutes',
      code: ['✓ /launch/promo.mp4   · 30s · 1080p', '✓ /launch/deck.pptx   · 12 slides', '✓ /launch/site/       · ready to deploy'],
    },
  ];

  const stepStyles = {
    head: {
      display: 'grid',
      gridTemplateColumns: 'minmax(120px, 200px) 1fr',
      gap: 'clamp(24px, 5vw, 64px)',
      alignItems: 'baseline',
      marginBottom: 'clamp(40px, 7vh, 96px)',
    },
    track: {
      position: 'relative',
      display: 'grid',
      gap: 'clamp(40px, 5vh, 64px)',
    },
    row: {
      display: 'grid',
      gridTemplateColumns: 'minmax(80px, 110px) minmax(0, 1fr) minmax(0, 1.1fr)',
      gap: 'clamp(20px, 4vw, 56px)',
      paddingTop: 32,
      borderTop: '1px solid var(--rule)',
      alignItems: 'start',
    },
  };

  return (
    <section className="tight" id="how" style={{background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)'}}>
      <div className="container">
        <div style={stepStyles.head}>
          <div className="eyebrow"><span className="dot"></span> 02 — How it works</div>
          <h2 className="display h-l" style={{maxWidth: '16ch'}}>
            One command. <span className="it">Three artifacts.</span><br/>Five minutes, on your laptop.
          </h2>
        </div>

        <div style={stepStyles.track}>
          {steps.map((s) => (
            <div key={s.n} style={stepStyles.row} className="how-row">
              <div>
                <div className="display" style={{
                  fontSize: 'clamp(48px, 6vw, 96px)',
                  lineHeight: 0.9,
                  color: 'var(--vermillion)',
                  fontStyle: 'italic',
                }}>
                  {s.n}
                </div>
                <div className="mono" style={{
                  fontSize: 11,
                  letterSpacing: '0.16em',
                  textTransform: 'uppercase',
                  color: 'var(--ink-mute)',
                  marginTop: 10,
                }}>{s.meta}</div>
              </div>

              <div>
                <div className="mono" style={{
                  fontSize: 11,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: 'var(--ink-mute)',
                  marginBottom: 14,
                }}>{s.kicker}</div>
                <h3 className="display" style={{fontSize: 'clamp(26px, 3vw, 44px)', lineHeight: 1.05, letterSpacing: '-0.01em', marginBottom: 16, maxWidth: '15ch'}}>
                  {s.title}
                </h3>
                <p style={{fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 44*16}}>
                  {s.body}
                </p>
              </div>

              <div style={{
                background: 'var(--ink)',
                color: 'var(--paper)',
                borderRadius: 12,
                padding: '18px 20px',
                fontFamily: 'var(--mono)',
                fontSize: 13,
                lineHeight: 1.7,
                position: 'relative',
                boxShadow: '0 16px 40px -20px rgba(20,15,10,0.35)',
              }}>
                <div style={{
                  display:'flex',
                  gap: 6,
                  marginBottom: 12,
                  paddingBottom: 10,
                  borderBottom: '1px solid color-mix(in srgb, var(--paper) 12%, transparent)',
                }}>
                  <span style={{width:9, height:9, borderRadius:'50%', background:'#e36b56'}}></span>
                  <span style={{width:9, height:9, borderRadius:'50%', background:'#d4b35b'}}></span>
                  <span style={{width:9, height:9, borderRadius:'50%', background:'#7da870'}}></span>
                  <span style={{
                    marginLeft: 'auto',
                    fontSize: 10,
                    letterSpacing: '0.16em',
                    textTransform: 'uppercase',
                    color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
                  }}>step {s.n}</span>
                </div>
                {s.code.map((line, i) => (
                  <div key={i} style={{
                    color: line.startsWith('$') ? 'var(--paper)' :
                           line.startsWith('✓') ? '#9ad19a' :
                           line.startsWith('Q.') ? 'var(--vermillion)' :
                           'color-mix(in srgb, var(--paper) 70%, transparent)',
                    whiteSpace: 'pre-wrap',
                  }}>{line}</div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Footnote */}
        <div className="mono" style={{
          marginTop: 'clamp(40px, 6vh, 72px)',
          paddingTop: 24,
          borderTop: '1px solid var(--rule)',
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: 11,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--ink-mute)',
          flexWrap: 'wrap',
          gap: 16,
        }}>
          <span>↳ no servers · no telemetry · no credit card</span>
          <span>fig. 02 — pipeline</span>
        </div>
      </div>

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

window.HowItWorks = HowItWorks;