// App — Nav + Tweaks + page composition.

const { useState: useStateApp, useEffect: useEffectApp, useMemo } = React;

function Nav({ copy, lang, setLang }) {
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a className="nav__brand" href="#top" aria-label="UpScore AI">
          <img className="nav__brand-img" src="/logo.png" alt="UpScore AI" />
        </a>
        <div className="nav__links">
          {copy.links.map((l) => (
            <a key={l.id} href={'#' + l.id}>{l.label}</a>
          ))}
        </div>
        <div className="nav__right">
          <div className="nav__lang">
            <button aria-current={lang === 'ko'} onClick={() => setLang('ko')}>KO</button>
            <span style={{ color: 'var(--text-4)' }}>/</span>
            <button aria-current={lang === 'en'} onClick={() => setLang('en')}>EN</button>
          </div>
          <a className="btn btn--ghost" href="/app.html" style={{ padding: '8px 14px', fontSize: 13 }}>{copy.cta}</a>
        </div>
      </div>
    </nav>
  );
}

// Tweaks pulse — accent palette, language, density.
// Accent value is stored as an array of two hex colors [primary, secondary].
const ACCENT_PALETTES = [
  ['#00D4FF', '#7C3AED'], // cyan · violet (default)
  ['#9DC9E0', '#5A6E8C'], // cool mono
  ['#FFB454', '#E26A8A'], // amber · rose
  ['#4CD9A0', '#7C3AED'], // mint · violet
];

function applyAccent(palette) {
  const a = Array.isArray(palette) && palette.length >= 2 ? palette : ACCENT_PALETTES[0];
  document.documentElement.style.setProperty('--cyan', a[0]);
  document.documentElement.style.setProperty('--violet', a[1]);
}

function applyDensity(d) {
  const root = document.documentElement;
  if (d === 'tight') {
    root.style.setProperty('--max', '1120px');
  } else if (d === 'wide') {
    root.style.setProperty('--max', '1360px');
  } else {
    root.style.setProperty('--max', '1240px');
  }
}

function Tweaks({ t, setTweak }) {
  // useTweaks is exported by tweaks-panel.jsx as a hook;
  // here we just render the panel UI when the host activates edit mode.
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Language" />
      <TweakRadio
        label="언어"
        value={t.lang}
        onChange={(v) => setTweak('lang', v)}
        options={[
          { value: 'ko', label: 'KO' },
          { value: 'en', label: 'EN' },
        ]}
      />
      <TweakSection label="Accent" />
      <TweakColor
        label="Palette"
        value={t.accent}
        onChange={(v) => setTweak('accent', v)}
        options={ACCENT_PALETTES}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Width"
        value={t.density}
        onChange={(v) => setTweak('density', v)}
        options={[
          { value: 'tight', label: 'Tight' },
          { value: 'comfortable', label: 'Std' },
          { value: 'wide', label: 'Wide' },
        ]}
      />
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const lang = t.lang || 'ko';
  const copy = window.CONTENT[lang];

  useEffectApp(() => { document.body.dataset.lang = lang; document.documentElement.lang = lang; }, [lang]);
  useEffectApp(() => { applyAccent(t.accent); }, [t.accent]);
  useEffectApp(() => { applyDensity(t.density); }, [t.density]);

  // Smooth-scroll anchor handling
  useEffectApp(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id || id === 'top') {
        if (id === 'top') { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
        return;
      }
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        const y = el.getBoundingClientRect().top + window.scrollY - 60;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div id="top">
      <Nav copy={copy.nav} lang={lang} setLang={(v) => setTweak('lang', v)} />
      <Hero copy={copy.hero} />
      <Product copy={copy.product} />
      <Solution copy={copy.solution} />
      <Engine copy={copy.engine} />
      <Trust copy={copy.trust} />
      <Problem copy={copy.problem} />
      <Team copy={copy.team} />
      <Traction copy={copy.traction} />
      <Vision copy={copy.vision} />
      <CTA copy={copy.cta} />
      <Footer copy={copy.footer} />
      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

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