// app.jsx — Root component
const { useState, useEffect, useRef } = React;

const ACCENTS = {
  blue:   { color: 'oklch(0.78 0.18 220)', soft: 'oklch(0.78 0.18 220 / 0.12)', glow: 'oklch(0.78 0.18 220 / 0.4)' },
  purple: { color: 'oklch(0.72 0.22 305)', soft: 'oklch(0.72 0.22 305 / 0.12)', glow: 'oklch(0.72 0.22 305 / 0.4)' },
  green:  { color: 'oklch(0.84 0.20 140)', soft: 'oklch(0.84 0.20 140 / 0.12)', glow: 'oklch(0.84 0.20 140 / 0.4)' },
  white:  { color: 'oklch(0.97 0.005 250)', soft: 'oklch(0.97 0.005 250 / 0.10)', glow: 'oklch(0.97 0.005 250 / 0.3)' }
};

const DEFAULT_ACCENT = 'white';
const DEFAULT_LANG = 'fr';

function Nav({ t, lang, setLang, scrolled }) {
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#" className="nav-logo">
        <span className="dot"></span>
        VDS<span style={{ color: 'var(--accent)' }}>.</span>
      </a>
      <div className="nav-links">
        <a href="#probleme">{t.nav.problem}</a>
        <a href="#solution">{t.nav.solution}</a>
        <a href="#realisations">{t.nav.work}</a>
        <a href="#processus">{t.nav.process}</a>
        <a href="#avis">{t.nav.testimonials}</a>
      </div>
      <div className="nav-right">
        <div className="lang-switch">
          <button className={lang === 'fr' ? 'active' : ''} onClick={() => setLang('fr')}>FR</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
        <a href="#contact" className="btn-cta">
          {t.cta_top} <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

function Hero({ t }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => { setMounted(true); }, []);
  return (
    <section className="hero">
      <div className="hero-grid-bg"></div>
      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="live-dot"></span>
          <span className="mono">{t.hero.eyebrow}</span>
        </div>
        <h1>
          {t.hero.title.map((line, i) => (
            <span key={i} style={{ display: 'block' }}>
              <span className="word" style={{ animationDelay: `${i * 0.12}s` }}>
                {i === t.hero.title.length - 1 ? <em>{line}</em> : line}
              </span>
            </span>
          ))}
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-cta-row">
          <a href="#contact" className="btn-primary">{t.hero.ctaPrimary} <span>→</span></a>
          <a href="#realisations" className="btn-ghost">{t.hero.ctaGhost}</a>
        </div>
      </div>
      <div className="hero-canvas-wrap">
        <div className="hero-canvas-glow"></div>
        {mounted && <window.HeroSphere />}
      </div>
      <div className="hero-meta">
        {t.hero.meta.map((m, i) => (
          <div className="hero-meta-item" key={i}>
            <span>{m.k}</span>
            <b>{m.v}</b>
          </div>
        ))}
      </div>
      <div className="scroll-cue">
        <span>{t.hero.scrollLabel}</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

function App() {
  const [lang, setLang] = useState(() => {
    try {
      const stored = localStorage.getItem('vds-lang');
      if (stored === 'fr' || stored === 'en') return stored;
      const nav = (navigator.language || '').slice(0, 2).toLowerCase();
      if (nav === 'fr') return 'fr';
      if (nav) return 'en';
    } catch (e) {}
    return DEFAULT_LANG;
  });
  const [scrolled, setScrolled] = useState(false);
  const t = window.I18N[lang];

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // accent: default + optional ?accent= override
  useEffect(() => {
    let chosen = DEFAULT_ACCENT;
    try {
      const qs = new URLSearchParams(window.location.search);
      const q = qs.get('accent');
      if (q && ACCENTS[q]) chosen = q;
    } catch (e) {}
    const a = ACCENTS[chosen] || ACCENTS[DEFAULT_ACCENT];
    const root = document.documentElement;
    root.style.setProperty('--accent', a.color);
    root.style.setProperty('--accent-soft', a.soft);
    root.style.setProperty('--accent-glow', a.glow);
  }, []);

  useEffect(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem('vds-lang', lang); } catch (e) {}
  }, [lang]);

  return (
    <>
      <window.StarsBackground />
      <div className="grain"></div>
      <Nav t={t} lang={lang} setLang={setLang} scrolled={scrolled} />
      <Hero t={t} />
      <window.ProblemSection t={t.problem} />
      <window.SolutionSection t={t.solution} />
      <window.PortfolioSection t={t.portfolio} />
      <window.ProcessSection t={t.process} />
      <window.TestimonialsSection t={t.testimonials} />
      <window.CtaFinal t={t.cta} />
      <window.Footer t={t.footer} />

      <window.RocketScroll />
    </>
  );
}

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