/* app.jsx — Main App. New section order: party first, then MLAs, then Sampath. */

// Shared chrome (SAME components used on every page of the site).
const { SiteTopbar, SiteFooter } = window.SiteChrome;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "defaultLang": "en",
  "accentScheme": "classic",
  "showCrowdBg": true,
  "showElephants": true,
  "showStarsHalo": true,
  "showVictoryTicker": true,
  "showVideoSlots": true,
  "headlineStyle": "oswald"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, _setLang] = useState(t.defaultLang || "en");

  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const setLang = (l) => { _setLang(l); setTweak("defaultLang", l); };
  const strings = I18N[lang];

  useEffect(() => {
    const root = document.documentElement;
    if (t.accentScheme === "deep") {
      root.style.setProperty("--red-600", "#8E0A12");
      root.style.setProperty("--red-800", "#3F060B");
      root.style.setProperty("--gold-500", "#E0AE12");
    } else if (t.accentScheme === "bright") {
      root.style.setProperty("--red-600", "#D11820");
      root.style.setProperty("--red-800", "#6A0E15");
      root.style.setProperty("--gold-500", "#FFCB1A");
    } else {
      root.style.removeProperty("--red-600");
      root.style.removeProperty("--red-800");
      root.style.removeProperty("--gold-500");
    }
  }, [t.accentScheme]);

  useEffect(() => {
    const root = document.documentElement;
    if (t.headlineStyle === "anton") {
      root.style.setProperty("--font-display", '"Anton", "Oswald", "Catamaran", system-ui, sans-serif');
    } else if (t.headlineStyle === "bebas") {
      root.style.setProperty("--font-display", '"Bebas Neue", "Oswald", "Catamaran", system-ui, sans-serif');
    } else if (t.headlineStyle === "archivo") {
      root.style.setProperty("--font-display", '"Archivo Black", "Oswald", "Catamaran", system-ui, sans-serif');
    } else {
      root.style.removeProperty("--font-display");
    }
  }, [t.headlineStyle]);

  // ─────────────────────────────────────────────────────────────
  // Lenis smooth scroll — Lenis 1.1.x with manual RAF loop.
  // (Earlier I used `autoRaf: true`, which only exists in Lenis ≥ 1.2;
  // on 1.1.13 it silently no-ops, Lenis hijacks the scroll but the
  // frame loop never advances and the page freezes. Manual RAF is
  // compatible with every Lenis version, so we stick with it.)
  // ─────────────────────────────────────────────────────────────
  useEffect(() => {
    if (typeof window === "undefined" || typeof window.Lenis !== "function") return;

    document.documentElement.style.scrollBehavior = "auto";

    const lenis = new window.Lenis({
      lerp: 0.1,
      smoothWheel: true,
      syncTouch: false,
      wheelMultiplier: 1.0,
      touchMultiplier: 1.0,
    });

    let rafId;
    const raf = (time) => {
      lenis.raf(time);
      rafId = requestAnimationFrame(raf);
    };
    rafId = requestAnimationFrame(raf);

    window.__lenis = lenis;

    const NAV_OFFSET = () => (window.innerWidth >= 900 ? 84 : 68);

    const onAnchorClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href^="#"]');
      if (!a) return;
      const href = a.getAttribute("href");
      if (!href || href === "#" || href.length < 2) return;
      const el = document.getElementById(href.slice(1));
      if (!el) return;
      e.preventDefault();
      lenis.scrollTo(el, { offset: -NAV_OFFSET(), duration: 1.0 });
      if (history && history.replaceState) history.replaceState(null, "", href);
    };
    document.addEventListener("click", onAnchorClick);

    if (window.location.hash && window.location.hash.length > 1) {
      const el = document.getElementById(window.location.hash.slice(1));
      if (el) setTimeout(() => lenis.scrollTo(el, { offset: -NAV_OFFSET(), duration: 1.0 }), 200);
    }

    return () => {
      cancelAnimationFrame(rafId);
      document.removeEventListener("click", onAnchorClick);
      lenis.destroy();
      delete window.__lenis;
      document.documentElement.style.scrollBehavior = "";
    };
  }, []);

  return (
    <React.Fragment>
      <div className="tvk-shell" id="top">
        <SiteTopbar lang={lang} setLang={setLang} />

        {/* 1. HERO — Coimbatore District Chapter (with principles strip inside) */}
        <Hero t={strings} lang={lang} />

        {/* 2. Party Leadership composite (Vijay × flag × Sampath artwork) —
            moved here per user request: right after the Hero / 5 principles */}
        <IntegratedLeadershipSection t={strings} lang={lang} />

        {/* 3. District Secretary section (Sampath poster card) */}
        <DistrictSecretarySection t={strings} lang={lang} />

        {/* 3a. Auto-scrolling yellow ideologies ticker */}
        <IdeologyTicker t={strings} lang={lang} />

        {/* 3b. TVK Icon Strip (whistle + flag + TVK · WHISTLE · COIMBATORE 2026) */}
        <TvkIconStrip lang={lang} />

        {/* 4. Two Coimbatore Ministers (Sampath + Vignesh) */}
        <MinistersSection t={strings} lang={lang} />

        {/* 5. All Coimbatore MLAs uniform cards */}
        <MlasSection t={strings} lang={lang} />

        {/* 6. About the party (with flag description) */}
        <AboutSection t={strings} lang={lang} />

        {/* 8. Sampath full biography */}
        <BioSection t={strings} lang={lang} />

        {/* 9. Five Pillars (ideological leader portraits) */}
        <IdeologySection t={strings} lang={lang} />

        {/* 8. Newsroom (image-prominent featured cards) */}
        <ArticlesSection t={strings} lang={lang} />

        {/* 9. Events */}
        <EventsSection t={strings} lang={lang} />

        {/* 10. Join CTA */}
        <JoinSection t={strings} lang={lang} />

        {/* 11. Footer — shared chrome component, used on every page of the site */}
        <SiteFooter lang={lang} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Default language"
            value={t.defaultLang}
            options={[{ value: "en", label: "EN" }, { value: "ta", label: "தமிழ்" }]}
            onChange={(v) => { setTweak("defaultLang", v); _setLang(v); }}
          />
        </TweakSection>

        <TweakSection label="Brand">
          <TweakRadio
            label="Headline font"
            value={t.headlineStyle}
            options={[
              { value: "oswald",  label: "Oswald" },
              { value: "anton",   label: "Anton" },
              { value: "bebas",   label: "Bebas" },
            ]}
            onChange={(v) => setTweak("headlineStyle", v)}
          />
          <TweakRadio
            label="Accent scheme"
            value={t.accentScheme}
            options={[
              { value: "classic", label: "Classic" },
              { value: "deep",    label: "Deep" },
              { value: "bright",  label: "Bright" },
            ]}
            onChange={(v) => setTweak("accentScheme", v)}
          />
        </TweakSection>

        <TweakSection label="Hero Effects">
          <TweakToggle label="Crowd backdrop"     value={t.showCrowdBg}     onChange={(v) => setTweak("showCrowdBg", v)} />
          <TweakToggle label="Twin elephants"     value={t.showElephants}   onChange={(v) => setTweak("showElephants", v)} />
          <TweakToggle label="Vagai halo (spin)"  value={t.showStarsHalo}   onChange={(v) => setTweak("showStarsHalo", v)} />
          <TweakToggle label="Victory ticker"     value={t.showVictoryTicker} onChange={(v) => setTweak("showVictoryTicker", v)} />
          <TweakToggle label="Video slot markers" value={t.showVideoSlots}  onChange={(v) => setTweak("showVideoSlots", v)} />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        ${t.showCrowdBg     ? "" : ".hero .crowd-bg, .foot-crowd { display:none; }"}
        ${t.showElephants   ? "" : ".hero .elephants { display:none; }"}
        ${t.showStarsHalo   ? "" : ".hero .stars-halo, .bio-hero::before, .join-block::before { display:none; }"}
        ${t.showVictoryTicker ? "" : ".hero-victory { display:none; }"}
        ${t.showVideoSlots  ? "" : ".video-placeholder-tag { display:none; }"}
      `}</style>
    </React.Fragment>
  );
}

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