// Shared shell for Kenya Scratch + Diego Claw pages.
// Exposes: DivaHeader, DivaFooter, ConfettiLayer, Eyebrow, PhoneBingo, PhoneTrivia
const ShellDS = window.DiegoClawDesignSystem_8d6afe;
const { Button: ShellButton, Badge: ShellBadge } = ShellDS;

// ── Display font options (user-tweakable) ──
const DIVA_FONTS = {
  'Chonburi': "'Chonburi', 'Georgia', serif",
  'Limelight': "'Limelight', 'Georgia', serif",
  'Bowlby One': "'Bowlby One SC', 'Georgia', serif",
  'Shrikhand': "'Shrikhand', 'Georgia', serif",
};
function useDisplayFont(name) {
  React.useEffect(() => {
    document.documentElement.style.setProperty('--font-display', DIVA_FONTS[name] || DIVA_FONTS['Chonburi']);
  }, [name]);
}

const SPARKLE_CSS = `
@media (prefers-reduced-motion: no-preference) {
  .diva-sparkle { animation: diva-twinkle 2.6s ease-in-out infinite alternate; }
  .diva-aurora { animation: diva-drift 18s ease-in-out infinite alternate; }
  .diva-aurora-2 { animation: diva-drift-2 24s ease-in-out infinite alternate; }
}
@keyframes diva-twinkle {
  0% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
@keyframes diva-drift {
  0% { transform: translate(-6%, -4%) scale(1); }
  100% { transform: translate(6%, 5%) scale(1.15); }
}
@keyframes diva-drift-2 {
  0% { transform: translate(5%, 4%) scale(1.1) rotate(8deg); }
  100% { transform: translate(-6%, -5%) scale(1) rotate(-6deg); }
}
`;

// Slow-drifting pride aurora — sits behind confetti/sparkles on stage sections.
function AuroraLayer({ opacity = 0.55 }) {
  const blob = (cls, bg, pos) => (
    <div className={cls} style={{ position: 'absolute', width: '70%', height: '130%', borderRadius: '50%', filter: 'blur(70px)', background: bg, opacity, ...pos }}></div>
  );
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {blob('diva-aurora', 'radial-gradient(closest-side, var(--diva-pink) 0%, transparent 70%)', { top: '-40%', left: '-15%' })}
      {blob('diva-aurora-2', 'radial-gradient(closest-side, var(--diva-purple) 0%, transparent 70%)', { bottom: '-50%', right: '-10%' })}
      {blob('diva-aurora', 'radial-gradient(closest-side, var(--diva-cyan) 0%, transparent 72%)', { top: '-20%', right: '25%', width: '45%', animationDelay: '-9s' })}
      {blob('diva-aurora-2', 'radial-gradient(closest-side, var(--diva-yellow) 0%, transparent 72%)', { bottom: '-45%', left: '20%', width: '40%', opacity: opacity * 0.6, animationDelay: '-14s' })}
    </div>
  );
}

const SPARKLES = [
  { top: '12%', left: '6%', size: 22, color: 'var(--diva-yellow)', glyph: '✦', delay: 0 },
  { top: '68%', left: '11%', size: 14, color: 'var(--diva-cyan)', glyph: '✧', delay: 0.6 },
  { top: '24%', left: '20%', size: 12, color: 'var(--diva-pink)', glyph: '✦', delay: 1.2 },
  { top: '80%', left: '30%', size: 18, color: 'var(--diva-yellow)', glyph: '✧', delay: 0.3 },
  { top: '10%', left: '46%', size: 15, color: 'var(--diva-cyan)', glyph: '✦', delay: 1.7 },
  { top: '58%', left: '55%', size: 12, color: 'var(--diva-yellow)', glyph: '✧', delay: 0.9 },
  { top: '18%', left: '72%', size: 20, color: 'var(--diva-pink)', glyph: '✦', delay: 0.4 },
  { top: '74%', left: '82%', size: 16, color: 'var(--diva-yellow)', glyph: '✦', delay: 1.4 },
  { top: '34%', left: '92%', size: 13, color: 'var(--diva-cyan)', glyph: '✧', delay: 2.0 },
];

function SparkleLayer() {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <style>{SPARKLE_CSS}</style>
      {SPARKLES.map((s, i) => (
        <span key={i} className="diva-sparkle" style={{ position: 'absolute', top: s.top, left: s.left, fontSize: s.size, color: s.color, textShadow: `0 0 12px ${'currentColor'}`, animationDelay: `${s.delay}s`, lineHeight: 1 }}>{s.glyph}</span>
      ))}
    </div>
  );
}

// ── Polaroid-style photo sticker (user drops a real drag photo in) ──
function PhotoSticker({ id, caption, tilt = 0, width = 280, height = 320, placeholder = 'Drop a drag photo 💅' }) {
  return (
    <figure style={{ margin: 0, transform: `rotate(${tilt}deg)`, background: 'var(--diva-cream)', border: '3px solid var(--border-loud)', borderRadius: 14, boxShadow: 'var(--shadow-pop)', padding: '12px 12px 14px', width, boxSizing: 'border-box' }}>
    <image-slot id={id} placeholder={placeholder} shape="rounded" radius="8" style={{ width: '100%', height, display: 'block' }}></image-slot>
      <figcaption style={{ fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 15, color: 'var(--text-on-cream)', textAlign: 'center', paddingTop: 12 }}>{caption}</figcaption>
    </figure>
  );
}

function PhotoStrip({ label, title, accent, photos }) {
  return (
    <section data-screen-label="Photo strip" style={{ position: 'relative', maxWidth: 1120, margin: '0 auto', padding: '88px 40px 0', width: '100%', boxSizing: 'border-box' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Eyebrow style={{ marginBottom: 12 }}>{label}</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 42, lineHeight: 1.08, color: 'var(--text-display)', margin: 0 }}>{title} <span style={{ color: 'var(--diva-pink)', textShadow: 'var(--glow-pink)' }}>{accent}</span></h2>
      </div>
      <div style={{ display: 'flex', gap: 36, justifyContent: 'center', alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {photos.map((p, i) => <PhotoSticker key={p.id} id={p.id} caption={p.caption} tilt={[-3, 2, -1.5][i % 3]} />)}
      </div>
    </section>
  );
}

function Eyebrow({ children, color = 'var(--diva-yellow)', style }) {
  return (
    <div style={{ textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', fontWeight: 800, fontSize: 14, color, ...style }}>{children}</div>
  );
}

function ConfettiLayer({ opacity = 1 }) {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none', backgroundImage: 'radial-gradient(circle 3px at 12% 30%, var(--diva-pink) 98%, transparent), radial-gradient(circle 2px at 28% 70%, var(--diva-yellow) 98%, transparent), radial-gradient(circle 3px at 44% 18%, var(--diva-cyan) 98%, transparent), radial-gradient(circle 2px at 62% 60%, var(--diva-pink) 98%, transparent), radial-gradient(circle 3px at 76% 28%, var(--diva-green) 98%, transparent), radial-gradient(circle 2px at 90% 70%, var(--diva-purple) 98%, transparent), radial-gradient(circle 2px at 8% 80%, var(--diva-cyan) 98%, transparent), radial-gradient(circle 3px at 50% 88%, var(--diva-yellow) 98%, transparent)' }}></div>
  );
}

function DivaHeader({ brand, brandAccent, links = [], cta, onCta, secondaryCta, onSecondaryCta, tagline }) {
  const linkStyle = { color: 'var(--text-body)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', textDecoration: 'none', whiteSpace: 'nowrap' };
  return (
    <header style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', padding: '18px 40px', borderBottom: '3px solid var(--border-loud)', background: 'var(--surface-card)', position: 'sticky', top: 0, zIndex: 50, gap: '12px 24px' }}>
      <style>{`
        @keyframes diva-pride-slide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        .diva-pride-brand {
          background: linear-gradient(90deg, var(--diva-pink), var(--diva-orange), var(--diva-yellow), var(--diva-green), var(--diva-cyan), var(--diva-purple), var(--diva-pink));
          background-size: 200% 100%;
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent; color: transparent;
        }
        @media (prefers-reduced-motion: no-preference) {
          .diva-pride-brand { animation: diva-pride-slide 6s linear infinite; }
        }
      `}</style>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <div className="diva-pride-brand" style={{ fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1, userSelect: 'none', whiteSpace: 'nowrap' }}>
          {brand}{brandAccent ? <span> {brandAccent}</span> : null}
        </div>
        {tagline ? <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', whiteSpace: 'nowrap' }}>{tagline}</div> : null}
      </div>
      <nav style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 24px', alignItems: 'center' }}>
        {links.map((l) => <a key={l.label} href={l.href} style={linkStyle}>{l.label}</a>)}
        {secondaryCta ? <ShellButton size="sm" variant="ghost" onClick={onSecondaryCta}>{secondaryCta}</ShellButton> : null}
        {cta ? <ShellButton size="sm" variant="primary" onClick={onCta}>{cta}</ShellButton> : null}
      </nav>
    </header>
  );
}

function DivaFooter({ left, right, crossLink }) {
  return (
    <footer style={{ marginTop: 72 }}>
      <div style={{ height: 12, background: 'var(--gradient-rainbow)', borderTop: '3px solid var(--border-loud)', borderBottom: '3px solid var(--border-loud)' }}></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '28px 40px', background: 'var(--diva-outline)', flexWrap: 'wrap', gap: 16 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--text-display)' }}>{left}</div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 600, display: 'flex', gap: 18, alignItems: 'center' }}>
          <span>{right}</span>
          {crossLink ? <a href={crossLink.href} style={{ color: 'var(--diva-pink)', fontWeight: 800 }}>{crossLink.label} →</a> : null}
        </div>
      </div>
    </footer>
  );
}

// ── Phone screens ────────────────────────────────────────────

const BINGO_GRID = [
  [4, 22, 34, 48, 61],
  [9, 17, 42, 51, 74],
  [12, 26, 'FREE', 55, 68],
  [1, 30, 37, 59, 72],
  [14, 19, 44, 46, 66],
];
const DABBED = new Set([4, 22, 17, 42, 12, 26, 55, 30, 59, 14, 46]);

function BingoScreen({ hostName = 'Kenya Scratch' }) {
  const [dabbed, setDabbed] = React.useState(() => new Set(DABBED));
  const toggle = (n) => setDabbed((prev) => { const next = new Set(prev); next.has(n) ? next.delete(n) : next.add(n); return next; });
  const cell = (n, ri, ci) => {
    const free = n === 'FREE';
    const on = free || dabbed.has(n);
    return (
      <button key={ri + '-' + ci} onClick={() => !free && toggle(n)} style={{
        aspectRatio: '1', border: '2.5px solid var(--diva-outline)', borderRadius: 12, cursor: free ? 'default' : 'pointer',
        background: on ? 'var(--diva-pink)' : 'var(--diva-white)', color: on ? '#fff' : 'var(--text-on-cream)',
        fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: free ? 10 : 17, padding: 0,
        boxShadow: on ? 'none' : '2px 2px 0 var(--diva-outline)', transform: on ? 'translate(2px, 2px)' : 'none',
        transition: 'all var(--duration-fast) var(--ease-bounce)',
      }}>{free ? '💅' : n}</button>
    );
  };
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-stage)', display: 'flex', flexDirection: 'column', padding: '76px 20px 34px', boxSizing: 'border-box', fontFamily: 'var(--font-body)' }}>
      <ConfettiLayer opacity={0.5} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 21, color: 'var(--text-display)', lineHeight: 1.1 }}>Full House <span style={{ color: 'var(--diva-pink)' }}>Realness</span></div>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', marginTop: 3 }}>{hostName} is calling</div>
        </div>
        <ShellBadge color="error">● Live</ShellBadge>
      </div>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <div style={{ width: 74, height: 74, borderRadius: '50%', background: 'var(--diva-yellow)', border: '3px solid var(--diva-outline)', boxShadow: 'var(--shadow-pop-sm)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <div style={{ textAlign: 'center', color: 'var(--text-on-yellow)' }}>
            <div style={{ fontSize: 10, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ball</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1 }}>46</div>
          </div>
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6 }}>Called so far</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[59, 12, 22, 17, 55].map((n) => (
              <span key={n} style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--surface-raised)', border: '2px solid var(--border-loud)', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, color: 'var(--text-body)' }}>{n}</span>
            ))}
          </div>
        </div>
      </div>
      <div style={{ position: 'relative', background: 'var(--diva-cream)', border: '3px solid var(--border-loud)', borderRadius: 18, boxShadow: 'var(--shadow-pop)', padding: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 7, marginBottom: 7 }}>
          {['B', 'I', 'N', 'G', 'O'].map((l, i) => (
            <div key={l} style={{ textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 19, color: ['var(--diva-pink)', 'var(--diva-orange)', 'var(--diva-purple)', 'var(--diva-green)', 'var(--diva-cyan)'][i], textShadow: '1.5px 1.5px 0 var(--diva-outline)' }}>{l}</div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 7 }}>
          {BINGO_GRID.map((row, ri) => row.map((n, ci) => cell(n, ri, ci)))}
        </div>
      </div>
      <div style={{ position: 'relative', marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 800, color: 'var(--diva-yellow)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)' }}>One to go, gorgeous 👀</div>
        <ShellButton variant="primary" size="lg" style={{ width: '100%' }}>BINGO!</ShellButton>
      </div>
    </div>
  );
}

function TriviaScreen() {
  const [picked, setPicked] = React.useState('Kylie Minogue');
  const answers = ['Cher', 'Kylie Minogue', 'Dolly Parton', 'Madonna'];
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-stage)', display: 'flex', flexDirection: 'column', padding: '76px 20px 34px', boxSizing: 'border-box', fontFamily: 'var(--font-body)' }}>
      <ConfettiLayer opacity={0.5} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 21, color: 'var(--text-display)', lineHeight: 1.1 }}>Smarty <span style={{ color: 'var(--diva-purple)' }}>Pants</span></div>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', marginTop: 3 }}>Round 3 · Pop Divas</div>
        </div>
        <ShellBadge color="yellow">Q7 of 10</ShellBadge>
      </div>
      <div style={{ position: 'relative', height: 10, borderRadius: 999, border: '2px solid var(--border-loud)', overflow: 'hidden', marginBottom: 18, background: 'var(--surface-raised)' }}>
        <div style={{ width: '62%', height: '100%', background: 'var(--gradient-rainbow)' }}></div>
      </div>
      <div style={{ position: 'relative', background: 'var(--diva-cream)', border: '3px solid var(--border-loud)', borderRadius: 18, boxShadow: 'var(--shadow-pop)', padding: '18px 16px', marginBottom: 16 }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--diva-pink-deep)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)', marginBottom: 8 }}>For 10 points</div>
        <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-on-cream)', lineHeight: 1.35 }}>Which diva spent 82 weeks at #1 on the ARIA charts?</div>
      </div>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {answers.map((a) => {
          const on = picked === a;
          return (
            <button key={a} onClick={() => setPicked(a)} style={{
              padding: '13px 18px', borderRadius: 999, border: '2.5px solid var(--diva-outline)', cursor: 'pointer',
              background: on ? 'var(--diva-purple)' : 'var(--diva-white)', color: on ? '#fff' : 'var(--text-on-cream)',
              fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 15, textAlign: 'left',
              boxShadow: on ? 'none' : '3px 3px 0 var(--diva-outline)', transform: on ? 'translate(3px, 3px)' : 'none',
              transition: 'all var(--duration-fast) var(--ease-bounce)',
            }}>{a} {on ? '✓' : ''}</button>
          );
        })}
      </div>
      <div style={{ position: 'relative', marginTop: 'auto', textAlign: 'center', fontSize: 13, fontWeight: 800, color: 'var(--diva-yellow)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-caps)' }}>Team Wig Snatchers · 2nd place 🏆</div>
    </div>
  );
}

function PhoneMockup({ screen = 'bingo', scale = 0.72, hostName }) {
  const W = 402, H = 874;
  return (
    <div style={{ width: W * scale, height: H * scale, position: 'relative' }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left', width: W, height: H }}>
        <window.IOSDevice dark>
          {screen === 'bingo' ? <BingoScreen hostName={hostName} /> : <TriviaScreen />}
        </window.IOSDevice>
      </div>
    </div>
  );
}

Object.assign(window, { Eyebrow, ConfettiLayer, SparkleLayer, AuroraLayer, PhotoSticker, PhotoStrip, DivaHeader, DivaFooter, PhoneMockup, useDisplayFont, DIVA_FONTS });