const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  direction: "garage",
  convertibleStyle: "video",
  accent: "#ff7a18",
}; /*EDITMODE-END*/

function applyDirection(dir, accent) {
  const root = document.documentElement;
  // direction shifts a few core variables
  if (dir === "cinematic") {
    root.style.setProperty("--bg-0", "#0e0c0a");
    root.style.setProperty("--bg-1", "#15110d");
    root.style.setProperty("--bg-2", "#1c1812");
    root.style.setProperty("--accent", "#e6a35c");
    root.style.setProperty("--font-display", "'Antonio', serif");
  } else if (dir === "brochure") {
    root.style.setProperty("--bg-0", "#f6f4ef");
    root.style.setProperty("--bg-1", "#ffffff");
    root.style.setProperty("--bg-2", "#ebe7df");
    root.style.setProperty("--bg-3", "#dbd6cb");
    root.style.setProperty("--ink-0", "#0a0b0d");
    root.style.setProperty("--ink-1", "#3a3f48");
    root.style.setProperty("--ink-2", "#6b7280");
    root.style.setProperty("--ink-3", "#9aa0aa");
    root.style.setProperty("--line", "#dcd6c8");
    root.style.setProperty("--line-bright", "#bcb5a4");
    root.style.setProperty("--accent", "#cc2333");
  } else if (dir === "luxury") {
    root.style.setProperty("--bg-0", "#0a0908");
    root.style.setProperty("--bg-1", "#15120e");
    root.style.setProperty("--bg-2", "#1c1812");
    root.style.setProperty("--bg-3", "#2a241a");
    root.style.setProperty("--ink-0", "#f4ecd8");
    root.style.setProperty("--accent", "#c9a96a");
    root.style.setProperty("--line", "#2a241a");
    root.style.setProperty("--line-bright", "#3a3324");
  } else {
    // garage (default)
    root.style.setProperty("--bg-0", "#0a0b0d");
    root.style.setProperty("--bg-1", "#0f1115");
    root.style.setProperty("--bg-2", "#14171c");
    root.style.setProperty("--bg-3", "#1b1f26");
    root.style.setProperty("--ink-0", "#f4f5f7");
    root.style.setProperty("--ink-1", "#c7ccd4");
    root.style.setProperty("--ink-2", "#8a909b");
    root.style.setProperty("--ink-3", "#5a606b");
    root.style.setProperty("--line", "#232830");
    root.style.setProperty("--line-bright", "#2e343f");
    root.style.setProperty("--accent", accent);
    root.style.setProperty("--font-display", "'Antonio', 'Oswald', sans-serif");
  }
  if (accent && dir === "garage") root.style.setProperty("--accent", accent);
}

function getInitialLang() {
  const path = window.location.pathname
    .replace(/\s+/g, "")
    .replace(/\/index\.html$/i, "")
    .replace(/\/+$/g, "");
  if (path === "/es" || path.startsWith("/es/")) return "es";
  if (path === "/de" || path.startsWith("/de/")) return "de";
  if (path === "/en" || path.startsWith("/en/")) return "en";
  return "en";
}

function App() {
  const [lang, setLang] = useState(getInitialLang);
  const [carfaxOpen, setCarfaxOpen] = useState(false);
  const tweaks = useTweaks(TWEAK_DEFAULTS);
  const t = tweaks.values;

  useEffect(() => {
    applyDirection(t.direction, t.accent);
  }, [t.direction, t.accent]);

  const copy = T[lang];

  return (
    <>
      <Header lang={lang} setLang={setLang} copy={copy} />
      <Hero copy={copy} />
      <VinRow copy={copy} lang={lang} onCarfax={() => setCarfaxOpen(true)} />
      <Specs copy={copy} />
      <Why copy={copy} />
      <History copy={copy} />
      <Convertible copy={copy} style={t.convertibleStyle} />
      <Gallery copy={copy} />
      <Terms copy={copy} />
      <ShowcaseVideo copy={copy} />
      <Contact copy={copy} />
      <Footer copy={copy} />
      {carfaxOpen && (
        <CarfaxModal copy={copy} onClose={() => setCarfaxOpen(false)} />
      )}

      <TweaksPanel title="Tweaks" tweaks={tweaks}>
        <TweakSection title="Visual direction">
          <TweakSelect
            tweak="direction"
            tweaks={tweaks}
            label="Aesthetic"
            options={[
              { value: "garage", label: "Garage (default)" },
              { value: "cinematic", label: "Cinematic" },
              { value: "brochure", label: "Brochure (light)" },
              { value: "luxury", label: "Luxury / cream" },
            ]}
          />
          <TweakColor
            tweak="accent"
            tweaks={tweaks}
            label="Accent color"
            options={["#ff7a18", "#cc2333", "#c9a96a", "#2dd4bf", "#e6a35c"]}
          />
        </TweakSection>
        <TweakSection title="Convertible block">
          <TweakRadio
            tweak="convertibleStyle"
            tweaks={tweaks}
            label="Style"
            options={[
              { value: "video", label: "Video loop" },
              { value: "parallax", label: "Photo parallax" },
              { value: "css", label: "CSS anim" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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

// Smooth reveal-on-scroll for every section
requestAnimationFrame(() => {
  const io = new IntersectionObserver(
    (entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    },
    { threshold: 0.12, rootMargin: "0px 0px -8% 0px" },
  );
  const attach = () =>
    document.querySelectorAll("section").forEach((s) => io.observe(s));
  attach();
  // Re-attach if React re-renders sections (lang change etc.)
  const mo = new MutationObserver(attach);
  mo.observe(document.getElementById("root"), {
    childList: true,
    subtree: true,
  });
});