// Menu / title screen + opponent picker + rules config
const { useState: useStateMenu } = React;

function MenuScreen({ onStart, onOnline }) {
  const [personality, setPersonality] = useStateMenu('octavia');
  const [difficulty, setDifficulty] = useStateMenu('hard');
  const [variant, setVariant] = useStateMenu('simple');
  const [layoffAllowed, setLayoffAllowed] = useStateMenu(true);

  return (
    <div className="menu">
      <div className="grid-floor" />
      <div className="menu-inner">
        <div className="menu-hero">
          <div className="kicker">· A card game for the chronically online ·</div>
          <div className="logo-big">Rommé</div>
          <div className="tagline">
            Form runs and sets. Empty your hand first. Win glory, gold, and the grudging respect of an AI who was trained exclusively on insults.
          </div>
        </div>

        <div className="menu-section">
          <div className="section-title">· Choose your opponent</div>
          <div className="opponent-picker">
            {Object.entries(window.RomeAI.PERSONALITIES).map(([key, p]) => (
              <button key={key} className={`opponent-pick ${personality === key ? 'active' : ''}`} onClick={() => setPersonality(key)}>
                <Avatar personality={key} />
                <h3>{p.name}</h3>
                <div className="t">{p.title}</div>
                <div className="b">{p.bio}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="menu-section" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <div className="section-title">· Difficulty</div>
            <div className="segmented glow">
              {[['easy','Easy'],['medium','Medium'],['hard','Hard']].map(([k, lbl]) => (
                <button key={k} className={difficulty === k ? 'active' : ''} onClick={() => setDifficulty(k)}>{lbl}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="section-title">· Variant</div>
            <div className="segmented glow">
              <button className={variant === 'simple' ? 'active' : ''} onClick={() => setVariant('simple')}>Simple Rommé</button>
              <button className={variant === 'classic' ? 'active' : ''} onClick={() => setVariant('classic')}>Classic · initial 40</button>
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>
              {variant === 'simple'
                ? 'Any meld can open. Fast, forgiving.'
                : 'Opening melds must total 40+ points. Pro mode.'}
            </div>
          </div>
          <div className="rule-toggle" style={{ marginTop: 4 }}>
            <div className="lbl">Lay off onto opponent melds<small>Classic Romé rule — extend their runs and sets.</small></div>
            <div className={`switch ${layoffAllowed ? 'on' : ''}`} onClick={() => setLayoffAllowed(!layoffAllowed)} />
          </div>
        </div>

        <div className="cta-row">
          <button className="cta" onClick={() => onStart({ personality, difficulty, variant, layoffAllowed })}>
            Deal the cards →
          </button>
          {onOnline && (
            <button className="cta" style={{ background: 'rgba(255,255,255,.07)', boxShadow: 'none', border: '1px solid rgba(255,255,255,.15)', color: 'var(--ink-hi)' }} onClick={onOnline}>
              🌐 Play Online
            </button>
          )}
        </div>

        <div style={{ textAlign: 'center', fontFamily: '"JetBrains Mono"', fontSize: 10, color: 'var(--ink-lo)', letterSpacing: '.25em', textTransform: 'uppercase' }}>
          · Built for phones, tablets, and tactical laptops ·
        </div>
      </div>
    </div>
  );
}

window.MenuScreen = MenuScreen;