// Main App: orchestrates language toggle, tweaks, assembles sections

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "palette": "brand",
  "density": "normal",
  "hero_variant": "conversation"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem('idna_lang') || TWEAK_DEFAULTS.lang);
  const [palette, setPalette] = useState(TWEAK_DEFAULTS.palette);
  const [density, setDensity] = useState(TWEAK_DEFAULTS.density);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [playing, setPlaying] = useState(false);

  const t = window.IDNA_CONTENT[lang];

  useEffect(() => {
    localStorage.setItem('idna_lang', lang);
    document.documentElement.lang = lang;
  }, [lang]);

  useEffect(() => {
    document.body.className = `palette-${palette} density-${density}`;
  }, [palette, density]);

  // Edit mode protocol
  useEffect(() => {
    function onMsg(e) {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    }
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (key, val) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  };

  const audioRef = useRef(null);
  if (!audioRef.current) {
    const a = new Audio('/landing-new/assets/idna-teach.mp3');
    a.preload = 'none';
    a.onended = () => setPlaying(false);
    a.onerror = () => setPlaying(false);
    audioRef.current = a;
  }

  const handlePlay = () => {
    const audio = audioRef.current;
    if (!playing) {
      audio.currentTime = 0;
      audio.play().then(() => setPlaying(true)).catch(() => setPlaying(false));
    } else {
      audio.pause();
      setPlaying(false);
    }
  };

  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <a href="#" className="brand">
            <img src="/landing-new/assets/idna-logo.png" alt="IDNA" className="brand-logo" />
            <span className="brand-wm">
              <span className="w1">idna <em>edtech</em></span>
              <span className="w2">Voice-based AI Tutor</span>
            </span>
          </a>
          <div className="nav-links">
            <a href="#product">{t.nav.product}</a>
            <a href="#languages">{t.nav.languages}</a>
            <a href="#parents">{t.nav.parents}</a>
            <a href="#faq">{t.nav.faq}</a>
          </div>
          <div className="nav-right">
            <div className="lang-toggle">
              <button className={lang === 'en' ? 'on' : ''} onClick={() => { setLang('en'); persist('lang', 'en'); }}>EN</button>
              <button className={lang === 'hi' ? 'on' : ''} onClick={() => { setLang('hi'); persist('lang', 'hi'); }}>हिं</button>
            </div>
            <a href="/login" className="btn small">{t.nav.cta} →</a>
          </div>
        </div>
      </nav>

      <Hero t={t} onPlay={handlePlay} playing={playing} />
      <Problem t={t} />
      <Promise2 t={t} />
      <HowItWorks t={t} />
      <Availability t={t} />
      <Languages t={t} />
      <Parents t={t} />
      <FAQComp t={t} />
      <Closer t={t} />

      <div className={`tweaks ${tweaksOpen ? 'open' : ''}`}>
        <div className="tweaks-head">
          <h3>Tweaks</h3>
          <button
            onClick={() => setTweaksOpen(false)}
            style={{ background: 'transparent', color: 'var(--paper)', border: 0, cursor: 'pointer', fontFamily: 'JetBrains Mono, monospace', fontSize: '14px' }}
          >×</button>
        </div>
        <div className="tweaks-body">
          <div className="tweak">
            <label>Language</label>
            <div className="tweak-buttons">
              <button className={lang === 'en' ? 'on' : ''} onClick={() => { setLang('en'); persist('lang', 'en'); }}>English</button>
              <button className={lang === 'hi' ? 'on' : ''} onClick={() => { setLang('hi'); persist('lang', 'hi'); }}>हिन्दी</button>
            </div>
          </div>
          <div className="tweak">
            <label>Palette</label>
            <div className="tweak-buttons">
              <button className={palette === 'brand' ? 'on' : ''} onClick={() => { setPalette('brand'); persist('palette', 'brand'); }}>Brand</button>
              <button className={palette === 'deep' ? 'on' : ''} onClick={() => { setPalette('deep'); persist('palette', 'deep'); }}>Deep Blue</button>
              <button className={palette === 'leaf' ? 'on' : ''} onClick={() => { setPalette('leaf'); persist('palette', 'leaf'); }}>Leaf</button>
              <button className={palette === 'warm-orig' ? 'on' : ''} onClick={() => { setPalette('warm-orig'); persist('palette', 'warm-orig'); }}>Warm (old)</button>
            </div>
          </div>
          <div className="tweak">
            <label>Density</label>
            <div className="tweak-buttons">
              <button className={density === 'compact' ? 'on' : ''} onClick={() => { setDensity('compact'); persist('density', 'compact'); }}>Compact</button>
              <button className={density === 'normal' ? 'on' : ''} onClick={() => { setDensity('normal'); persist('density', 'normal'); }}>Normal</button>
              <button className={density === 'spacious' ? 'on' : ''} onClick={() => { setDensity('spacious'); persist('density', 'spacious'); }}>Spacious</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

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