// Root app — wires sections + Tweaks + EN/AR + smooth scroll.

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#f5a524",
  "headline_a": "Your car.",
  "headline_b": "From the factory.",
  "headline_c": "Delivered to Beirut.",
  "heroLayout": "fullbleed",
  "showCalculator": true,
  "language": "en"
}/*EDITMODE-END*/;

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(tw.language || "en");
  const [selectedCar, setSelectedCar] = useStateA(CARS[0].id);
  useReveal();

  // Apply accent override at runtime
  useEffectA(() => {
    document.documentElement.style.setProperty("--amber", tw.accent);
  }, [tw.accent]);

  // Sync language tweak ↔ state
  useEffectA(() => {
    if (tw.language && tw.language !== lang) setLang(tw.language);
  }, [tw.language]);
  useEffectA(() => {
    if (lang !== tw.language) setTweak("language", lang);
  }, [lang]);

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

  // Build current copy with tweakable headline override
  const t = React.useMemo(() => {
    const base = COPY[lang];
    if (lang !== "en") return base;
    return {
      ...base,
      hero: {
        ...base.hero,
        headline_a: tw.headline_a ?? base.hero.headline_a,
        headline_b: tw.headline_b ?? base.hero.headline_b,
        headline_c: tw.headline_c ?? base.hero.headline_c,
      },
    };
  }, [lang, tw.headline_a, tw.headline_b, tw.headline_c]);

  // Set dir on html
  useEffectA(() => {
    document.documentElement.setAttribute("dir", t.dir);
    document.documentElement.setAttribute("lang", lang);
  }, [t.dir, lang]);

  const onPickCar = (id) => {
    setSelectedCar(id);
    const el = document.getElementById("cost");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });
  };

  return (
    <div>
      <Nav lang={lang} setLang={setLang} t={t} />
      <SU7Hero lang={lang} />
      <HowItWorks t={t} lang={lang} />
      <WhyDirect t={t} lang={lang} />
      <ChinaReceipts />
      <PriceComparison />
      {tw.showCalculator && <Calculator t={t} lang={lang} selectedId={selectedCar} setSelectedId={setSelectedCar} />}
      <HonestSection />
      <TrustBlock t={t} lang={lang} />
      <FAQ t={t} lang={lang} />
      <FinaleDrive lang={lang} />
      <FinalCTA t={t} lang={lang} />
      <CrossPromo t={t} lang={lang} />
      <Footer t={t} lang={lang} />
      <StickyMobileCTA t={t} lang={lang} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={tw.accent} onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Language" value={lang} options={["en", "fr", "es", "ar"]} onChange={(v) => setLang(v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Line 1" value={tw.headline_a} onChange={(v) => setTweak("headline_a", v)} />
        <TweakText label="Line 2 (italic)" value={tw.headline_b} onChange={(v) => setTweak("headline_b", v)} />
        <TweakText label="Line 3 (accent)" value={tw.headline_c} onChange={(v) => setTweak("headline_c", v)} />

        <TweakSection label="Sections" />
        <TweakToggle label="Show landed-cost calculator" value={tw.showCalculator} onChange={(v) => setTweak("showCalculator", v)} />
      </TweaksPanel>
    </div>
  );
}

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