/* global React */
const STEPS = [
  { n:'01', title:'Pick a format', body:'Poker decks, Privacy Breach, Guess Who?, Top Trumps, or a blank slate.', pip:'♥', color:'var(--card-red)' },
  { n:'02', title:'Build it in 5 minutes', body:'Drag in photos. Type the names. Add the inside jokes. Live preview as you go.', pip:'♦', color:'var(--marigold)' },
  { n:'03', title:'Posted in days', body:"We print on 300gsm premium gaming card stock and send via Australia Post. Most decks arrive in 2–5 working days.", pip:'♣', color:'var(--mint-deep)' },
];

function HowItWorks() {
  return (
    <section id="how" className="section" style={{background:'var(--ink)', color:'var(--paper)', position:'relative', overflow:'hidden'}}>
      <div className="bg-halftone" style={{position:'absolute', inset:0, opacity:.18, mixBlendMode:'screen', pointerEvents:'none'}}/>
      <div className="container" style={{position:'relative'}}>
        <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 64px'}}>
          <div className="eyebrow" style={{color:'var(--marigold)', fontSize:'20px'}}>How easy is it?</div>
          <h2 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px, 5vw, 64px)', lineHeight:1, letterSpacing:'-.02em', margin:'10px 0 0', color:'var(--paper)'}}>
            Incredibly.
          </h2>
        </div>
        <div className="grid-3col" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:28}}>
          {STEPS.map(s=>(
            <div key={s.n} style={{position:'relative', padding:'32px 28px', background:'var(--ink-2)', border:`3px solid ${s.color}`, borderRadius:14}}>
              <div style={{fontFamily:'var(--font-display)', fontSize:80, lineHeight:.9, color:s.color, letterSpacing:'-.04em'}}>{s.n}</div>
              <div style={{position:'absolute', top:18, right:22, fontSize:32, color:s.color}}>{s.pip}</div>
              <h3 style={{fontFamily:'var(--font-display)', fontSize:28, margin:'10px 0 8px', letterSpacing:'-.02em'}}>{s.title}</h3>
              <p style={{fontSize:15, lineHeight:1.5, color:'var(--paper)', opacity:.85, margin:0}}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'center', marginTop:48}}>
          <a href="#picker" className="btn btn-primary" style={{background:'var(--marigold)', color:'var(--ink)', borderColor:'var(--paper)', boxShadow:'4px 4px 0 var(--marigold-deep)'}}>Start yours →</a>
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;