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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1E5BFF",
  "headlineStyle": "split",
  "showMarquee": true,
  "defaultLang": "en"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(() => {
    try {
      const saved = localStorage.getItem('inex_lang');
      if (saved === 'en' || saved === 'pt') return saved;
    } catch {}
    return tweaks.defaultLang || 'en';
  });
  useEffect(() => {
    try { localStorage.setItem('inex_lang', lang); } catch {}
    document.documentElement.lang = lang;
  }, [lang]);

  useEffect(() => {
    document.documentElement.style.setProperty('--blue', tweaks.accent);
    const r = parseInt(tweaks.accent.slice(1,3),16),
          g = parseInt(tweaks.accent.slice(3,5),16),
          b = parseInt(tweaks.accent.slice(5,7),16);
    document.documentElement.style.setProperty('--blue-glow', `rgba(${r},${g},${b},0.45)`);
    document.documentElement.style.setProperty('--blue-2', tweaks.accent);
  }, [tweaks.accent]);

  return (
    <window.LangContext.Provider value={{ lang, setLang }}>
      <Page tweaks={tweaks} setTweak={setTweak} />
    </window.LangContext.Provider>
  );
}

function Page({ tweaks, setTweak }) {
  const { t } = window.useT();
  const headlineNode = (() => {
    const h = t.hero.headline;
    if (tweaks.headlineStyle === 'plain') return <span>{h}</span>;
    if (tweaks.headlineStyle === 'allgrad') return <span className="gradient-text">{h}</span>;
    const hl = t.hero.headlineHighlight;
    const idx = h.indexOf(hl);
    if (idx >= 0) {
      return (<>{h.slice(0, idx)}<span className="gradient-text">{hl}</span>{h.slice(idx + hl.length)}</>);
    }
    return <span className="gradient-text">{h}</span>;
  })();

  return (
    <div className="page">
      <Nav />
      <HeroPatched headlineNode={headlineNode} />
      {tweaks.showMarquee && <Marquee />}
      <Problem />
      <Framework />
      <Agents showTerminal={false} />
      <Results />
      <Synapse />
      <Why />
      <ParentCompany />
      <EventBanner />
      <FinalCTA />
      <Footer />

      <TweaksPanel title={t.tweaks.title}>
        <TweakSection title={t.tweaks.brand}>
          <TweakColor label={t.tweaks.accent} value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection title={t.tweaks.hero}>
          <TweakRadio
            label={t.tweaks.headlineTreatment}
            value={tweaks.headlineStyle}
            options={[
              { value: 'split', label: t.tweaks.tHighlight },
              { value: 'allgrad', label: t.tweaks.tFullGrad },
              { value: 'plain', label: t.tweaks.tPlain },
            ]}
            onChange={(v) => setTweak('headlineStyle', v)}
          />
        </TweakSection>
        <TweakSection title={t.tweaks.sections}>
          <TweakToggle label={t.tweaks.showMarquee} value={tweaks.showMarquee} onChange={(v) => setTweak('showMarquee', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function HeroPatched({ headlineNode }) {
  const { t } = window.useT();
  return (
    <section className="hero">
      <div className="grid-bg"></div>
      <div className="container hero-grid">
        <div>
          <span className="kicker"><span className="pulse"></span>{t.hero.kicker}</span>
          <h1 style={{ marginTop: 28 }}>{headlineNode}</h1>
          <p className="lead hero-sub">{t.hero.sub}</p>
          <div className="hero-cta">
            <a href="#cta" className="btn btn-primary">{t.hero.ctaPrimary} <span className="arrow">→</span></a>
            <a href="#solution" className="btn btn-ghost">{t.hero.ctaSecondary}</a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat">
              <div className="num">{t.hero.stat1Num.replace('10×', '')}<span className="blue">10×</span></div>
              <div className="lbl">{t.hero.stat1Lbl}</div>
            </div>
            <div className="hero-stat">
              <div className="num"><span className="blue">{t.hero.stat2Num}</span></div>
              <div className="lbl">{t.hero.stat2Lbl}</div>
            </div>
            <div className="hero-stat">
              <div className="num"><span className="blue">{t.hero.stat3Num}</span></div>
              <div className="lbl">{t.hero.stat3Lbl}</div>
            </div>
          </div>
        </div>
        <AgentConstellation />
      </div>
    </section>
  );
}

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