/* sections.jsx — Section components. New order:
   1. Hero (Coimbatore District Chapter only)
   2. DistrictSecretarySection (Sampath poster card pulled out)
   3. IdeologyTickerSection (running marquee of TVK ideologies)
   4. MlasSection (uniform cards)
   5. AboutSection (moved up)
   6. IntegratedLeadershipSection (Vijay + Sampath, artwork placeholder)
   7. BioSection
   8. IdeologySection (5 pillars)
   9. ArticlesSection (image-prominent)
   10. EventsSection
   11. JoinSection
   12. Footer
*/

const { useState, useEffect, useRef } = React;

function Reveal({ children, delay = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
}

// =============================================================
// TOPBAR
// =============================================================
function Topbar({ lang, setLang, onMenu }) {
  return (
    <header className="tvk-topbar">
      <a className="tvk-mark" href="#top" aria-label="TVK Covai home">
        <span className="vagai" aria-hidden="true"></span>
        <span className="word">
          <span className="en">TVK COVAI</span>
          <span className="ta">டிவிகே கோவை</span>
        </span>
      </a>
      <nav className="tvk-nav-desktop" aria-label="Main">
        <a href="#chapter">{lang === "en" ? "Party" : "கட்சி"}</a>
        <a href="#district">{lang === "en" ? "District" : "மாவட்டம்"}</a>
        <a href="#mlas">{lang === "en" ? "MLAs" : "எம்.எல்.ஏக்கள்"}</a>
        <a href="#bio">{lang === "en" ? "Sampath" : "சம்பத்"}</a>
        <a href="#articles">{lang === "en" ? "News" : "செய்திகள்"}</a>
        <a href="#events">{lang === "en" ? "Events" : "நிகழ்வுகள்"}</a>
        <a href="#contact">{lang === "en" ? "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={onMenu} aria-label="Open menu">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
      </div>
    </header>
  );
}

// =============================================================
// DRAWER
// =============================================================
function Drawer({ open, onClose, t, lang }) {
  return (
    <React.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)" }}>TVK COVAI</div>
          <button className="drawer-close" onClick={onClose}>{lang === "en" ? "CLOSE" : "மூடு"} ✕</button>
        </div>

        <h4>{t.foot_party}</h4>
        <ul>
          <li><a href="#chapter" onClick={onClose}>{t.chapterTitle}</a></li>
          <li><a href="#district" onClick={onClose}>{lang === "en" ? "District Secretary" : "மாவட்டச் செயலாளர்"}</a></li>
          <li><a href="#party" onClick={onClose}>{t.foot_about}</a></li>
          <li><a href="#leadership" onClick={onClose}>{t.foot_leadership}</a></li>
          <li><a href="#ideology" onClick={onClose}>{t.foot_ideology}</a></li>
        </ul>

        <h4>{t.foot_org}</h4>
        <ul>
          <li><a href="#mlas" onClick={onClose}>{lang === "en" ? "MLAs and Candidates" : "எம்.எல்.ஏக்கள்"}</a></li>
          <li><a href="#bio" onClick={onClose}>{lang === "en" ? "Sampath Biography" : "சம்பத் வரலாறு"}</a></li>
          <li><a href="#events" onClick={onClose}>{t.foot_events}</a></li>
        </ul>

        <h4>{t.foot_more}</h4>
        <ul>
          <li><a href="#articles" onClick={onClose}>{lang === "en" ? "Newsroom" : "செய்தி அறை"}</a></li>
          <li><a href="#join" onClick={onClose}>{t.foot_join}</a></li>
          <li><a href="#contact" onClick={onClose}>{t.foot_contact}</a></li>
        </ul>
      </aside>
    </React.Fragment>
  );
}

// =============================================================
// HERO — Coimbatore District Chapter only (party intro)
// =============================================================
function Hero({ t, lang }) {
  return (
    <section className="hero" id="chapter" data-screen-label="01 Chapter">
      <div className="crowd-bg" aria-hidden="true"></div>
      <div className="elephants" aria-hidden="true"></div>
      <div className="stars-halo" aria-hidden="true"></div>

      <div className="hero-inner hero-inner-single">
        <div className="hero-party-block">
          <div className="hero-flag-strip" aria-hidden="true"></div>
          <span className="hero-tag">{t.chapterTag}</span>
          <h1 className="hero-display">{t.chapterTitle}</h1>
          <div className="hero-display-ta">{lang === "en" ? "டிவிகே கோவை" : "TVK COVAI"}</div>
          <p className="hero-lede">{t.chapterIntro}</p>
          <div className="hero-party-row">
            <span className="hero-party-name">{t.partyName}</span>
            <span className="flag-mini">{t.heroFlag}</span>
          </div>
          <p className="hero-tagline">{t.partyTagline}</p>
        </div>

        <div className="hero-visual">
          <div className="hero-visual-vagai" aria-hidden="true">
            <div className="vagai-emblem-xl"></div>
          </div>
          <div className="hero-visual-stack">
            <div className="hero-visual-tile placeholder-tile">
              <span className="ptag">ARTWORK</span>
              {lang === "en" ? "TVK Coimbatore poster" : "டிவிகே கோவை சுவரொட்டி"}
            </div>
            <div className="hero-visual-row">
              <div className="hero-visual-tile small" style={{ backgroundImage: 'url("assets/rallies/vijay-coimbatore-bang.webp")' }}></div>
              <div className="hero-visual-tile small" style={{ backgroundImage: 'url("assets/rallies/western-region-conference.jpg")' }}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// DISTRICT SECRETARY SECTION (Sampath poster card)
// =============================================================
function DistrictSecretarySection({ t, lang }) {
  return (
    <section id="district" className="district-sec section-dark" data-screen-label="02 District Secretary">
      <div className="section-head">
        <span className="eyebrow">{t.s_district_eyebrow}</span>
        <h2 className="section-title">{t.s_district_title}</h2>
        <p className="section-sub">{t.s_district_sub}</p>
      </div>

      <Reveal>
        <div className="hero-poster-card">
          <div className="flag-cloth" aria-hidden="true"></div>
          <div className="hero-poster-grid">
            <div className="hero-poster-text">
              <span className="hero-posting-tag">{t.sampathPosting}</span>
              <h2 className="hero-name">
                {t.sampathNameLine1} <span className="break">{t.sampathNameLine2}</span>
              </h2>
              <div className="hero-name-ta">{t.sampathNameTa}</div>
              <ul className="hero-roles">
                <li>
                  <b>{t.sampathPostingFull}</b>
                  <span>{t.sampathPostingTa}</span>
                </li>
                <li>
                  <b>{t.sampathRoleMinister}</b>
                  <span>{t.sampathRoleMinisterTag}</span>
                </li>
                <li>
                  <b>{t.sampathRoleMLA}</b>
                </li>
              </ul>
            </div>
            <div className="hero-poster-portrait">
              <div className="vagai-emblem-lg" aria-hidden="true"></div>
              <img src="assets/sampath/official-portrait.jpg" alt="V. Sampath Kumar" />
              <div className="video-placeholder-tag">
                <span className="dot"></span>
                {t.videoSlot}
              </div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// IDEOLOGY TICKER (replaces victory marquee)
// =============================================================
function IdeologyTicker({ t, lang }) {
  const items = [...t.ideologyTickerItems, ...t.ideologyTickerItems];
  return (
    <div className="ideology-ticker" aria-label={t.ideologyEyebrow}>
      <div className="marquee">
        {items.map((s, i) => <span key={i} className="sep">{s}</span>)}
      </div>
    </div>
  );
}

// =============================================================
// MLAS — uniform card design, no per-card stats, no gold ring
// =============================================================
function MlasSection({ t, lang }) {
  return (
    <section id="mlas" data-screen-label="03 MLAs">
      <div className="section-head">
        <span className="eyebrow">{t.s_mlas_eyebrow}</span>
        <h2 className="section-title">{t.s_mlas_title}</h2>
        <p className="section-sub">{t.s_mlas_sub}</p>
      </div>

      <Reveal>
        <div className="mla-grid">
          {CANDIDATES.map((c) => (
            <a key={c.ac} className={"mla-card " + (c.won ? "won" : "")} href={`/mlas/${c.slug}/`}>
              <div className="mla-face">
                <span className="mla-num">{c.ac}</span>
                {c.won && <span className="mla-badge">{lang === "en" ? "WON" : "வெற்றி"}</span>}
                <img src={c.img} alt={lang === "en" ? c.name_en : c.name_ta} />
              </div>
              <div className="mla-info">
                <div className="mla-ac">{lang === "en" ? c.ac_en : c.ac_ta}</div>
                <div className="mla-nm">{lang === "en" ? c.name_en : c.name_ta}</div>
                <div className="mla-role">{lang === "en" ? c.role_en : c.role_ta}</div>
                <div className="mla-cta">
                  {t.view_profile}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9"/></svg>
                </div>
              </div>
            </a>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// ABOUT TVK
// =============================================================
function AboutSection({ t, lang }) {
  return (
    <section id="party" className="about-tvk section-dark" data-screen-label="04 About TVK">
      <div className="section-head">
        <span className="eyebrow">{t.s_about_eyebrow}</span>
        <h2 className="section-title">{t.s_about_title}</h2>
        <p className="section-sub">{t.s_about_sub}</p>
      </div>

      <Reveal>
        <div className="about-pledge">
          <div className="quote-mark" aria-hidden="true">“</div>
          <div className="body">{t.s_pledge_text}</div>
          <div className="by">{t.s_pledge_by}</div>
        </div>
      </Reveal>

      <div className="about-meta-grid">
        <div className="about-cell">
          <div className="k">{lang === "en" ? "FOUNDED" : "தொடக்கம்"}</div>
          <div className="v num">2 Feb 2024</div>
        </div>
        <div className="about-cell">
          <div className="k">{lang === "en" ? "SYMBOL" : "சின்னம்"}</div>
          <div className="v">{lang === "en" ? "Whistle (Visil)" : "விசில்"}</div>
        </div>
        <div className="about-cell">
          <div className="k">{lang === "en" ? "FOUNDER" : "நிறுவனர்"}</div>
          <div className="v">C. Joseph Vijay</div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// INTEGRATED LEADERSHIP — Vijay × Sampath single composite
// =============================================================
function IntegratedLeadershipSection({ t, lang }) {
  return (
    <section id="leadership" className="integrated-lead" data-screen-label="05 Integrated">
      <div className="section-head section-head-center">
        <span className="eyebrow">{t.s_integrated_eyebrow}</span>
        <h2 className="section-title">{t.s_integrated_title}</h2>
        <p className="section-sub">{t.s_integrated_sub}</p>
      </div>

      <Reveal>
        <div className="lead-composite">
          {/* Decorative layers */}
          <div className="lead-bg-crowd" aria-hidden="true"></div>
          <div className="lead-bg-flagcloth" aria-hidden="true"></div>
          <div className="lead-bg-stars" aria-hidden="true"></div>

          {/* Artwork placeholder marker for Claude Code */}
          <div className="lead-artwork-tag" aria-hidden="true">
            <span className="ptag">ARTWORK SLOT</span>
            {t.s_integrated_artwork_slot}
          </div>

          {/* Left: Vijay */}
          <div className="lead-figure lead-figure-vijay">
            <div className="lead-figure-img">
              <img src="assets/vijay/gallery-vijay.jpg" alt="C. Joseph Vijay" />
              <div className="lead-figure-emblem" aria-hidden="true"></div>
            </div>
            <div className="lead-figure-meta">
              <div className="lead-figure-tag">{t.s_integrated_vijay_role}</div>
              <div className="lead-figure-nm">VIJAY</div>
              <div className="lead-figure-nm-ta">விஜய்</div>
              <div className="lead-figure-sub">{t.s_integrated_vijay_subrole}</div>
            </div>
          </div>

          {/* Centre divider — vagai emblem connecting both */}
          <div className="lead-connector" aria-hidden="true">
            <div className="lead-connector-emblem"></div>
            <div className="lead-connector-line"></div>
          </div>

          {/* Right: Sampath */}
          <div className="lead-figure lead-figure-sampath">
            <div className="lead-figure-img">
              <img src="assets/sampath/official-portrait.jpg" alt="V. Sampath Kumar" />
              <div className="lead-figure-emblem" aria-hidden="true"></div>
            </div>
            <div className="lead-figure-meta">
              <div className="lead-figure-tag">{t.s_integrated_sampath_role}</div>
              <div className="lead-figure-nm">SAMPATH</div>
              <div className="lead-figure-nm-ta">சம்பத்</div>
              <div className="lead-figure-sub">{t.s_integrated_sampath_subrole}</div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// BIOGRAPHY
// =============================================================
function BioSection({ t, lang }) {
  const timeline = [
    { when: "2005", what: t.timeline_2005 },
    { when: "2017", what: t.timeline_2017 },
    { when: "02 / 2024", what: t.timeline_2024_02 },
    { when: "2024", what: t.timeline_2024_late },
    { when: "04 / 2025", what: t.timeline_2025_04 },
    { when: "03 / 2026", what: t.timeline_2026_03 },
    { when: "10 / 05 / 2026", what: t.timeline_2026_05_10 },
    { when: "21 / 05 / 2026", what: t.timeline_2026_05_21 },
  ];

  return (
    <section id="bio" data-screen-label="06 Biography">
      <div className="section-head">
        <span className="eyebrow">{t.s_bio_eyebrow}</span>
        <h2 className="section-title">{t.s_bio_title}</h2>
        <p className="section-sub">{t.s_bio_sub}</p>
      </div>

      <div className="bio-layout">
        <Reveal>
          <div className="bio-hero">
            <div className="bio-hero-grid">
              <div className="bio-hero-portrait">
                <img src="assets/sampath/official-portrait.jpg" alt="V. Sampath Kumar" />
              </div>
              <div className="bio-hero-meta">
                <span className="label">{lang === "en" ? "HON'BLE MINISTER" : "மாண்புமிகு அமைச்சர்"}</span>
                <div className="nm">V. SAMPATH KUMAR</div>
                <div className="nm-ta">வே. சம்பத்குமார்</div>
                <div className="role" style={{ marginTop: 6 }}>{t.sampathPostingFull}</div>
                <div className="role" style={{ opacity: .85 }}>{t.sampathRoleMinister}</div>
                <div className="role" style={{ opacity: .8 }}>{t.sampathRoleMLA}</div>
              </div>
            </div>

            <div className="bio-data">
              <div className="cell"><div className="k">{t.bio_constituency}</div><div className="v">{t.bio_constituency_v}</div></div>
              <div className="cell"><div className="k">{t.bio_posting}</div><div className="v">{t.bio_posting_v}</div></div>
              <div className="cell"><div className="k">{t.bio_role}</div><div className="v">{t.bio_role_v}</div></div>
              <div className="cell"><div className="k">{t.bio_age}</div><div className="v">{t.bio_age_v}</div></div>
              <div className="cell"><div className="k">{t.bio_edu}</div><div className="v">{t.bio_edu_v}</div></div>
              <div className="cell"><div className="k">{t.bio_home}</div><div className="v">{t.bio_home_v}</div></div>
            </div>
          </div>
        </Reveal>

        <div className="bio-body">
          <p>{t.bio_p1}</p>
          <p className="no-drop">{t.bio_p2}</p>
          <p className="no-drop">{t.bio_p3}</p>
        </div>

        <Reveal>
          <div className="bio-timeline" aria-label="Career timeline">
            {timeline.map((e, i) => (
              <div key={i} className="ev">
                <div className="when">{e.when}</div>
                <div className="what">{e.what}</div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div className="bio-photogrid">
            <div className="ph"><img src="assets/sampath/official-portrait.jpg" alt="" /><span className="tag">{t.photo_official}</span></div>
            <div className="ph"><img src="assets/sampath/cabinet-expansion.webp" alt="" /><span className="tag">{t.photo_cabinet}</span></div>
            <div className="ph"><img src="assets/sampath/vikatan-feature.jpg" alt="" /><span className="tag">{t.photo_vikatan}</span></div>
            <div className="ph"><img src="assets/sampath/vijay-oath.jpg" alt="" /><span className="tag">{t.photo_oath}</span></div>
            <div className="ph"><img src="assets/sampath/affidavit-portrait.jpg" alt="" /><span className="tag">{t.photo_field}</span></div>
            <div className="ph"><img src="assets/sampath/vikatan-related-1.jpg" alt="" /><span className="tag">{t.photo_rally}</span></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// =============================================================
// IDEOLOGY (5 leaders pillars)
// =============================================================
function IdeologySection({ t, lang }) {
  return (
    <section id="ideology" className="section-dark" data-screen-label="07 Ideology"
      style={{ backgroundImage:
        'linear-gradient(180deg, rgba(63,6,8,.96), rgba(63,6,8,.96)), url("assets/bg/vagai-and-stars.png")',
        backgroundSize: "120% auto", backgroundPosition: "center top", backgroundRepeat: "no-repeat"
      }}>
      <div className="section-head">
        <span className="eyebrow">{t.s_ideology_eyebrow}</span>
        <h2 className="section-title">{t.s_ideology_title}</h2>
        <p className="section-sub">{t.s_ideology_sub}</p>
      </div>

      <Reveal>
        <div className="ideo-strip">
          {IDEOLOGICAL_LEADERS.map((p, i) => (
            <div key={p.id} className="ideo-card">
              <div className="ring">
                <div className="placeholder">PORTRAIT<br/>SLOT<br/>{i+1}</div>
              </div>
              <div className="nm">{lang === "en" ? p.short_en : p.short_ta}</div>
            </div>
          ))}
        </div>
      </Reveal>

      <div className="design-note">
        <b>{lang === "en" ? "DESIGN NOTE" : "வடிவமைப்புக் குறிப்பு"}</b><br/>
        {lang === "en"
          ? "Each circle is an image slot. Drop in licensed portraits of Periyar, Ambedkar, Anna, Kamarajar, and Velu Nachiyar from the official TVK painted set."
          : "ஒவ்வொரு வட்டமும் ஒரு படத் தொகுதி. அதிகாரப்பூர்வ டிவிகே ஓவியத் தொகுப்பிலிருந்து உரிமைப் படங்களை இங்கே பதியவும்."
        }
      </div>
    </section>
  );
}

// =============================================================
// FEATURED ARTICLES — image-prominent, smaller text
// =============================================================
function ArticlesSection({ t, lang }) {
  return (
    <section id="articles" style={{ background: "var(--cream-2)" }} data-screen-label="08 Articles">
      <div className="section-head">
        <span className="eyebrow">{t.s_articles_eyebrow}</span>
        <h2 className="section-title">{t.s_articles_title}</h2>
        <p className="section-sub">{t.s_articles_sub}</p>
      </div>

      <div className="featured">
        {FEATURED.map((a, i) => (
          <Reveal key={a.id} delay={i * 60}>
            <article className="feat-card feat-card-compact">
              <div className="feat-img-wrap">
                <div className="ph" style={{ backgroundImage: `url("${a.img}")` }} aria-hidden="true"></div>
                {a.ribbon_en && <span className="ribbon">{lang === "en" ? a.ribbon_en : a.ribbon_ta}</span>}
              </div>
              <div className="feat-body">
                <div className="kicker">{lang === "en" ? a.kicker_en : a.kicker_ta}</div>
                <h3>{lang === "en" ? a.title_en : a.title_ta}</h3>
                <div className="meta">
                  <span>{a.date}</span>
                  <span>·</span>
                  <span>{a.source}</span>
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>

      <div className="article-list">
        {ARTICLES.map((a) => (
          <Reveal key={a.id}>
            <a className="art-row" href={`#article-${a.id}`}>
              <div className="pic" style={{ backgroundImage: `url("${a.img}")` }}></div>
              <div className="body">
                <div className="kicker">{lang === "en" ? a.kicker_en : a.kicker_ta}</div>
                <h4>{lang === "en" ? a.title_en : a.title_ta}</h4>
                <div className="meta">
                  <span>{a.date}</span>
                  <span>·</span>
                  <span>{a.source}</span>
                </div>
              </div>
            </a>
          </Reveal>
        ))}
      </div>

      <div style={{ display: "flex", justifyContent: "center", marginTop: 22 }}>
        <button className="btn-gold" style={{ background: "var(--ink)", color: "var(--gold-400)", boxShadow: "var(--shadow-md)" }}>
          {t.view_more}
          <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
      </div>
    </section>
  );
}

// =============================================================
// EVENTS GRID
// =============================================================
function EventsSection({ t, lang }) {
  return (
    <section id="events" className="section-dark" data-screen-label="09 Events">
      <div className="section-head">
        <span className="eyebrow">{t.s_events_eyebrow}</span>
        <h2 className="section-title">{t.s_events_title}</h2>
        <p className="section-sub">{t.s_events_sub}</p>
      </div>

      <Reveal>
        <div className="events-grid">
          <div className="e" style={{ gridColumn: "span 4", gridRow: "span 2" }}>
            <img src="assets/rallies/vijay-coimbatore-bang.webp" alt="" />
            <span className="cap">{lang === "en" ? "Avinashi Road Roadshow · 26 Apr 2025" : "அவினாசி சாலை ரோடுஷோ · 26 ஏப்ரல்"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 2", gridRow: "span 2" }}>
            <img src="assets/sampath/cabinet-expansion.webp" alt="" />
            <span className="cap">{lang === "en" ? "Cabinet · 21 May 2026" : "அமைச்சரவை · 21 மே"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 3", gridRow: "span 2" }}>
            <img src="assets/rallies/western-region-conference.jpg" alt="" />
            <span className="cap">{lang === "en" ? "Western Region Conf." : "மேற்கு பிராந்திய மாநாடு"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 3", gridRow: "span 2" }}>
            <img src="assets/rallies/vijay-addressing-cadres.jpg" alt="" />
            <span className="cap">{lang === "en" ? "Cadre Address · Kongu" : "தொண்டர் கூட்டம் · கொங்கு"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 2" }}>
            <img src="assets/rallies/vijay-roadshow.jpg" alt="" />
            <span className="cap">{lang === "en" ? "Roadshow · D2" : "ரோடுஷோ"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 2" }}>
            <img src="assets/sampath/vijay-oath.jpg" alt="" />
            <span className="cap">{lang === "en" ? "CM Oath · 10 May" : "முதல்வர் பதவியேற்பு"}</span>
          </div>
          <div className="e" style={{ gridColumn: "span 2" }}>
            <img src="assets/rallies/vijay-departs.jpg" alt="" />
            <span className="cap">{lang === "en" ? "Departs Chennai" : "சென்னையிலிருந்து"}</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// JOIN CTA
// =============================================================
function JoinSection({ t }) {
  return (
    <section id="join" data-screen-label="10 Join">
      <Reveal>
        <div className="join-block">
          <div className="join-pre">{t.s_join_pre}</div>
          <h2>{t.s_join_h}</h2>
          <p>{t.s_join_p}</p>
          <div className="join-actions">
            <button className="btn-gold">
              {t.s_join_cta}
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
            <button className="btn-outline">{t.s_join_secondary}</button>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// FOOTER
// =============================================================
function Footer({ t, lang }) {
  return (
    <footer className="tvk-foot" id="contact" data-screen-label="11 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">
          <img src="assets/sampath/official-portrait.jpg" alt="" />
        </div>
        <div className="foot-cta">
          <span className="pre">{t.foot_pre}</span>
          <h3>{t.s_join_h}</h3>
          <p>{t.foot_p}</p>
          <button className="btn-gold">
            {t.foot_join}
            <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9"/></svg>
          </button>
          <div className="foot-socials-inline">
            <a className="ic" href="#" aria-label="X"><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="YouTube"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 7s-.2-1.6-.9-2.3c-.8-.9-1.8-.9-2.2-1C16.4 3.5 12 3.5 12 3.5s-4.4 0-7.9.3c-.5.1-1.4.1-2.2 1C1.2 5.4 1 7 1 7S.8 8.8.8 10.7v1.6c0 1.9.2 3.7.2 3.7s.2 1.6.9 2.3c.8.9 1.9.9 2.4 1 1.7.2 7.7.3 7.7.3s4.4 0 7.9-.3c.5-.1 1.4-.1 2.2-1 .7-.7.9-2.3.9-2.3s.2-1.8.2-3.7v-1.6C23.2 8.8 23 7 23 7zM9.7 14.4V8.3l5.7 3.1z"/></svg></a>
          </div>
        </div>
      </div>

      <div className="foot-wordmark">
        <div className="en">TVK COVAI</div>
        <div className="ta">{t.foot_wordmark_ta}</div>
        <div className="domain num">tvkcovai.com</div>
      </div>

      <div className="foot-cols">
        <div>
          <h5>{t.foot_party}</h5>
          <ul>
            <li><a href="#party">{t.foot_about}</a></li>
            <li><a href="#ideology">{t.foot_ideology}</a></li>
            <li><a href="#bio">{lang === "en" ? "Minister Sampath" : "அமைச்சர் சம்பத்"}</a></li>
            <li><a href="#leadership">{t.foot_leadership}</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.foot_org}</h5>
          <ul>
            <li><a href="#mlas">{lang === "en" ? "MLAs" : "எம்.எல்.ஏக்கள்"}</a></li>
            <li><a href="#">{t.foot_district}</a></li>
            <li><a href="#">{t.foot_wings}</a></li>
            <li><a href="#">{t.foot_committees}</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.foot_updates}</h5>
          <ul>
            <li><a href="#articles">{t.foot_announcements}</a></li>
            <li><a href="#events">{t.foot_events}</a></li>
            <li><a href="#">{t.foot_resolutions}</a></li>
            <li><a href="#">{t.foot_action}</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.foot_more}</h5>
          <ul>
            <li><a href="#events">{t.foot_gallery}</a></li>
            <li><a href="#contact">{t.foot_contact}</a></li>
            <li><a href="#">{t.foot_press}</a></li>
            <li><a href="#join">{t.foot_join}</a></li>
          </ul>
        </div>
      </div>

      <div className="foot-meta">
        <div className="foot-meta-cell">
          <b>{t.foot_office}</b>
          {t.foot_office_addr}
        </div>
        <div className="foot-meta-cell">
          <b>{t.foot_phone}</b>
          {t.foot_phone_n}
        </div>
        <div className="foot-meta-copyright">{t.foot_meta}</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Topbar, Drawer, Hero, DistrictSecretarySection, IdeologyTicker,
  MlasSection, AboutSection, IntegratedLeadershipSection,
  BioSection, IdeologySection, ArticlesSection, EventsSection,
  JoinSection, Footer, Reveal,
});