// chrome.jsx — shared site chrome (nav, footer, ambient layers, page wrapper)
// for every adult-side page. Uses CSS vars for theming.

const { useState: useStateChr, useEffect: useEffectChr, useRef: useRefChr } = React;

// ──────────────────────────────────────────────────────────────────────
// PageShell — sets up the dark/light mode, ambient layers, mounts nav +
// footer + mascot peeks + scroll reveal.
//
//   <PageShell active="home" dark>
//     ...content
//   </PageShell>
// ──────────────────────────────────────────────────────────────────────
function PageShell({ active = 'home', dark = false, children, hideNav = false, footer = true }){
  const rootRef = useRefChr(null);
  useReveal(rootRef);
  const [secret, setSecret] = useStateChr(false);

  return (
    <div ref={rootRef} className="pw-frame pw-page" data-mode={dark ? 'dark' : 'light'}
      style={{ minHeight: '100vh', display:'flex', flexDirection:'column' }}>

      {/* Ambient background pieces */}
      <AmbientPieces dark={dark} />

      {!hideNav && <SiteNav active={active} dark={dark} onSecret={() => {
        setSecret(true);
        setTimeout(() => setSecret(false), 2400);
      }} />}

      <main style={{ flex: 1, position:'relative', zIndex: 1 }}>
        {children}
      </main>

      {footer && <SiteFooter dark={dark} />}

      <MascotPeek mascot="amigo" side="br" delay={2800} size={130}
        message="psst — Square Color in 2 min" />

      {secret && (
        <div style={{
          position:'fixed', bottom: 14, left:'50%', transform:'translateX(-50%)',
          padding:'10px 18px', borderRadius: 999,
          background: dark ? '#fff7e6' : 'var(--ink)',
          color: dark ? 'var(--ink)' : 'var(--paper-100)',
          fontFamily:'Patrick Hand, cursive', fontSize: 18,
          boxShadow:'0 12px 28px rgba(48,37,22,.4)', zIndex: 100,
          animation: 'pwBubbleIn .4s var(--ease-pop)',
        }}>
          ♟ → 🐆 — you've unlocked nothing, but Amigo saw you
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// SiteNav — sticky pill nav with dark/light awareness
// ──────────────────────────────────────────────────────────────────────
function SiteNav({ active = 'home', dark = false, onSecret }){
  const links = [
    { id:'home',      label:'Home',      href:'index.html' },
    { id:'training',  label:'Training',  href:'training.html' },
    { id:'play',      label:'Play Maia', href:'play.html' },
    { id:'analysis',  label:'Analysis',  href:'analysis.html' },
    { id:'kids',      label:'Kids',      href:'kids.html' },
    { id:'pricing',   label:'Pricing',   href:'pricing.html' },
  ];

  const navBg     = dark ? 'rgba(20,16,12,.72)'           : 'rgba(255,250,242,.86)';
  const navBorder = dark ? 'rgba(255,243,217,.18)'        : 'var(--line-strong)';
  const linkColor = dark ? 'rgba(255,247,230,.7)'         : 'var(--ink-soft)';

  return (
    <div style={{
      position:'sticky', top: 14, zIndex: 50,
      padding: '14px 28px 0',
      maxWidth: 1320, margin:'0 auto', width:'100%',
    }}>
      <nav style={{
        display:'grid', gridTemplateColumns:'auto 1fr auto', alignItems:'center', gap: 20,
        padding: '10px 14px 10px 16px',
        border: `1px solid ${navBorder}`,
        background: navBg,
        backdropFilter:'blur(18px) saturate(140%)', WebkitBackdropFilter:'blur(18px) saturate(140%)',
        borderRadius: 20,
        boxShadow: dark
          ? '0 8px 24px rgba(0,0,0,.3)'
          : '0 8px 24px rgba(48,37,22,.06)',
      }}>
        <a href="index.html" style={{ display:'flex', alignItems:'center', gap: 12, color:'inherit' }}>
          <span style={{
            width: 40, height: 40, borderRadius: 11,
            background: dark
              ? 'linear-gradient(160deg, #2a1f17, #1a1612)'
              : 'linear-gradient(160deg, #fffefa, #f6ecd9)',
            border: dark ? '1px solid var(--gold)' : '1px solid var(--line-strong)',
            display:'grid', placeItems:'center', overflow:'hidden', padding: 2,
            boxShadow: dark ? 'none' : 'inset 0 1px 0 rgba(255,255,255,.9)',
          }}>
            <img src="assets/icon.png" alt=""
              style={{ width:'100%', height:'100%', objectFit:'contain', transform:'scale(1.18)' }} />
          </span>
          <PawntherMark size={20} dark={dark} onSecret={onSecret} />
        </a>

        <div style={{ display:'flex', gap: 2, justifyContent:'center', flexWrap:'wrap' }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{
              padding:'8px 12px', borderRadius: 999,
              fontSize: 13, fontWeight: 700,
              color: active === l.id ? 'var(--gold)' : linkColor,
              background: active === l.id
                ? (dark ? 'rgba(227,155,68,.14)' : 'rgba(227,155,68,.10)')
                : 'transparent',
              transition: 'background .2s, color .2s',
            }}>{l.label}</a>
          ))}
        </div>

        <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
          <a href="login.html" style={{
            padding:'8px 12px', borderRadius: 999,
            fontSize: 13, fontWeight: 700, color: linkColor,
          }}>Log in</a>
          <a href="login.html?signup=1" style={{
            padding:'10px 14px', borderRadius:999,
            background: dark ? 'var(--gold)' : 'var(--ink)',
            color: dark ? '#1a120a' : 'var(--paper-100)',
            fontSize: 13, fontWeight: 800,
          }}>Start free</a>
        </div>
      </nav>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// SiteFooter — editorial colophon
// ──────────────────────────────────────────────────────────────────────
function SiteFooter({ dark = false }){
  const muted   = dark ? 'rgba(255,247,230,.5)' : 'var(--ink-muted)';
  const text    = dark ? 'rgba(255,247,230,.8)' : 'var(--ink-soft)';
  const border  = dark ? 'rgba(255,247,230,.12)' : 'var(--line-strong)';
  const hover   = dark ? '#fff7e6' : 'var(--ink)';

  const sections = [
    { h:'Product',  links:[
      ['Training',   'training.html'],
      ['Play Maia',  'play.html'],
      ['Analysis',   'analysis.html'],
      ['Kids',       'kids.html'],
      ['Pricing',    'pricing.html'],
    ] },
    { h:'Exercises', links:[
      ['Square Color',      'exercises/square-color.html'],
      ['Tap the Square',    'exercises/tap-square.html'],
      ['Knight Pathfinder', 'exercises/knight-pathfinder.html'],
      ['Position Memory',   'exercises/position-memory.html'],
      ['Notation',          'exercises/notation.html'],
      ['Blind Tactics',     'exercises/blind-tactics.html'],
      ['Blindfold',         'exercises/blindfold.html'],
    ] },
    { h:'Pawnther', links:[
      ['Join waitlist',          'pricing.html'],
      ['support@pawntherchess.com','mailto:support@pawntherchess.com'],
      ['About',                  'about.html'],
    ] },
  ];

  return (
    <footer style={{
      position:'relative', zIndex: 1,
      padding: '60px 28px 36px',
      maxWidth: 1320, margin: '60px auto 0', width:'100%',
    }}>
      <div style={{
        display:'grid', gridTemplateColumns:'1.4fr repeat(3, 1fr)', gap: 36,
        paddingBottom: 28, borderBottom: `1px dashed ${border}`,
      }}>
        <div>
          <a href="index.html" style={{ display:'flex', alignItems:'center', gap: 12, color:'inherit' }}>
            <span style={{
              width: 44, height: 44, borderRadius: 12,
              background: dark
                ? 'linear-gradient(160deg, #2a1f17, #1a1612)'
                : 'linear-gradient(160deg, #fffefa, #f6ecd9)',
              border: `1px solid ${border}`,
              display:'grid', placeItems:'center', overflow:'hidden', padding: 2,
            }}>
              <img src="assets/icon.png" alt=""
                style={{ width:'100%', height:'100%', objectFit:'contain', transform:'scale(1.18)' }} />
            </span>
            <PawntherMark size={20} dark={dark} />
          </a>
          <p style={{ marginTop: 14, color: text, fontSize: 14, maxWidth:'34ch', lineHeight: 1.55 }}>
            Adult chess training built around board vision, calculation, and human-like sparring against Maia.
          </p>
          <p style={{ marginTop: 14, fontFamily:'Patrick Hand, cursive', fontSize: 18,
            color: dark ? 'var(--gold)' : 'var(--ink-warm)' }}>
            Learn. Play. Pounce.
          </p>
        </div>
        {sections.map(s => (
          <div key={s.h}>
            <h5 style={{
              fontFamily:'JetBrains Mono, monospace', fontSize: 10.5,
              fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
              color: muted, marginBottom: 14,
            }}>{s.h}</h5>
            <ul style={{ listStyle:'none', padding: 0, display:'grid', gap: 8 }}>
              {s.links.map(([l, h]) => (
                <li key={l}>
                  <a href={h} style={{
                    fontSize: 13.5, color: text, fontWeight: 600,
                    transition: 'color .15s',
                  }} onMouseEnter={e => e.currentTarget.style.color = hover}
                     onMouseLeave={e => e.currentTarget.style.color = text}>
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        paddingTop: 22, display:'flex', justifyContent:'space-between', gap: 18,
        flexWrap:'wrap',
        color: muted, fontSize: 12,
        fontFamily:'JetBrains Mono, monospace', fontWeight: 700,
        letterSpacing:'.14em', textTransform:'uppercase',
      }}>
        <span>© 2026 Pawnther Chess · Andorra</span>
        <span>Built for players who want to improve.</span>
      </div>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────────────────
// AmbientPieces — drifting chess piece silhouettes for the page background
// ──────────────────────────────────────────────────────────────────────
function AmbientPieces({ dark = false }){
  // Static placement, but each piece has its own pwBgFloat animation
  const pieces = [
    { glyph:'♞', x:'8%',  y:'14%',  size: 92, rot: -8,  dur: 24 },
    { glyph:'♛', x:'78%', y:'22%',  size: 84, rot:  6,  dur: 28 },
    { glyph:'♟', x:'12%', y:'62%',  size: 64, rot: 12,  dur: 18 },
    { glyph:'♝', x:'88%', y:'76%',  size: 72, rot: -6,  dur: 22 },
    { glyph:'♜', x:'42%', y:'92%',  size: 68, rot:  3,  dur: 26 },
  ];
  const col = dark ? 'rgba(255,247,230,.06)' : 'rgba(25,23,20,.05)';
  return (
    <div style={{
      position:'fixed', inset: 0, zIndex: 0, pointerEvents:'none',
      overflow:'hidden',
    }}>
      {pieces.map((p, i) => (
        <span key={i} style={{
          position:'absolute', left: p.x, top: p.y,
          fontFamily:'Fraunces, serif', fontSize: p.size,
          color: col, transform: `rotate(${p.rot}deg)`,
          animation: `pwBob ${p.dur}s var(--ease-soft) infinite`,
          animationDelay: `${i * 1.8}s`,
        }}>{p.glyph}</span>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// CinematicHero — the locked direction's hero treatment
// ──────────────────────────────────────────────────────────────────────
function CinematicHero({ children, height = 'auto' }){
  return (
    <section style={{
      position:'relative',
      padding: '40px 28px 80px',
      maxWidth: 1320, margin:'0 auto',
      color: '#fff7e6',
    }}>
      <div style={{
        position:'absolute', inset: 14,
        borderRadius: 32, overflow:'hidden',
        background:
          'radial-gradient(60% 80% at 80% 10%, rgba(216,106,145,.32), transparent 60%),' +
          'radial-gradient(50% 70% at 10% 90%, rgba(110,138,160,.28), transparent 60%),' +
          'linear-gradient(160deg, #0e0a08 0%, #1a1411 50%, #271a1e 100%)',
        boxShadow:'0 40px 80px -30px rgba(0,0,0,.5)',
      }}>
        <PantherEyes x="6%"  y="74%" color="#e39b44" scale={1.2} side="l" />
        <PantherEyes x="86%" y="22%" color="#e39b44" scale={0.9} side="r" />
        <span style={{
          position:'absolute', inset:0, opacity:.28, mixBlendMode:'overlay',
          backgroundImage:'var(--noise-svg)', pointerEvents:'none',
        }} />
        <span style={{
          position:'absolute', width:'70%', height:'70%',
          top:'-20%', left:'-10%',
          background:'radial-gradient(40% 40% at 50% 50%, rgba(227,155,68,.10), transparent 70%)',
          animation:'pwGlowDrift 14s linear infinite alternate',
          pointerEvents:'none',
        }} />
      </div>
      <div style={{ position:'relative', zIndex: 2 }}>{children}</div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Folio — eyebrow text with line accent
// ──────────────────────────────────────────────────────────────────────
function Folio({ children, dark = false }){
  return (
    <span style={{
      display:'inline-flex', alignItems:'baseline', gap: 10,
      fontFamily:'JetBrains Mono, monospace', fontSize:10.5,
      fontWeight: 800, letterSpacing:'.32em', textTransform:'uppercase',
      color: dark ? 'rgba(255,247,230,.55)' : 'var(--ink-muted)',
    }}>
      <span style={{
        display:'inline-block', width: 28, height: 1,
        background: dark ? 'rgba(255,247,230,.35)' : 'var(--line-strong)',
      }} />
      {children}
    </span>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Kicker — orange eyebrow used in section heads
// ──────────────────────────────────────────────────────────────────────
function Kicker({ children, color = 'var(--gold)' }){
  return (
    <span style={{
      display:'inline-block',
      fontFamily:'JetBrains Mono, monospace',
      fontSize: 11, fontWeight: 800,
      letterSpacing:'.22em', textTransform:'uppercase',
      color,
    }}>{children}</span>
  );
}

// ──────────────────────────────────────────────────────────────────────
// CTAButton — primary CTA, theme aware
// ──────────────────────────────────────────────────────────────────────
function CTAButton({ children, variant = 'gold', size = 'md', ...rest }){
  const sizes = {
    md: { padding: '12px 18px', fontSize: 13.5 },
    lg: { padding: '14px 22px', fontSize: 14 },
  };
  const variants = {
    gold:    { background:'var(--gold)', color:'#1a120a', shadow:'0 12px 30px -10px rgba(227,155,68,.5)' },
    ink:     { background:'var(--ink)', color:'var(--paper-100)', shadow:'0 8px 22px -12px rgba(0,0,0,.45)' },
    ghost:   { background:'rgba(255,253,248,.7)', color:'var(--ink)', shadow:'none', border:'1px solid var(--line)' },
    dark:    { background:'rgba(255,247,230,.07)', color:'#fff7e6', shadow:'none', border:'1px solid rgba(255,247,230,.2)' },
  };
  const v = variants[variant];
  return (
    <button {...rest} style={{
      ...sizes[size],
      display:'inline-flex', alignItems:'center', gap: 10,
      borderRadius: 999,
      background: v.background, color: v.color,
      fontWeight: 800, letterSpacing:'.02em',
      boxShadow: v.shadow,
      border: v.border || 0,
      transition: 'transform .15s var(--ease-soft), box-shadow .15s',
      cursor:'pointer',
      ...rest.style,
    }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
       onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {children}
    </button>
  );
}

Object.assign(window, {
  PageShell, SiteNav, SiteFooter, AmbientPieces,
  CinematicHero, Folio, Kicker, CTAButton,
});