// chrome.jsx — Single source of truth for the navbar + footer on every page
// of tvkcovai.com.
//
// Architecture:
// - Homepage (index.html) loads this file BEFORE sections.jsx + app.jsx.
//   app.jsx grabs SiteTopbar + SiteFooter off window.SiteChrome and renders
//   them inline as part of the React tree.
// - Every other page (enquiry, join-tvk, gallery, all MLA pages, all blog
//   pages) declares <div id="site-topbar"></div> and <div id="site-footer">
//   </div> and this file auto-mounts via React portals into those slots.
//   One React tree, one lang state, identical markup, identical CSS.

(function () {
  const { useState, useEffect, Fragment } = React;
  const LANG_KEY = "tvkcovai-lang";

  // ───────── lang state (shared with non-React :root[lang="..."] CSS) ─────────
  function getInitialLang() {
    try {
      const stored = localStorage.getItem(LANG_KEY);
      if (stored === "en" || stored === "ta") return stored;
    } catch (e) {}
    return document.documentElement.lang === "ta" ? "ta" : "en";
  }
  function useTvkLang() {
    const [lang, setLang] = useState(getInitialLang);
    useEffect(() => {
      document.documentElement.lang = lang;
      try { localStorage.setItem(LANG_KEY, lang); } catch (e) {}
    }, [lang]);
    return [lang, setLang];
  }

  // Anchor href helper — homepage uses `#foo`, every other page uses `/#foo`
  // so the browser goes back to home and then scrolls to the anchor.
  const isHome = () =>
    location.pathname === "/" ||
    location.pathname === "/index.html" ||
    location.pathname === "";
  const a = (h) => (isHome() ? h : "/" + h);

  // ───────────────────────── i18n strings (chrome only) ─────────────────────
  const T = {
    en: {
      home_aria: "TVK Covai home",
      brand_en: "TVK COVAI",
      brand_ta: "தவெக கோவை",
      nav_party: "Party",
      nav_district: "District Secretary",
      nav_ministers: "Ministers",
      nav_mlas: "MLAs",
      nav_news: "News",
      nav_events: "Events",
      nav_contact: "Contact",
      menu_open: "Open menu",
      menu_close: "CLOSE",
      foot_pre: "TVK COIMBATORE",
      foot_h: "Stand with TVK Coimbatore.",
      foot_p: "Tamilaga Vettri Kazhagam, Coimbatore District. The official Coimbatore chapter.",
      btn_join: "Join TVK",
      btn_enquiry: "Enquiry / Complaints",
      wordmark_ta: "தமிழக வெற்றிக் கழகம்",
      copyright: "© 2026 TVK Coimbatore District Committee · tvkcovai.com",
      col_party: "PARTY",
      col_org: "ORGANISATION",
      col_updates: "UPDATES",
      col_more: "MORE",
      l_about: "About TVK",
      l_ideology: "Ideology",
      l_minister: "Minister Sampath",
      l_leadership: "Leadership",
      l_mlas: "MLAs",
      l_district_str: "District Structure",
      l_announcements: "Announcements",
      l_events: "Events",
      l_newsroom: "Newsroom",
      l_gallery: "Gallery",
      l_contact: "Contact",
      office_label: "DISTRICT OFFICE",
      office_addr: "TVK Coimbatore City Office, Coimbatore North, Tamil Nadu",
      media_label: "MEDIA DESK",
      media_val: "+91 · Coming Soon",
      built_label: "SITE BUILT & MAINTAINED BY",
      built_brand: "Digital and Design Solutions",
      foot_cutout_alt: "Hon. Minister Sampath Kumar with the TVK party flag",
    },
    ta: {
      home_aria: "தவெக கோவை முகப்பு",
      brand_en: "TVK COVAI",
      brand_ta: "தவெக கோவை",
      nav_party: "கட்சி",
      nav_district: "மாவட்டச் செயலாளர்",
      nav_ministers: "அமைச்சர்கள்",
      nav_mlas: "எம்.எல்.ஏ.க்கள்",
      nav_news: "செய்தி",
      nav_events: "நிகழ்வுகள்",
      nav_contact: "தொடர்பு",
      menu_open: "மெனு திற",
      menu_close: "மூடு",
      foot_pre: "தவெக கோவை",
      foot_h: "தவெக கோவையுடன் கைகோர்க்கவும்.",
      foot_p: "தமிழக வெற்றிக் கழகம், கோவை மாவட்டம். அதிகாரப்பூர்வ கோவை அமைப்பு.",
      btn_join: "தவெகவில் சேர",
      btn_enquiry: "புகார் / விசாரணை",
      wordmark_ta: "தமிழக வெற்றிக் கழகம்",
      copyright: "© 2026 தவெக கோவை மாவட்டக் குழு · tvkcovai.com",
      col_party: "கட்சி",
      col_org: "அமைப்பு",
      col_updates: "புதுப்பிப்புகள்",
      col_more: "மேலும்",
      l_about: "தவெக பற்றி",
      l_ideology: "கருத்தியல்",
      l_minister: "அமைச்சர் சம்பத்",
      l_leadership: "தலைமை",
      l_mlas: "எம்.எல்.ஏ.க்கள்",
      l_district_str: "மாவட்ட அமைப்பு",
      l_announcements: "அறிவிப்புகள்",
      l_events: "நிகழ்வுகள்",
      l_newsroom: "செய்தியியல்",
      l_gallery: "புகைப்படத் தொகுப்பு",
      l_contact: "தொடர்பு",
      office_label: "மாவட்ட அலுவலகம்",
      office_addr: "தவெக கோவை மாநகர அலுவலகம், கோவை வடக்கு, தமிழ்நாடு",
      media_label: "ஊடகத் தொடர்பு",
      media_val: "+91 · விரைவில்",
      built_label: "வடிவமைப்பு & பராமரிப்பு",
      built_brand: "Digital and Design Solutions",
      foot_cutout_alt: "மாண்புமிகு அமைச்சர் சம்பத்குமார் தவெக கொடியுடன்",
    },
  };

  // ───────────────────────── Topbar ──────────────────────────────
  function SiteTopbar({ lang, setLang }) {
    const [drawerOpen, setDrawerOpen] = useState(false);
    const t = T[lang];
    return (
      <Fragment>
        <header className="tvk-topbar">
          <a className="tvk-mark" href={isHome() ? "#top" : "/"} aria-label={t.home_aria}>
            <img className="tvk-mark-logo" src="/assets/branding/tvk-logo-192.png?v=2" alt="TVK" width="40" height="40" />
            <span className="word">
              <span className="en">{t.brand_en}</span>
              <span className="ta">{t.brand_ta}</span>
            </span>
          </a>
          <nav className="tvk-nav-desktop" aria-label="Main">
            <a href={a("#party")}>{t.nav_party}</a>
            <a href={a("#district")}>{t.nav_district}</a>
            <a href={a("#ministers")}>{t.nav_ministers}</a>
            <a href={a("#mlas")}>{t.nav_mlas}</a>
            <a href={a("#articles")}>{t.nav_news}</a>
            <a href={a("#events")}>{t.nav_events}</a>
            <a href={a("#contact")}>{t.nav_contact}</a>
          </nav>
          <div className="topbar-right">
            <div className="lang-switch" data-lang={lang} role="tablist" aria-label="Language">
              <div className="thumb" aria-hidden="true"></div>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")} role="tab" aria-selected={lang === "en"}>EN</button>
              <button className={lang === "ta" ? "active" : ""} onClick={() => setLang("ta")} role="tab" aria-selected={lang === "ta"}>த</button>
            </div>
            <button className="menu-btn" onClick={() => setDrawerOpen(true)} aria-label={t.menu_open}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
            </button>
          </div>
        </header>
        <SiteDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} lang={lang} />
      </Fragment>
    );
  }

  // ───────────────────────── Drawer ──────────────────────────────
  function SiteDrawer({ open, onClose, lang }) {
    const t = T[lang];
    return (
      <Fragment>
        <div className={"drawer-scrim " + (open ? "open" : "")} onClick={onClose}></div>
        <aside className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
          <div className="drawer-head">
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--gold-400)" }}>{t.brand_en}</div>
            <button className="drawer-close" onClick={onClose}>{t.menu_close} ✕</button>
          </div>
          <h4>{t.col_party}</h4>
          <ul>
            <li><a href={a("#party")} onClick={onClose}>{t.l_about}</a></li>
            <li><a href={a("#district")} onClick={onClose}>{t.nav_district}</a></li>
            <li><a href={a("#ministers")} onClick={onClose}>{t.nav_ministers}</a></li>
            <li><a href={a("#leadership")} onClick={onClose}>{t.l_leadership}</a></li>
            <li><a href={a("#ideology")} onClick={onClose}>{t.l_ideology}</a></li>
          </ul>
          <h4>{t.col_org}</h4>
          <ul>
            <li><a href={a("#mlas")} onClick={onClose}>{t.l_mlas}</a></li>
            <li><a href={a("#bio")} onClick={onClose}>{t.l_minister}</a></li>
            <li><a href={a("#events")} onClick={onClose}>{t.l_events}</a></li>
          </ul>
          <h4>{t.col_more}</h4>
          <ul>
            <li><a href={a("#articles")} onClick={onClose}>{t.l_newsroom}</a></li>
            <li><a href="/join-tvk/" onClick={onClose}>{t.btn_join}</a></li>
            <li><a href="/enquiry/" onClick={onClose}>{t.btn_enquiry}</a></li>
            <li><a href={a("#contact")} onClick={onClose}>{t.l_contact}</a></li>
          </ul>
        </aside>
      </Fragment>
    );
  }

  // ───────────────────────── Footer ──────────────────────────────
  function SiteFooter({ lang }) {
    const t = T[lang];
    return (
      <footer className="tvk-foot" id="contact" data-screen-label="Footer">
        <div className="foot-hero">
          <div className="foot-bg-layer foot-crowd" aria-hidden="true"></div>
          <div className="foot-bg-layer foot-flag" aria-hidden="true"></div>
          <div className="foot-cutout" role="img" aria-label={t.foot_cutout_alt}></div>
          <div className="foot-cta">
            <span className="pre">{t.foot_pre}</span>
            <h3>{t.foot_h}</h3>
            <p>{t.foot_p}</p>
            <div className="foot-cta-row">
              <a className="btn-gold" href="/join-tvk/">
                {t.btn_join}
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9"/></svg>
              </a>
              <a className="btn-outline-light" href="/enquiry/">
                {t.btn_enquiry}
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9"/></svg>
              </a>
            </div>
            <div className="foot-socials-inline">
              <a className="ic" href="#" aria-label="X (Twitter)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
              <a className="ic" href="https://www.instagram.com/tvksampathcbe/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".7" fill="currentColor"/></svg></a>
              <a className="ic" href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.5 22v-8H7v-3.5h2.5V8c0-2.5 1.5-4 3.8-4 1.1 0 2 .2 2.2.2v2.6h-1.5c-1.2 0-1.5.6-1.5 1.4v2.3H16l-.5 3.5h-2.5V22"/></svg></a>
              <a className="ic" href="#" aria-label="Threads"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12c0 5.5 4.5 10 10 10s10-4.5 10-10C22 6.5 17.5 2 12 2zm0 18.2c-4.5 0-8.2-3.7-8.2-8.2S7.5 3.8 12 3.8s8.2 3.7 8.2 8.2-3.7 8.2-8.2 8.2zm3.8-8.6c-.2-.1-.4-.2-.6-.3 0-2.6-1.4-4.1-3.6-4.1-1.3 0-2.4.5-3 1.5l1 .7c.4-.6 1.1-.9 2-.9 1.4 0 2.1.9 2.2 2.6h-.1c-1.7-.1-3.1.2-3.9 1.1-.5.5-.7 1.2-.7 2 .1 1.5 1.4 2.5 3 2.5 1.4 0 2.4-.5 3-1.7.4.5.7 1 .8 1.7l1.1-.6c-.1-.7-.5-1.4-1.2-2 .1-.3.1-.5 0-.7zm-3.7 2.4c-.7 0-1.6-.3-1.7-1.1 0-.5.4-1.2 2.1-1.2.3 0 .7 0 1 .1 0 1.4-.6 2.2-1.4 2.2z"/></svg></a>
            </div>
          </div>
        </div>

        <div className="foot-wordmark">
          <div className="foot-wordmark-brand">
            <div className="en">{t.brand_en}</div>
            <div className="ta">{t.wordmark_ta}</div>
            <div className="domain num">tvkcovai.com</div>
          </div>
          <div className="foot-wordmark-copy">{t.copyright}</div>
        </div>

        <div className="foot-cols foot-cols-trim">
          <div>
            <h5>{t.col_party}</h5>
            <ul>
              <li><a href={a("#party")}>{t.l_about}</a></li>
              <li><a href={a("#ideology")}>{t.l_ideology}</a></li>
              <li><a href={a("#bio")}>{t.l_minister}</a></li>
              <li><a href={a("#leadership")}>{t.l_leadership}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.col_org}</h5>
            <ul>
              <li><a href="/mlas/">{t.l_mlas}</a></li>
              <li><a href={a("#mlas")}>{t.l_district_str}</a></li>
              <li><a href={a("#ministers")}>{t.nav_ministers}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.col_updates}</h5>
            <ul>
              <li><a href={a("#articles")}>{t.l_announcements}</a></li>
              <li><a href={a("#events")}>{t.l_events}</a></li>
              <li><a href="/blog/">{t.l_newsroom}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.col_more}</h5>
            <ul>
              <li><a href="/gallery/">{t.l_gallery}</a></li>
              <li><a href="/enquiry/">{t.l_contact}</a></li>
              <li><a href="/join-tvk/">{t.btn_join}</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-meta foot-meta-compact">
          <div className="foot-meta-cell">
            <b>{t.office_label}</b>
            {t.office_addr}
          </div>
          <div className="foot-meta-cell">
            <b>{t.media_label}</b>
            {t.media_val}
          </div>
        </div>

        {/* Built-by attribution — own row, centered, modest prominence */}
        <div className="foot-builtby">
          <a className="foot-builtby-card" href="https://digitalanddesignsolutions.com/" target="_blank" rel="noopener" aria-label="Site built and maintained by Digital and Design Solutions">
            <span className="foot-builtby-label">{t.built_label}</span>
            <img src="/assets/branding/dds-logo-light.png" alt="Digital and Design Solutions" loading="lazy" />
          </a>
        </div>
      </footer>
    );
  }

  // ─────── auto-mount via portals (for pages outside the React app) ──────────
  function ChromeApp() {
    const [lang, setLang] = useTvkLang();
    const topbarSlot = document.getElementById("site-topbar");
    const footerSlot = document.getElementById("site-footer");
    return (
      <Fragment>
        {topbarSlot && ReactDOM.createPortal(<SiteTopbar lang={lang} setLang={setLang} />, topbarSlot)}
        {footerSlot && ReactDOM.createPortal(<SiteFooter lang={lang} />, footerSlot)}
      </Fragment>
    );
  }

  function mountChrome() {
    if (!document.getElementById("site-topbar") && !document.getElementById("site-footer")) return;
    if (document.getElementById("__tvk_chrome_host__")) return;
    const host = document.createElement("div");
    host.id = "__tvk_chrome_host__";
    host.style.display = "none";
    document.body.appendChild(host);
    ReactDOM.createRoot(host).render(<ChromeApp />);
  }

  // Expose for the homepage (app.jsx imports these directly off window).
  window.SiteChrome = { SiteTopbar, SiteDrawer, SiteFooter, useTvkLang, T };

  // Auto-mount on any page that declares the slots.
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mountChrome);
  } else {
    mountChrome();
  }
})();