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

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");
  const [drawerOpen, setDrawerOpen] = useState(false);

  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]);

  return (
    <React.Fragment>
      <div className="tvk-shell" id="top">
        <Topbar lang={lang} setLang={setLang} onMenu={() => setDrawerOpen(true)} />
        <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} t={strings} lang={lang} />

        {/* 1. HERO — Coimbatore District Chapter (party intro only) */}
        <Hero t={strings} lang={lang} />

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

        {/* Ticker — TVK ideologies marquee */}
        <IdeologyTicker t={strings} lang={lang} />

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

        {/* 4. About the party (moved up) */}
        <AboutSection t={strings} lang={lang} />

        {/* 5. Integrated Vijay × Sampath leadership composite */}
        <IntegratedLeadershipSection t={strings} lang={lang} />

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

        {/* 7. Five pillars (ideological leaders) */}
        <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 */}
        <Footer t={strings} 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 />);