/* ============================================================
   THE GREAT CLOUD — app shell
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4da6ff",
  "motion": true,
  "livePrices": true
}/*EDITMODE-END*/;

/* ---------------- Economy + Scarcity ---------------- */
function EconomySection({ live }) {
  return (
    <section className="section" id="economy">
      <div className="wrap">
        <div className="pillar-grid">
          <div className="pillar-copy reveal">
            <span className="num">Pillars 01 · 02 — Economy &amp; Scarcity</span>
            <h2>A market with a pulse.</h2>
            <p>
              Prices aren’t set by us. They move with what every player gathers, crafts,
              consumes and destroys — one shared, global economy. Above it sits a
              scarcity engine that keeps the rarest things rare without ever letting them
              vanish.
            </p>
            <ul className="feat-list">
              <li><span className="ic" /><span><b>Player-driven prices</b> <span className="t">— no fixed vendor values; the market finds its own.</span></span></li>
              <li><span className="ic" /><span><b>One global economy</b> <span className="t">— shared across every region, not split per server.</span></span></li>
              <li><span className="ic" /><span><b>Sinks &amp; taxes</b> <span className="t">— repair, crafting and fees keep circulation healthy.</span></span></li>
            </ul>
          </div>
          <div className="econ-stack">
            <MarketPanel live={live} />
            <ScarcityMeter />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Crafting ---------------- */
function CraftingSection() {
  return (
    <section className="section bg-2" id="crafting">
      <div className="wrap">
        <div className="loot-wrap">
          <div className="reveal"><CraftBench /></div>
          <div className="pillar-copy reveal">
            <span className="num">Pillar 03 — Meaningful Crafting</span>
            <h2>No two crafts alike.</h2>
            <p>
              Loot isn’t scattered on the ground — it’s <i>made</i>. Every recipe runs
              through controlled randomisation, so quality, stats and finish vary on
              every craft. Two players following the same recipe will rarely hold the
              same result.
            </p>
            <div className="rarity-legend">
              {((window.TGC.CRAFT && window.TGC.CRAFT.qualityGrades) || []).map((q, i, arr) => (
                <div className="rl" key={q.key} title={`${q.label} quality — stats ×${q.mult}`}>
                  <i className="chip" style={{ background: q.color, color: q.color }} />
                  <span className="nm" style={{ color: q.color }}>{q.label}</span>
                  <span className="odds">×{q.mult}</span>
                  <span className="bar"><i style={{ display: 'block', height: '100%', width: `${((i + 1) / arr.length) * 100}%`, background: q.color, opacity: 0.7 }} /></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- App ---------------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const worldRef = React.useRef(null);

  React.useEffect(() => {
    const c = document.getElementById('world-canvas');
    if (c && window.startWorld) {
      worldRef.current = window.startWorld(c);
      worldRef.current.setAccent(TWEAK_DEFAULTS.accent);
    }
    return () => { worldRef.current && worldRef.current.destroy(); };
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    worldRef.current && worldRef.current.setAccent(t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle('paused', !t.motion);
    worldRef.current && worldRef.current.setMotion(t.motion);
  }, [t.motion]);

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) return;
    document.documentElement.classList.add('tgc-anim');
    const io = new IntersectionObserver(
      (entries) => entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }),
      { threshold: 0.12, rootMargin: '0px 0px -8% 0px' },
    );
    els.forEach((e) => io.observe(e));
    const safety = setTimeout(() => els.forEach((e) => e.classList.add('in')), 4000);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);

  return (
    <React.Fragment>
      <TopBar />
      <main>
        <Hero />
        <Marquee />
        <TheCloud />
        <Pillars />
        <EconomySection live={t.livePrices} />
        <CraftingSection />
        <Zones />
        <Factions />
        <FairPlay />
        <Roadmap />
        <DevUpdates />
        <Waitlist />
      </main>
      <Footer />
      <div className="page-veil" />

      <TweaksPanel>
        <TweakSection label="World" />
        <TweakColor label="Accent" value={t.accent} options={['#4da6ff', '#b785ff', '#ffb14d', '#36d6c3']} onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Motion" value={t.motion} onChange={(v) => setTweak('motion', v)} />
        <TweakSection label="Economy" />
        <TweakToggle label="Live prices" value={t.livePrices} onChange={(v) => setTweak('livePrices', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

const rootEl = document.getElementById('root');
if (rootEl) {
  rootEl.innerHTML = '';
  ReactDOM.createRoot(rootEl).render(<App />);
}