/* 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: "K-Pop Tap Stage", sub: "Rhythm · Mobile", badge: "Live", badgeKind: "demo", img: "games/kpop-tap-stage.png" },
        { id: "PXC-002", title: "Tile Travel", sub: "Match Puzzle · Mobile", badge: "Live", badgeKind: "demo", img: "games/tile-travel.png" },
        { id: "PXC-003", title: "Pet Salon Story", sub: "Casual Sim · Mobile", badge: "Live", badgeKind: "demo", img: "games/pet-salon-story.png" },
        { id: "PXC-004", title: "Block Builder Tales", sub: "Adventure Puzzle · Mobile", badge: "Soft Launch", badgeKind: "soon", img: "games/block-builder-tales.png" },
        { id: "PXC-005", title: "Story Cafe", sub: "Narrative · Mobile", badge: "Live", badgeKind: "demo", img: "games/story-cafe.png" },
        { id: "PXC-006", title: "Idle Cafe Tycoon", sub: "Idle Tycoon · Mobile", badge: "Live", badgeKind: "demo", img: "games/idle-cafe-tycoon.png" },
      ],
    },
    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: "K-Pop Tap Stage", sub: "Ritim · Mobil", badge: "Yayında", badgeKind: "demo", img: "games/kpop-tap-stage.png" },
        { id: "PXC-002", title: "Tile Travel", sub: "Eşleştirme · Mobil", badge: "Yayında", badgeKind: "demo", img: "games/tile-travel.png" },
        { id: "PXC-003", title: "Pet Salon Story", sub: "Casual Sim · Mobil", badge: "Yayında", badgeKind: "demo", img: "games/pet-salon-story.png" },
        { id: "PXC-004", title: "Block Builder Tales", sub: "Macera Bulmaca · Mobil", badge: "Soft Launch", badgeKind: "soon", img: "games/block-builder-tales.png" },
        { id: "PXC-005", title: "Story Cafe", sub: "Hikaye · Mobil", badge: "Yayında", badgeKind: "demo", img: "games/story-cafe.png" },
        { id: "PXC-006", title: "Idle Cafe Tycoon", sub: "Idle Tycoon · Mobil", badge: "Yayında", badgeKind: "demo", img: "games/idle-cafe-tycoon.png" },
      ],
    },
    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);
  const [SwordsmanCmp, setSwordsmanCmp] = React.useState(() => window.Swordsman || null);
  React.useEffect(() => {
    if (window.__pixelciusHeroInit) return;
    window.__pixelciusHeroInit = true;
    const s = document.createElement("script");
    s.src = "hero.js?v=6";
    document.body.appendChild(s);
  }, []);
  React.useEffect(() => {
    if (SwordsmanCmp) return;
    let raf;
    const check = () => {
      if (window.Swordsman) setSwordsmanCmp(() => window.Swordsman);
      else raf = requestAnimationFrame(check);
    };
    raf = requestAnimationFrame(check);
    return () => cancelAnimationFrame(raf);
  }, [SwordsmanCmp]);
  return (
    <section className="hero">
      <div className="hero__canvas" id="hero-canvas" ref={ref} />
      {SwordsmanCmp ? <SwordsmanCmp /> : null}
      <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">
        {card.img
          ? <img src={card.img} alt={card.title} loading="lazy" />
          : <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__credit" aria-label="Powered by Uğur Bilgiç">
        <span className="footer__credit-pre">Powered by</span>
        <span className="footer__credit-name">
          {Array.from("UĞUR BİLGİÇ").map((ch, i) => (
            <span key={i} className="footer__credit-char" style={{ animationDelay: `${i * 0.06}s` }}>
              {ch === " " ? "\u00a0" : ch}
            </span>
          ))}
        </span>
        <span className="footer__credit-line" aria-hidden="true"></span>
      </div>
      <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 useTweaks = window.useTweaks;
  const [tweak, setTweak] = useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [lang, setLang] = useState("en");

  useEffect(() => { applyPalette(tweak.palette); }, [tweak.palette]);
  useEffect(() => { applyFonts(tweak.fontPair); }, [tweak.fontPair]);

  const t = STRINGS[lang];

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

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

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