/* global React */
const REVIEWS = [
  { stars:5, quote:'Gave my dad the Top Trumps deck of his football mates for his 70th. He hasn\u2019t put it down.', name:'Priya R.', deck:'Top Trumps' },
  { stars:5, quote:'Made a Werewolf deck where my flatmates are the villagers. Game night is unhinged now.',     name:'Sam W.',   deck:'Werewolf' },
  { stars:5, quote:"Two days from order to door. Mum cried, then said 'oh god is that me on the Queen'.",       name:'Jess A.',  deck:'Personalised' },
];

function TestimonialBand() {
  return (
    <section className="section" style={{background:'var(--bubblegum)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 48px'}}>
          <div className="eyebrow" style={{color:'var(--card-red-deep)'}}>What players say</div>
          <h2 style={{fontFamily:'var(--font-display)', fontSize:'clamp(36px, 4vw, 56px)', lineHeight:1, letterSpacing:'-.02em', margin:'10px 0 0'}}>
            "Why didn't this exist already?"
          </h2>
        </div>
        <div className="grid-3col" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
          {REVIEWS.map((r,i)=>(
            <div key={i} className="card-ui is-hover testimonial-card" style={{padding:'24px 22px', transform:`rotate(${(i-1)*1.5}deg)`}}>
              <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'var(--card-red)', letterSpacing:'.1em'}}>
                {'★'.repeat(r.stars)}
              </div>
              <p style={{fontFamily:'var(--font-display)', fontSize:22, lineHeight:1.15, letterSpacing:'-.01em', margin:'14px 0 16px', textWrap:'balance'}}>"{r.quote}"</p>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', borderTop:'2px dashed var(--line-strong)', paddingTop:14, fontSize:13}}>
                <span style={{fontWeight:600}}>{r.name}</span>
                <span style={{fontFamily:'var(--font-mono)', color:'var(--ink-3)', fontSize:11, letterSpacing:'.1em'}}>{r.deck.toUpperCase()}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TestimonialBand = TestimonialBand;