/* global React */
// Display name + blurb on the marketing surface; href points at the actual editor template.
const DECKS = [
  { id:'privacy-breach',     name:'Privacy Breach',     blurb:"Exploding Kittens/Werewolf style. Custom roles, same endless fun.",    bg:'var(--joker)',        fg:'var(--paper-bright)', pip:'★', pipColor:'var(--marigold)', sticker:'BESTSELLER', from:'$not sure yet' },
  { id:'poker-deck',         name:'Poker Deck',         blurb:'A full 54-card deck. Court cards become your people; pips stay classic.', bg:'var(--card-red)',   fg:'var(--paper-bright)', pip:'♥', pipColor:'var(--marigold)', sticker:null,         from:'$not sure yet' },
  { id:'guess-who',          name:'Guess Who?',         blurb:'Twenty-four faces of your favourite people.',                            bg:'var(--mint)',         fg:'var(--ink)',          pip:'♦', pipColor:'var(--card-red)', sticker:null,         from:'$not sure yet' },
  { id:'personalised-cards', name:'Personalised Cards', blurb:'Four styles — Classic, Archive, Sports Card, Pokémon. Pick your look.', bg:'var(--marigold)',     fg:'var(--ink)',          pip:'♠', pipColor:'var(--ink)',       sticker:'NEW',        from:'$not sure yet', href:'personalised-cards.html' },
  { id:'make-your-own',      name:'Make your own',      blurb:'Blank canvas. Pure freedom. You bring the rules.',                      bg:'var(--paper-bright)', fg:'var(--ink)',          pip:'♣', pipColor:'var(--card-red)', sticker:null,         from:'$not sure yet' },
];

function DeckPicker() {
  const [active, setActive] = React.useState(null);
  return (
    <section id="picker" className="section" style={{background:'var(--paper)', scrollMarginTop:80}}>
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:40, flexWrap:'wrap', gap:16}}>
          <div>
            <div className="eyebrow">Pick your format</div>
            <h2 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px, 5vw, 64px)', lineHeight:1, letterSpacing:'-.02em', margin:'10px 0 0'}}>
              Five flavours of deck.
            </h2>
            <p style={{fontSize:17, color:'var(--ink-2)', maxWidth:520, marginTop:12}}>
              Each editor is purpose-built. Start anywhere — you can swap formats before checkout.
            </p>
          </div>
          <a href="#" className="btn btn-outline">All formats →</a>
        </div>

        <div className="grid-decks" style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:20}}>
          {DECKS.map((d, i)=>(
            <div key={d.id} style={{display:'flex', flexDirection:'column', gap:10}}>
              <a href={d.href ? d.href : window.editorUrl(d.id)}
                 onMouseEnter={()=>setActive(d.id)} onMouseLeave={()=>setActive(null)}
                 className="deck-card"
                 style={{
                   position:'relative', background:d.bg, color:d.fg,
                   border:'3px solid var(--ink)', borderRadius:'var(--r-card)',
                   padding:'22px 18px 24px',
                   boxShadow: active===d.id ? '10px 10px 0 var(--ink)' : '6px 6px 0 var(--ink)',
                   transform: active===d.id ? `translate(-3px,-3px) rotate(${(i-2)*1.2}deg)` : `rotate(${(i-2)*1.2}deg)`,
                   transition:'all 220ms var(--ease-spring)',
                   display:'flex', flexDirection:'column', minHeight:280,
                 }}>
                {d.sticker && (
                  <span style={{
                    position:'absolute', top:-12, right:-10, background:'var(--ink)', color:'var(--paper)',
                    fontFamily:'var(--font-mono)', fontSize:10, fontWeight:700, letterSpacing:'.16em',
                    padding:'6px 10px', borderRadius:999, transform:'rotate(8deg)',
                  }}>★ {d.sticker}</span>
                )}
                <div style={{display:'flex', justifyContent:'flex-end', alignItems:'baseline', marginBottom:24, fontFamily:'var(--font-display)', fontSize:18}}>
                  <span style={{color:d.pipColor, fontSize:36, lineHeight:1}}>{d.pip}</span>
                </div>
                <div style={{flex:1, display:'flex', alignItems:'flex-end'}}>
                  <div>
                    <div style={{fontFamily:'var(--font-display)', fontSize: d.id==='privacy-breach' ? 22 : 26, lineHeight:1, letterSpacing:'-.02em', whiteSpace: d.id==='privacy-breach' ? 'nowrap' : undefined}}>
                      {d.name}
                    </div>
                    <p style={{fontSize:13, lineHeight:1.4, marginTop:6, opacity:.9}}>{d.blurb}</p>
                    <div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.1em', opacity:.85}}>
                      {window.deckById && window.deckById(d.id) ? 'FROM ' + window.formatAUD(window.deckById(d.id).price) : d.from}
                    </div>
                  </div>
                </div>
              </a>
              {d.id==='privacy-breach' && (
                <span
                  role="button"
                  onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); window.open(window.EDITOR_BASE + '/how-to-play/privacy-breach.html', '_blank'); }}
                  style={{
                    display:'inline-flex', alignItems:'center', gap:6,
                    background:'var(--paper-bright)', color:'var(--ink)',
                    border:'2px solid var(--ink)', borderRadius:999, boxShadow:'2px 2px 0 var(--ink)',
                    fontFamily:'var(--font-mono)', fontSize:11, fontWeight:700,
                    letterSpacing:'.08em', textTransform:'uppercase', padding:'5px 12px', cursor:'pointer',
                    alignSelf:'flex-start',
                  }}
                >▸ How to play Privacy Breach / Exploding Kittens</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.DeckPicker = DeckPicker;