// Citypunks hi-fi — variant A
const { useState, useEffect } = React;

// ───────────────────────────────────────────────────────── NAV
function MobileMenu({ open, onClose }) {
  const links = [
    { num: '01', label: 'Game', active: true },
    { num: '02', label: 'World' },
    { num: '03', label: 'Factions' },
    { num: '04', label: 'News' },
    { num: '05', label: 'Community' },
    { num: '06', label: 'Support' },
  ];
  useEffect(() => {
    document.body.classList.toggle('mm-open', open);
    return () => document.body.classList.remove('mm-open');
  }, [open]);
  return (
    <div className={`mobile-menu ${open ? 'open' : ''}`} aria-hidden={!open}>
      <div className="mm-inner">
        <div className="mm-meta">
          <span className="live">All servers online</span>
          <span>Build 1.4 · Neon Tide</span>
        </div>
        <nav className="mm-nav">
          {links.map((l) => (
            <a key={l.num} href="#" className={l.active ? 'active' : ''} onClick={onClose}>
              <span className="num">{l.num} /</span>
              {l.label}
            </a>
          ))}
        </nav>
      </div>
      <div className="mm-footer">
        <a href="#" className="mm-cta" onClick={onClose}><span>Play Citypunks free</span></a>
        <div className="mm-aux">
          <span className="lang"><b>EN</b> · 繁中 · ES · JP</span>
          <a href="#" onClick={onClose}>Sign in →</a>
        </div>
        <div className="mm-aux">
          <span>Follow</span>
          <div className="mm-socials">
            <a href="#" aria-label="X">X</a>
            <a href="#" aria-label="YouTube">YT</a>
            <a href="#" aria-label="Discord">DC</a>
            <a href="#" aria-label="Twitch">TW</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a className="logo" href="#">
            <span className="logo-mark"></span>
            <span>CITY<b>PUNKS</b></span>
          </a>
          <div className="nav-links">
            <a className="active" href="#">Game</a>
            <a href="#">World</a>
            <a href="#">News</a>
            <a href="#">Community</a>
            <a href="#">Support</a>
          </div>
          <div className="nav-right">
            <span className="nav-lang"><b>EN</b> / 繁中</span>
            <a className="nav-sign" href="#">Sign in</a>
            <button
              className={`burger ${open ? 'open' : ''}`}
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </nav>
      <MobileMenu open={open} onClose={() => setOpen(false)} />
    </>
  );
}

// ───────────────────────────────────────────────────────── HERO
function Hero() {
  return (
    <section className="hero">
      <div className="hero-video">
        <video
          className="hero-bg"
          autoPlay
          muted
          loop
          playsInline
          poster="assets/hero-ronin.webp"
          ref={(el) => { if (el) el.muted = true; }}
        >
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="hero-shade"></div>

      <Nav />

      <div className="container hero-content">
        {/* top spacer / kicker is handled by nav */}
        <div></div>

        <div className="hero-bottom">
          <div className="hero-left-caption">
            <span>Ronin · class</span>
            <b>KAZE — &#8220;Wire Witch&#8221;</b>
            <span>Neo-Kowloon · Sector 7</span>
            <span className="line"></span>
          </div>

          <div className="hero-right">
            <span className="hero-eyebrow">
              <span className="dot"></span>
              Coming · Winter 2026
            </span>
            <h1 className="hero-h1">
              <span className="glitch" data-text="CITY">CITY</span><br />
              <span className="glitch" data-text="PUNKS">PUNKS</span>
            </h1>
            <p className="hero-lede">
              An open-world action RPG set in the rotten neon heart of Neo-Kowloon, 2087. Hack the grid. Rewire the city. Become the legend it deserves — or the ghost it can&#8217;t forget.
            </p>

            <div className="cta-combo">
              <button className="cta-play">
                <span className="play-icon"></span>
                <span className="meta">
                  <span className="lo">Free to play</span>
                  <span>Play Citypunks</span>
                </span>
              </button>
              <button className="cta-trailer">
                <span className="tri-wrap"></span>
                <span className="stack">
                  <span className="lo">02:14 · Official trailer</span>
                  <span className="hi">Watch the trailer</span>
                </span>
              </button>
            </div>

            <div className="hero-meta-row">
              <div className="hero-stat">
                <span className="score">9.4</span>
                <span>IGN preview</span>
              </div>
              <div className="hero-stat">
                <b>2.1M</b>
                <span>wishlists</span>
              </div>
              <div className="hero-stat">
                <span className="pip"></span>
                <span>120K in open beta</span>
              </div>
              <div className="hero-platforms">
                <span className="platform-chip">PC</span>
                <span className="platform-chip">PS5</span>
                <span className="platform-chip">XBX</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-ticker">
        <div className="ticker-track">
          {[0,1].map(i => (
            <React.Fragment key={i}>
              <span>★ <b>9.4</b> IGN PREVIEW</span>
              <span>★ <b>92</b> METACRITIC AGGREGATE</span>
              <span>· "<i>The most alive open world this generation</i>" — POLYGON</span>
              <span>· FREE TO PLAY · NO BATTLE PASS</span>
              <span>· OPEN BETA NOW LIVE</span>
              <span>· <b>2.1M</b> WISHLISTS</span>
              <span>· LAUNCHING WINTER 2026</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────── FEATURES
function Features() {
  return (
    <section className="block">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="section-tag">// FEATURES</span>
            <h2 className="section-title">A city built to be <em>rewritten</em>.</h2>
          </div>
          <p className="section-sub">Two systems we keep iterating on. The rest of the game bends around these.</p>
        </div>

        <div className="features-grid">
          <article className="feature-card">
            <div className="feature-media">
              <span className="feature-num">/ 01</span>
              <img src="assets/feature-1-aerial.webp" alt="Aerial view of Neo-Kowloon at dusk with a recon drone overhead" loading="lazy" />
            </div>
            <div className="feature-body">
              <h3>Rewire the grid</h3>
              <p>Every neon sign, traffic camera and recon drone in Neo-Kowloon is a node you can own. Stack ICE bypasses, ghost through corporate firewalls, and turn the city&#8217;s surveillance into your private nervous system.</p>
              <div className="feature-tags">
                <span className="tag-chip accent">Open world</span>
                <span className="tag-chip">Hacking</span>
                <span className="tag-chip">Stealth</span>
                <span className="tag-chip">Solo or co-op</span>
              </div>
            </div>
          </article>

          <article className="feature-card">
            <div className="feature-media">
              <span className="feature-num">/ 02</span>
              <img src="assets/feature-2-street.webp" alt="Wet neon-lit streets of Neo-Kowloon at street level" loading="lazy" />
            </div>
            <div className="feature-body">
              <h3>A city that bites back</h3>
              <p>Forty districts, three thousand NPCs with names. Rain falls when it rains, the noodle stall closes when the boss goes home, and every fight you walk away from gets remembered by someone who didn&#8217;t.</p>
              <div className="feature-tags">
                <span className="tag-chip accent">Reactive world</span>
                <span className="tag-chip">40 districts</span>
                <span className="tag-chip">Dynamic weather</span>
                <span className="tag-chip">Persistent NPCs</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────── NEWS
const POSTS = [
  {
    cat: 'patch',
    catCls: '',
    date: 'May 24, 2026',
    read: '4 min',
    title: 'Patch 1.4 — Neon Tide arrives',
    excerpt: 'Two new districts, the Tidefall raid, full netrunner rebalance and a fresh wave of cyberware. Patch notes inside.',
    img: 'assets/news-1-patch.webp',
    alt: 'Flooded Neo-Kowloon district at high tide, neon signs glowing through rain',
  },
  {
    cat: 'devlog',
    catCls: 'cyan',
    date: 'May 19, 2026',
    read: '7 min',
    title: 'Behind the soundtrack with R.O.M.',
    excerpt: 'Our composer breaks down how Neo-Kowloon got its pulse — modular synths, broken cassette loops and one very angry guitar.',
    img: 'assets/news-2-devlog.webp',
    alt: 'Dim cyberpunk recording studio with stacked synths and a black electric guitar',
  },
  {
    cat: 'event',
    catCls: 'yellow',
    date: 'May 11, 2026',
    read: '2 min',
    title: 'Free weekend + double XP',
    excerpt: 'The whole game, free to play through Sunday. Double XP on every contract, every street race, every botched stealth run.',
    img: 'assets/news-3-event.webp',
    alt: 'Silhouettes on a Neo-Kowloon rooftop watching a giant red and yellow holographic billboard',
  },
];

function News() {
  return (
    <section className="block news">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="section-tag">// LATEST FROM THE GRID</span>
            <h2 className="section-title">News &amp; <em>dispatches</em>.</h2>
          </div>
          <a className="section-link" href="#">Read all news</a>
        </div>

        <div className="news-grid">
          {POSTS.map((p, i) => (
            <article className="news-card" key={i}>
              <div className="news-media">
                <span className={`news-cat ${p.catCls}`}>{p.cat}</span>
                <img src={p.img} alt={p.alt} loading="lazy" />
              </div>
              <div className="news-body">
                <div className="news-meta">
                  <span>{p.date}</span>
                  <span className="dot"></span>
                  <span>{p.read} read</span>
                </div>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <span className="news-read">Read post</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────── BIG CTA
function BigCta() {
  return (
    <section className="big-cta">
      <div className="container big-cta-inner">
        <div>
          <span className="section-tag">// FREE TO PLAY · WINTER 2026</span>
          <h2>Jack in.<br/>The city is <em>waiting</em>.</h2>
          <div className="big-cta-meta">
            <span><span className="pip"></span>Servers live · 142,338 punks online</span>
            <span>· No battle pass · ever</span>
          </div>
        </div>
        <div className="big-cta-actions">
          <button className="cta-play">
            <span className="play-icon"></span>
            <span className="meta">
              <span className="lo">Free · 38 GB</span>
              <span>Play Citypunks</span>
            </span>
          </button>
          <div className="big-cta-platforms">
            <span className="platform-chip">PC</span>
            <span className="platform-chip">PS5</span>
            <span className="platform-chip">XBX</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────── FOOTER
function Footer() {
  return (
    <footer className="ft">
      <div className="container">
        <div className="ft-grid">
          <div className="ft-brand">
            <a className="logo" href="#">
              <span className="logo-mark"></span>
              <span>CITY<b>PUNKS</b></span>
            </a>
            <p className="blurb">
              An open-world cyberpunk RPG from a small studio in Hong Kong. We make games for people who like to take things apart.
            </p>
            <div className="ft-socials">
              <a className="ft-social" href="#" aria-label="X">X</a>
              <a className="ft-social" href="#" aria-label="YouTube">YT</a>
              <a className="ft-social" href="#" aria-label="Discord">DC</a>
              <a className="ft-social" href="#" aria-label="Twitch">TW</a>
              <a className="ft-social" href="#" aria-label="Reddit">RD</a>
            </div>
          </div>
          <div className="ft-col">
            <h4>Game</h4>
            <a href="#">Overview</a>
            <a href="#">World</a>
            <a href="#">Factions</a>
            <a href="#">Cyberware</a>
            <a href="#">Roadmap</a>
            <a href="#">System requirements</a>
          </div>
          <div className="ft-col">
            <h4>Community</h4>
            <a href="#">News</a>
            <a href="#">Devlogs</a>
            <a href="#">Forums</a>
            <a href="#">Discord</a>
            <a href="#">Creator program</a>
          </div>
          <div className="ft-col">
            <h4>Support</h4>
            <a href="#">Help center</a>
            <a href="#">Account</a>
            <a href="#">Report a bug</a>
            <a href="#">Press kit</a>
            <a href="#">Careers</a>
          </div>
        </div>
        <div className="ft-bottom">
          <div className="ft-rating">
            <span className="esrb">M / 17+</span>
            <span>© 2026 Citypunks Studio · all rights wired</span>
          </div>
          <div>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">EULA</a>
            <a href="#">EN · 繁中 · ES · DE · JP</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ───────────────────────────────────────────────────────── PALETTES
const PALETTES = {
  'Crimson ronin':     { accent: '#00f5ff', accent2: '#ffd900', accent3: '#ffffff', glow: '0, 245, 255' },
  'Hot pink / cyan':   { accent: '#ff2e88', accent2: '#00f5ff', accent3: '#f5d300', glow: '255, 46, 136' },
  'Acid green / mag':  { accent: '#39ff14', accent2: '#ff00d4', accent3: '#fff200', glow: '57, 255, 20' },
  'Blood / amber':     { accent: '#ff2a3c', accent2: '#ff8a1f', accent3: '#ffd55a', glow: '255, 42, 60' },
  'Ice blue / lilac':  { accent: '#5ec8ff', accent2: '#c084ff', accent3: '#fff7a8', glow: '94, 200, 255' },
};

const FONT_SETS = {
  'Chakra Petch':     { display: '"Chakra Petch", sans-serif',  mono: '"JetBrains Mono", monospace' },
  'Orbitron':         { display: '"Orbitron", sans-serif',       mono: '"JetBrains Mono", monospace' },
  'Rajdhani':         { display: '"Rajdhani", sans-serif',       mono: '"JetBrains Mono", monospace' },
};

// ───────────────────────────────────────────────────────── APP
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette":    "Crimson ronin",
  "fontSet":    "Chakra Petch",
  "scanlines":  true,
  "grain":      true,
  "glitch":     true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const pal = PALETTES[t.palette] || PALETTES['Hot pink / cyan'];
  const s = document.documentElement.style;
  s.setProperty('--accent', pal.accent);
  s.setProperty('--accent-2', pal.accent2);
  s.setProperty('--accent-3', pal.accent3);
  s.setProperty('--accent-glow', pal.glow);

  const fs = FONT_SETS[t.fontSet] || FONT_SETS['Chakra Petch'];
  s.setProperty('--font-display', fs.display);
  s.setProperty('--font-mono', fs.mono);

  document.body.classList.toggle('scanlines', !!t.scanlines);
  document.body.classList.toggle('grain', !!t.grain);
  document.body.classList.toggle('no-glitch', !t.glitch);
  // override glitch via style
  let g = document.getElementById('tw-glitch-override');
  if (!g) { g = document.createElement('style'); g.id = 'tw-glitch-override'; document.head.appendChild(g); }
  g.textContent = t.glitch ? '' : '.hero-h1 .glitch::before, .hero-h1 .glitch::after { display:none !important; }';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    applyTweaks(t);
  }, [t.palette, t.fontSet, t.scanlines, t.grain, t.glitch]);

  return (
    <>
      <Hero />
      <Features />
      <News />
      <BigCta />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakSelect
          label="Color"
          value={t.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Type" />
        <TweakSelect
          label="Display font"
          value={t.fontSet}
          options={Object.keys(FONT_SETS)}
          onChange={(v) => setTweak('fontSet', v)}
        />
        <TweakSection label="Atmosphere" />
        <TweakToggle label="Scanlines"     value={t.scanlines} onChange={(v) => setTweak('scanlines', v)} />
        <TweakToggle label="Film grain"    value={t.grain}     onChange={(v) => setTweak('grain', v)} />
        <TweakToggle label="Glitch on H1"  value={t.glitch}    onChange={(v) => setTweak('glitch', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);