// dib — App entry + tweaks integration
const { useEffect, useMemo } = React;

const ACCENT_PRESETS = {
  cyan:   '#22e3ff',
  blue:   '#5b8cff',
  purple: '#a45bff',
  mint:   '#3df0b3',
  amber:  '#ffb547',
  pink:   '#ff5b9c',
};

const TYPEFACES = {
  sora:   { display: "'Sora', system-ui, sans-serif",          body: "'Inter', system-ui, sans-serif" },
  inter:  { display: "'Inter', system-ui, sans-serif",         body: "'Inter', system-ui, sans-serif" },
  grotesk:{ display: "'Space Grotesk', system-ui, sans-serif", body: "'Inter', system-ui, sans-serif" },
};

const LANGS = [
  { value: 'en', label: 'English',  flag: '🇬🇧' },
  { value: 'de', label: 'Deutsch',  flag: '🇩🇪' },
  { value: 'ro', label: 'Română',   flag: '🇷🇴' },
  { value: 'fr', label: 'Français', flag: '🇫🇷' },
  { value: 'it', label: 'Italiano', flag: '🇮🇹' },
  { value: 'es', label: 'Español',  flag: '🇪🇸' },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "customColor": "#22e3ff",
  "glowIntensity": 35,
  "typeface": "sora",
  "motion": "medium",
  "language": "en",
  "theme": "dark"
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return `${r}, ${g}, ${b}`;
}

function applyAccent(color, glowIntensity = 35) {
  const root = document.documentElement;
  const rgb = hexToRgb(color);
  const alpha = (glowIntensity / 100).toFixed(2);
  root.style.setProperty('--accent', color);
  root.style.setProperty('--accent-dim',  `rgba(${rgb}, 0.20)`);
  root.style.setProperty('--accent-glow', `rgba(${rgb}, ${alpha})`);
  root.style.setProperty('--accent-soft', `rgba(${rgb}, 0.08)`);
}

function applyTweaks(t) {
  const root = document.documentElement;

  const color = t.accent === 'custom'
    ? t.customColor
    : (ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.cyan);
  applyAccent(color, t.glowIntensity ?? 35);

  const tp = TYPEFACES[t.typeface] || TYPEFACES.sora;
  root.style.setProperty('--display', tp.display);
  root.style.setProperty('--body', tp.body);

  document.body.classList.remove('motion-low', 'motion-medium', 'motion-high');
  document.body.classList.add(`motion-${t.motion}`);

  document.documentElement.lang = t.language || 'en';
  document.documentElement.setAttribute('data-theme', t.theme || 'dark');
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Reveal on scroll — re-bind whenever language changes (DOM is rebuilt)
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.language]);

  const t = useMemo(() => window.I18N[tweaks.language] || window.I18N.en, [tweaks.language]);

  return (
    <>
      <window.Nav t={t} tweaks={tweaks} setTweak={setTweak} langs={LANGS} presets={ACCENT_PRESETS} />
      <window.Hero t={t} />
      <window.Products t={t} />
      <window.About t={t} />
      <window.Process t={t} />
      <window.TechStack t={t} />
      <window.FAQ t={t} />
      <window.Footer t={t} />

      <window.TweaksPanel title={t.tweaks.title}>
<window.TweakSection title={t.tweaks.language}>
          <div className="lang-row">
            {LANGS.map(l => (
              <button
                key={l.value}
                className={`lang-btn ${tweaks.language === l.value ? 'lang-btn--on' : ''}`}
                onClick={() => setTweak('language', l.value)}
                aria-pressed={tweaks.language === l.value}
              >
                <span className="lang-btn__flag">{l.flag}</span>
                <span className="lang-btn__code">{l.value.toUpperCase()}</span>
              </button>
            ))}
          </div>
        </window.TweakSection>

        <window.TweakSection title={t.tweaks.accent}>
          <div className="swatch-row">
            {Object.entries(ACCENT_PRESETS).map(([key, color]) => (
              <button
                key={key}
                className={`swatch ${tweaks.accent === key ? 'swatch--on' : ''}`}
                style={{ background: color, boxShadow: tweaks.accent === key ? `0 0 0 2px var(--bg), 0 0 0 4px ${color}` : undefined }}
                onClick={() => setTweak('accent', key)}
                aria-label={key}
                title={key}
              />
            ))}
            <button
              className={`swatch swatch--custom ${tweaks.accent === 'custom' ? 'swatch--on' : ''}`}
              style={{
                background: `conic-gradient(from 0deg, #ff5b9c, #ffb547, #3df0b3, #22e3ff, #5b8cff, #a45bff, #ff5b9c)`,
                boxShadow: tweaks.accent === 'custom' ? `0 0 0 2px var(--bg), 0 0 0 4px ${tweaks.customColor}` : undefined,
              }}
              onClick={() => setTweak('accent', 'custom')}
              aria-label={t.tweaks.custom}
              title={t.tweaks.custom}
            />
          </div>

          {tweaks.accent === 'custom' && (
            <window.TweakColor
              label={t.tweaks.custom}
              value={tweaks.customColor}
              onChange={(v) => setTweak('customColor', v)}
            />
          )}
        </window.TweakSection>

        <window.TweakSection title={t.tweaks.typography}>
          <window.TweakRadio
            label={t.tweaks.pairing}
            value={tweaks.typeface}
            options={[
              { value: 'sora',    label: 'Sora'    },
              { value: 'inter',   label: 'Inter'   },
              { value: 'grotesk', label: 'Grotesk' },
            ]}
            onChange={(v) => setTweak('typeface', v)}
          />
        </window.TweakSection>

        <window.TweakSection title="Theme">
          <window.TweakRadio
            label="Mode"
            value={tweaks.theme}
            options={[
              { value: 'dark',  label: 'Dark'  },
              { value: 'light', label: 'Light' },
            ]}
            onChange={(v) => setTweak('theme', v)}
          />
        </window.TweakSection>

        <window.TweakSection title={t.tweaks.motion}>
          <window.TweakRadio
            label={t.tweaks.intensity}
            value={tweaks.motion}
            options={[
              { value: 'low',    label: t.tweaks.subtle },
              { value: 'medium', label: t.tweaks.medium },
              { value: 'high',   label: t.tweaks.heavy  },
            ]}
            onChange={(v) => setTweak('motion', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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