/* global React, ReactDOM */
const { useState, useEffect } = React;

const STRINGS = {
  en: {
    nav: { studio: "Studio", games: "Games", careers: "Careers" },
    hero: {
      tagline_main: "We build games people refuse to put down.",
      tagline_pre: "An independent mobile games studio.",
      cornerMark: "EST. MMXXVI · INDEX 01/04",
      meta: {
        founded: ["Founded", "MMXXVI"],
        based: ["Based", "Pixelcius HQ"],
        focus: ["Focus", "2D · Mobile"],
        status: ["Status", "Now hiring"],
      },
    },
    manifesto: ["High craft", "Fast iteration", "Pixel obsession", "Player first", "Made to last"],
    games: {
      label: "Index 02 — Catalogue",
      num: "02",
      title: "Games in development.",
      cards: [
        { id: "PXC-001", title: "Hollow Climb", sub: "Platformer · 2D", badge: "Demo Ready", badgeKind: "demo", art: "c1" },
        { id: "PXC-002", title: "Ember Run", sub: "Endless Runner · 2D", badge: "In Development", badgeKind: "soon", art: "c2" },
        { id: "PXC-003", title: "Untitled Roguelike", sub: "Top-down · 2D", badge: "Prototype", badgeKind: "demo", art: "c3" },
        { id: "PXC-004", title: "Glasswing", sub: "Puzzle · 2D", badge: "Demo Ready", badgeKind: "demo", art: "c4" },
        { id: "PXC-005", title: "Project Nox", sub: "Stealth Arcade · 2D", badge: "Coming 2026", badgeKind: "soon", art: "c2" },
        { id: "PXC-006", title: "Tape Loop", sub: "Rhythm · 2D", badge: "Concept", badgeKind: "soon", art: "c3" },
      ],
    },
    contact: {
      label: "Index 03 — Contact",
      num: "03",
      title: "Get in touch.",
      bigPre: "Talk to us at",
      bigEmail: "info@pixelcius.com",
      blocks: [
        { label: "Press", val: "press@pixelcius.com" },
        { label: "Business", val: "biz@pixelcius.com" },
      ],
      careersLabel: "Open Roles",
      roles: [
        { title: "Senior Game Designer", status: "Open" },
        { title: "Unity Engineer (2D)", status: "Open" },
        { title: "Pixel Artist", status: "Open" },
        { title: "Sound Designer", status: "Contract" },
      ],
    },
    footer: {
      tagline: "© Pixelcius 2026 — Made with obsession.",
      social: ["Twitter", "Instagram", "YouTube", "Discord"],
    },
    viewport: { d: "Desktop", t: "Tablet", m: "Mobile" },
  },
  tr: {
    nav: { studio: "Stüdyo", games: "Oyunlar", careers: "Kariyer" },
    hero: {
      tagline_main: "İnsanların elinden bırakamadığı oyunlar yapıyoruz.",
      tagline_pre: "Bağımsız bir mobil oyun stüdyosu.",
      cornerMark: "KURULUŞ MMXXVI · BÖLÜM 01/04",
      meta: {
        founded: ["Kuruluş", "MMXXVI"],
        based: ["Merkez", "Pixelcius HQ"],
        focus: ["Odak", "2D · Mobil"],
        status: ["Durum", "İşe alım açık"],
      },
    },
    manifesto: ["Yüksek zanaat", "Hızlı iterasyon", "Piksel takıntısı", "Önce oyuncu", "Kalıcı yapım"],
    games: {
      label: "Bölüm 02 — Katalog",
      num: "02",
      title: "Geliştirilen oyunlar.",
      cards: [
        { id: "PXC-001", title: "Hollow Climb", sub: "Platform · 2D", badge: "Demo Hazır", badgeKind: "demo", art: "c1" },
        { id: "PXC-002", title: "Ember Run", sub: "Sonsuz Koşu · 2D", badge: "Geliştiriliyor", badgeKind: "soon", art: "c2" },
        { id: "PXC-003", title: "İsimsiz Roguelike", sub: "Tepeden Bakış · 2D", badge: "Prototip", badgeKind: "demo", art: "c3" },
        { id: "PXC-004", title: "Glasswing", sub: "Bulmaca · 2D", badge: "Demo Hazır", badgeKind: "demo", art: "c4" },
        { id: "PXC-005", title: "Proje Nox", sub: "Gizlilik Arcade · 2D", badge: "2026'da", badgeKind: "soon", art: "c2" },
        { id: "PXC-006", title: "Tape Loop", sub: "Ritim · 2D", badge: "Konsept", badgeKind: "soon", art: "c3" },
      ],
    },
    contact: {
      label: "Bölüm 03 — İletişim",
      num: "03",
      title: "Bize ulaşın.",
      bigPre: "Bize yazın",
      bigEmail: "info@pixelcius.com",
      blocks: [
        { label: "Basın", val: "press@pixelcius.com" },
        { label: "İş Birliği", val: "biz@pixelcius.com" },
      ],
      careersLabel: "Açık Pozisyonlar",
      roles: [
        { title: "Kıdemli Oyun Tasarımcısı", status: "Açık" },
        { title: "Unity Geliştirici (2D)", status: "Açık" },
        { title: "Piksel Sanatçısı", status: "Açık" },
        { title: "Ses Tasarımcısı", status: "Sözleşmeli" },
      ],
    },
    footer: {
      tagline: "© Pixelcius 2026 — Takıntıyla yapılmıştır.",
      social: ["Twitter", "Instagram", "YouTube", "Discord"],
    },
    viewport: { d: "Masaüstü", t: "Tablet", m: "Mobil" },
  },
};

const PALETTES = {
  signal: { name: "Signal", c1: "#3a7afe", c2: "#ff2bd6", c3: "#c4ff3a", c4: "#ffaa2b" },
  arcade: { name: "Arcade", c1: "#ff3b3b", c2: "#ffd23b", c3: "#3bffd2", c4: "#b53bff" },
  toxic: { name: "Toxic", c1: "#00e5a0", c2: "#85ff00", c3: "#00d6ff", c4: "#ff006a" },
  ember: { name: "Ember", c1: "#ff4d2b", c2: "#ffb800", c3: "#ff2b87", c4: "#5a2bff" },
  void: { name: "Void", c1: "#7a5cff", c2: "#ff5cd2", c3: "#5cdfff", c4: "#fff35c" },
};

const FONTS = {
  "space-jet": { name: "Space × Jet", display: '"Space Grotesk", sans-serif', body: '"Inter", sans-serif', mono: '"JetBrains Mono", monospace' },
  "anton-ibm": { name: "Anton × IBM", display: '"Anton", sans-serif', body: '"IBM Plex Sans", sans-serif', mono: '"IBM Plex Mono", monospace' },
  "syne-jet": { name: "Syne × Jet", display: '"Syne", sans-serif', body: '"DM Sans", sans-serif', mono: '"JetBrains Mono", monospace' },
  "archivo-jet": { name: "Archivo × Jet", display: '"Archivo Black", sans-serif', body: '"Archivo", sans-serif', mono: '"JetBrains Mono", monospace' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "signal",
  "fontPair": "space-jet"
}/*EDITMODE-END*/;

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.signal;
  const root = document.documentElement;
  root.style.setProperty("--c1", p.c1);
  root.style.setProperty("--c2", p.c2);
  root.style.setProperty("--c3", p.c3);
  root.style.setProperty("--c4", p.c4);
  window.dispatchEvent(new CustomEvent("pixelcius:colors-changed"));
}
function applyFonts(key) {
  const f = FONTS[key] || FONTS["space-jet"];
  const root = document.documentElement;
  root.style.setProperty("--display", f.display);
  root.style.setProperty("--body", f.body);
  root.style.setProperty("--mono", f.mono);
}

// PIXELCIUS = 9 chars. Indexes: 0-P 1-I 2-X 3-E 4-L 5-C 6-I 7-U 8-S
function Wordmark() {
  const text = "PIXELCIUS";
  return (
    <h1 className="hero__wordmark">
      {text.split("").map((c, i) => (
        <span key={i} className={i === 6 ? "glyph-i" : ""}>{c}</span>
      ))}
    </h1>
  );
}

function Nav({ lang, setLang, t }) {
  return (
    <nav className="nav">
      <div className="nav__brand">
        <span className="nav__dot" />
        <span className="nav__brand-name">PIXELCIUS</span>
        <span className="nav__brand-tag">/ Studio</span>
      </div>
      <div className="nav__links">
        <a href="#games">{t.nav.games}</a>
        <a href="#careers">{t.nav.careers}</a>
      </div>
      <div className="nav__lang">
        <button className={lang === "en" ? "is-active" : ""} onClick={() => setLang("en")}>EN</button>
        <span>/</span>
        <button className={lang === "tr" ? "is-active" : ""} onClick={() => setLang("tr")}>TR</button>
      </div>
    </nav>
  );
}

function Hero({ t }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.__pixelciusHeroInit) return;
    window.__pixelciusHeroInit = true;
    const s = document.createElement("script");
    s.src = "hero.js?v=2";
    document.body.appendChild(s);
  }, []);
  return (
    <section className="hero">
      <div className="hero__canvas" id="hero-canvas" ref={ref} />
      <div className="hero__content">
        <div className="hero__tagline">
          <strong>{t.hero.tagline_main}</strong>
          {t.hero.tagline_pre}
        </div>
        <div className="hero__center">
          <div className="hero__corner-mark">{t.hero.cornerMark}</div>
        </div>
        <div className="hero__bottom">
          <Wordmark />
          <div className="hero__meta">
            {Object.entries(t.hero.meta).map(([k, [label, value]]) => (
              <div key={k}>
                <span className="label">{label}</span>
                <span className="value">{value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Manifesto({ t }) {
  const items = t.manifesto;
  const ac = ["accent-1", "accent-2", "accent-3", "accent-4"];
  const renderRun = (key) => (
    <span key={key}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span className={ac[i % 4]}>{it}</span>
          <span className="star">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="manifesto">
      <div className="marquee">
        {renderRun("a")}{renderRun("b")}
      </div>
    </div>
  );
}

function GameCard({ card }) {
  return (
    <div className="game-card">
      <div className={`game-card__art game-card__art--${card.art}`}>
        <div className="game-card__placeholder">[ Key Art · {card.id} ]</div>
      </div>
      <div className="game-card__overlay">
        <div className="game-card__top">
          <span className="game-card__id">{card.id}</span>
          <span className={`game-card__badge game-card__badge--${card.badgeKind}`}>● {card.badge}</span>
        </div>
        <div className="game-card__bottom">
          <div className="game-card__title">{card.title}</div>
          <div className="game-card__sub">{card.sub}</div>
        </div>
      </div>
    </div>
  );
}

function Games({ t }) {
  return (
    <section className="section" id="games">
      <div className="section__head">
        <div className="section__num">{t.games.num} /</div>
        <div className="section__label">{t.games.label}</div>
        <h2 className="section__title">{t.games.title}</h2>
      </div>
      <div className="games">
        {t.games.cards.map((c) => <GameCard key={c.id} card={c} />)}
      </div>
    </section>
  );
}

function Contact({ t }) {
  return (
    <section className="section" id="careers">
      <div className="section__head">
        <div className="section__num">{t.contact.num} /</div>
        <div className="section__label">{t.contact.label}</div>
        <h2 className="section__title">{t.contact.title}</h2>
      </div>
      <div className="contact">
        <div className="contact__big">
          <span className="small">{t.contact.bigPre}</span>
          <a href={`mailto:${t.contact.bigEmail}`}>{t.contact.bigEmail}</a>
        </div>
        <div className="contact__side">
          {t.contact.blocks.map((b) => (
            <div className="contact__block" key={b.label}>
              <div className="contact__label">{b.label}</div>
              <div className="contact__val">{b.val}</div>
            </div>
          ))}
          <div className="contact__block">
            <div className="contact__label">{t.contact.careersLabel}</div>
            <div className="contact__roles">
              {t.contact.roles.map((r) => (
                <div className="contact__role" key={r.title}>
                  <span>{r.title}</span>
                  <span className="role-status">● {r.status}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer__mark">PIXELCIUS</div>
      <div className="footer__row">
        <span>{t.footer.tagline}</span>
        <div className="footer__social">
          {t.footer.social.map((s) => <a href="#" key={s}>{s}</a>)}
        </div>
      </div>
    </footer>
  );
}

function ViewportSwitch({ mode, setMode, t }) {
  const opts = [
    { key: "desktop", label: t.viewport.d },
    { key: "tablet", label: t.viewport.t },
    { key: "mobile", label: t.viewport.m },
  ];
  return (
    <div className="viewport-switch">
      {opts.map((o) => (
        <button key={o.key} className={mode === o.key ? "is-active" : ""} onClick={() => setMode(o.key)}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

function PixelciusTweaks({ tweak, setTweak }) {
  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  const TSel = window.TweakSelect;
  if (!TP) return null;
  return (
    <TP title="Tweaks">
      <TS title="Color Palette">
        <TR
          value={tweak.palette}
          onChange={(v) => setTweak("palette", v)}
          options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.name }))}
        />
      </TS>
      <TS title="Typography">
        <TSel
          value={tweak.fontPair}
          onChange={(v) => setTweak("fontPair", v)}
          options={Object.entries(FONTS).map(([k, v]) => ({ value: k, label: v.name }))}
        />
      </TS>
    </TP>
  );
}

function App() {
  const [lang, setLang] = useState("en");
  const t = STRINGS[lang];

  // Production: ensure body has no viewport-simulator class
  useEffect(() => {
    document.body.classList.remove("is-desktop", "is-tablet", "is-mobile");
  }, []);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <Manifesto t={t} />
      <Games t={t} />
      <Contact t={t} />
      <Footer t={t} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

applyPalette(TWEAK_DEFAULTS.palette);
applyFonts(TWEAK_DEFAULTS.fontPair);