'use client';

export function SceneOakdale() {
  return (
    <div className="scene scene-oakdale">
      <div className="scene-eyebrow" style={{ color: 'var(--lab)' }}>AETHEX PRODUCT</div>
      <div className="scene-headline" style={{ color: 'var(--lab)' }}>OAKDALE ARENA</div>
      <div className="scene-tagline">The Premier Roblox Rodeo Experience</div>
      <div className="metric-row">
        <div className="metric-card">
          <div className="metric-big" style={{ color: 'var(--corp)' }}>~1,200</div>
          <div className="metric-label">DAILY ACTIVE USERS</div>
        </div>
        <div className="metric-card">
          <div className="metric-big" style={{ color: 'var(--cyber)' }}>L0RDSTIX</div>
          <div className="metric-label">DEVELOPMENT PARTNER</div>
        </div>
      </div>
      <div className="scene-links">
        <a href="https://oakdale.aethex.tech" target="_blank" rel="noopener" className="scene-link" style={{ borderColor: 'var(--lab)', color: 'var(--lab)' }}>
          OAKDALE.AETHEX.TECH ↗
        </a>
      </div>
    </div>
  );
}

export function SceneForge() {
  const phases = [
    { name: 'FORGE JAM', desc: 'Community game jam events' },
    { name: 'ACADEMY', desc: 'Structured dev education' },
    { name: 'CERTIFIED', desc: 'Industry-recognized credentials' },
  ];
  return (
    <div className="scene scene-forge">
      <div className="scene-eyebrow" style={{ color: 'var(--warn)' }}>AETHEX FOUNDATION</div>
      <div className="scene-headline" style={{ color: 'var(--warn)' }}>GAMEFORGE</div>
      <div className="scene-tagline">Nonprofit Developer Education & Credentialing Pipeline</div>
      <div className="forge-phases">
        {phases.map((p, i) => (
          <div key={i} className="forge-phase">
            <div className="forge-num">{String(i + 1).padStart(2, '0')}</div>
            <div>
              <div className="forge-phase-name" style={{ color: 'var(--warn)' }}>{p.name}</div>
              <div className="forge-phase-desc">{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export function ScenePassport() {
  return (
    <div className="scene scene-passport">
      <div className="scene-eyebrow" style={{ color: 'var(--found)' }}>AETHEX PRODUCT</div>
      <div className="scene-headline" style={{ color: 'var(--found)' }}>PASSPORT</div>
      <div className="scene-tagline">Cross-Platform Player Identity · Player-Owned · Permanent</div>
      <div className="scene-body" style={{ marginTop: '1rem' }}>
        Type <code>/passport [username]</code> in chat to generate a Passport preview card for any Roblox player.
      </div>
    </div>
  );
}

export function SceneOffline() {
  return (
    <div className="scene scene-offline">
      <div className="offline-title">AETHEX</div>
      <div className="offline-tag">BROADCAST NETWORK · ONLINE 24/7</div>
      <div className="offline-sub">
        MrPiglr is offline · KAEL is watching · Type <code>/kael</code> to talk to the AI
      </div>
      <div className="offline-commands">
        {['/music','/kael','/oakdale','/forge','/passport'].map(cmd => (
          <div key={cmd} className="offline-cmd">{cmd}</div>
        ))}
      </div>
    </div>
  );
}

export { SceneOakdale as default };