/* global React */
function Examples() {
  const examples = [
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)", deck:"Poker Deck",  bg:"var(--card-red)",   fg:"var(--paper-bright)", pip:"♥", label:"54 cards" },
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)",     deck:"Werewolf",      bg:"var(--joker)",      fg:"var(--paper-bright)", pip:"★", label:"36 cards" },
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)", deck:"Sports Card/ Top Trumps",    bg:"var(--marigold)",   fg:"var(--ink)",          pip:"♠", label:"24 cards" },
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)",      deck:"Guess Who?",     bg:"var(--mint)",       fg:"var(--ink)",          pip:"♦", label:"24 cards" },
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)",            deck:"Design your own",bg:"var(--bubblegum)",  fg:"var(--ink)",          pip:"♣", label:"54 cards" },
    { title:"PLACEHOLDER (WILL CREATE SHORTLY)",           deck:"Poker Deck",  bg:"var(--sky)",        fg:"var(--ink)",          pip:"♥", label:"54 cards" },
  ];
  return (
    <section id="examples" className="section" style={{background:'var(--paper-bright)'}}>
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:40, flexWrap:'wrap', gap:16}}>
          <div>
            <div className="eyebrow">Made by other houses</div>
            <h2 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px, 5vw, 64px)', lineHeight:1, letterSpacing:'-.02em', margin:'10px 0 0'}}>
              A few decks from the wild.
            </h2>
          </div>
          <a href="#" className="btn btn-outline">Browse all →</a>
        </div>
        <div className="grid-3col" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
          {examples.map((e,i)=>(
            <a key={i} href="#" className="card-ui is-hover" style={{padding:0, overflow:'hidden', display:'block'}}>
              <div style={{background:e.bg, color:e.fg, padding:'32px 24px 28px', position:'relative', minHeight:220}}>
                <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--font-display)', fontSize:22}}>
                  <span>A</span><span style={{fontSize:42, lineHeight:1, color: e.fg==='var(--ink)' ? 'var(--card-red)' : 'var(--marigold)'}}>{e.pip}</span>
                </div>
                <div style={{display:'flex', justifyContent:'center', alignItems:'center', height:90, fontSize:72, color: e.fg==='var(--ink)' ? 'var(--card-red)' : 'var(--marigold)'}}>{e.pip}</div>
                <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--font-display)', fontSize:22, transform:'rotate(180deg)'}}>
                  <span>A</span><span style={{fontSize:42, lineHeight:1, color: e.fg==='var(--ink)' ? 'var(--card-red)' : 'var(--marigold)'}}>{e.pip}</span>
                </div>
              </div>
              <div style={{padding:'16px 20px 18px', background:'var(--paper-bright)'}}>
                <div style={{fontFamily:'var(--font-display)', fontSize:20, letterSpacing:'-.01em', lineHeight:1.1}}>{e.title}</div>
                <div style={{display:'flex', justifyContent:'space-between', marginTop:6, fontSize:12, color:'var(--ink-3)', fontFamily:'var(--font-mono)', letterSpacing:'.08em', textTransform:'uppercase'}}>
                  <span>{e.deck}</span><span>{e.label}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Examples = Examples;