/* global React */
function Hero() {
  return (
    <section className="hero-section" style={{position:'relative', overflow:'hidden', padding:'72px 0 96px'}}>
      {/* halftone backdrop */}
      <div className="bg-halftone" style={{position:'absolute', inset:0, opacity:.5, pointerEvents:'none'}}/>
      <div className="container grid-hero" style={{position:'relative', display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:48, alignItems:'center'}}>
        <div>
          <div className="eyebrow" style={{display:'flex', alignItems:'center', gap:8}}>
            <img src="../../assets/sparkle.svg" style={{height:14, color:'var(--card-red)'}} alt=""/>
            Personalised card decks
          </div>
          <h1 style={{
            fontFamily:'var(--font-display)', fontWeight:400, fontSize:'clamp(56px, 7vw, 104px)',
            lineHeight:.95, letterSpacing:'-.03em', margin:'14px 0 0',
          }}>
            Make every<br/>game <span style={{color:'var(--card-red)'}}>personal.</span>
          </h1>
          <p style={{fontSize:20, lineHeight:1.4, color:'var(--ink-2)', maxWidth:520, marginTop:20, textWrap:'pretty'}}>
            Pick a format. Drop in the photos. Add the inside jokes. We'll professionally print it on gaming cards and post it.
          </p>
          <div style={{display:'flex', gap:14, marginTop:32, alignItems:'center'}}>
            <a href="#picker" className="btn btn-primary">Start your deck →</a>
            <a href="#examples" className="btn btn-ghost">See examples</a>
          </div>
          <div style={{display:'flex', gap:24, marginTop:32, alignItems:'center', fontSize:13, color:'var(--ink-3)'}}>
            <span>★★★★★ <strong style={{color:'var(--ink)'}}>4.8</strong> · 139 reviews</span>
            <span>● Printed in Australia</span>
            <span>● Same-day shipping</span>
          </div>
        </div>
        <div style={{position:'relative'}}>
          <img src="../../assets/illustration-card-fan.svg" alt="Three custom cards"
               style={{width:'100%', maxWidth:520}}/>
          <div className="badge-tag hero-sticker" style={{position:'absolute', top:-16, right:-12, transform:'rotate(8deg)'}}>
            <svg viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="4" y="4" width="122" height="122" rx="16" fill="#FFF5F3" stroke="#E8391E" strokeWidth="2.5"/>
              <rect x="10" y="10" width="110" height="110" rx="12" fill="none" stroke="#E8391E" strokeWidth="1" strokeDasharray="3 4" opacity=".4"/>
              <text x="65" y="46" textAnchor="middle" fontFamily="'DM Sans',sans-serif" fontSize="8" fontWeight="600" fill="#E8391E" letterSpacing="3">MADE</text>
              <line x1="30" y1="54" x2="100" y2="54" stroke="#E8391E" strokeWidth="1" opacity=".3"/>
              <text x="65" y="76" textAnchor="middle" fontFamily="'Playfair Display',serif" fontSize="28" fontWeight="900" fill="#1a1a1a">FOR</text>
              <text x="65" y="96" textAnchor="middle" fontFamily="'Playfair Display',serif" fontSize="28" fontWeight="900" fill="#E8391E">YOU</text>
              <line x1="30" y1="104" x2="100" y2="104" stroke="#E8391E" strokeWidth="1" opacity=".3"/>
              <text x="65" y="118" textAnchor="middle" fontFamily="'DM Sans',sans-serif" fontSize="7.5" fontWeight="600" fill="#E8391E" letterSpacing="2.5" opacity=".7">✦ ONLY ✦</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;