/* global React */
function CTAStrip() {
  return (
    <section style={{background:'var(--card-red)', color:'var(--paper-bright)', position:'relative', overflow:'hidden', padding:'80px 0'}}>
      <div className="bg-halftone" style={{position:'absolute', inset:0, opacity:.22, pointerEvents:'none'}}/>
      <div className="container cta-inner" style={{position:'relative', display:'flex', alignItems:'center', justifyContent:'space-between', gap:32, flexWrap:'wrap'}}>
        <div>
          <div className="eyebrow" style={{color:'var(--marigold)'}}>Your move</div>
          <h2 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px, 6vw, 84px)', lineHeight:1, letterSpacing:'-.03em', margin:'8px 0 0'}}>
            Now make their week.
          </h2>
        </div>
        <a href="#picker" className="btn" style={{background:'var(--paper-bright)', color:'var(--ink)', boxShadow:'4px 4px 0 var(--ink-2)', borderColor:'var(--ink)'}}>Start your deck →</a>
      </div>
    </section>
  );
}

function Footer() {
  // Footer "Decks" links map marketing names → editor IDs.
  const DECK_HREF = {
    'Poker Deck':'poker-deck', 'Privacy Breach':'privacy-breach', 'Guess Who?':'guess-who',
    'Personalised Cards':'#picker', 'Make your own':'make-your-own',
  };
  const staticEditors = new Set();
  return (
    <footer style={{background:'var(--ink)', color:'var(--paper)', padding:'56px 0 32px'}}>
      <div className="container">
        <div className="grid-footer" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, marginBottom:48}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <img src="../../assets/mark.svg" alt="" style={{height:42, filter:'invert(0)'}}/>
              <span className="t-wordmark" style={{fontSize:24, color:'var(--paper)'}}>House Rules<span style={{color:'var(--card-red)'}}>.</span></span>
            </div>
            <p style={{maxWidth:280, marginTop:14, fontSize:14, color:'var(--paper)', opacity:.7, lineHeight:1.5}}>
              Personalised card decks for friends and loved ones. Printed in Australia, posted with love.
            </p>
          </div>
          {[
            ['Decks', ['Poker Deck', 'Privacy Breach', 'Guess Who?', 'Personalised Cards', 'Make your own']],
          ].map(([t, items])=>(
            <div key={t}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', color:'var(--marigold)', marginBottom:14}}>{t}</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8}}>
                {items.map(i=>{
                  const raw = t==='Decks' ? DECK_HREF[i] : null;
                  const href = raw ? (staticEditors.has(raw) ? raw : window.editorUrl(raw)) : '#';
                  return <li key={i}><a href={href} style={{fontSize:14, opacity:.85}}>{i}</a></li>;
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{borderTop:'1px solid rgba(247,241,227,.12)', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, color:'var(--paper)', opacity:.55, flexWrap:'wrap', gap:12}}>
          <span>© 2026 House Rules. Printed with love in Australia.</span>
        </div>
      </div>
    </footer>
  );
}
window.CTAStrip = CTAStrip;
window.Footer = Footer;