/* 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 + Drawer live in chrome.jsx (shared with every page).

// =============================================================
// HERO — Coimbatore District Chapter (text-left, flag-vj on right)
// =============================================================
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-vagai-watermark" aria-hidden="true"></div>

      <div className="hero-inner hero-inner-split">
        <div className="hero-party-block hero-party-block-split">
          <span className="hero-eyebrow-plain">{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="hero-party-year num">TVK · 2026</span>
          </div>
          <p className="hero-tagline">{t.partyTagline}</p>
          <div className="hero-cta-row">
            <a className="btn-gold" href="/join-tvk/">
              {lang === "en" ? "Join TVK" : "தவெக-வில் சேர"}
              <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a className="btn-outline btn-outline-light" href="/enquiry/">
              {lang === "en" ? "Enquiry / Complaints" : "புகார் / விசாரணை"}
            </a>
          </div>
        </div>

        <div className="hero-visual-block" aria-hidden="false">
          <div className="hero-flag-vj">
            <img
              src="assets/branding/hero-vj-sampath.jpg"
              alt={lang === "en" ? "Hon. CM Vijay and Hon. Minister Sampath Kumar with the TVK party flag" : "மாண்புமிகு முதல்வர் விஜய் மற்றும் மாண்புமிகு அமைச்சர் சம்பத்குமார் தவெக கட்சிக் கொடியுடன்"}
              loading="eager"
            />
          </div>
        </div>
      </div>

      {/* FIX 1 — Five principles strip lives INSIDE the hero, full-bleed bottom band. */}
      <div className="hero-principles-band">
        <div className="principles-strip">
          {IDEOLOGICAL_LEADERS.map((p) => (
            <div key={p.id} className="principle-card">
              <div className="principle-icon">
                <img src={p.img} alt={lang === "en" ? p.pillar_en : p.pillar_ta} loading="lazy" />
              </div>
              <div className="principle-label">
                {lang === "en" ? p.pillar_en : p.pillar_ta}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="hero-elephants-bottom" aria-hidden="true"></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/sampath-hero-hd.jpg" alt="V. Sampath Kumar"
                   onError={(e) => { e.currentTarget.src = "assets/sampath/official-portrait.jpg"; }} />
            </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 }) {
  // Flag description cards. Red + Yellow keep solid colour swatches (they ARE colours).
  // Vagai / Elephants / Stars use the official element illustrations from tvkvijay.com.
  const flagCards = [
    { id: "red",       h: t.flag_red_h,       b: t.flag_red_b,       swatch: "linear-gradient(180deg, #C71820, #7A1018)" },
    { id: "yellow",    h: t.flag_yellow_h,    b: t.flag_yellow_b,    swatch: "linear-gradient(180deg, #FFD84A, #F5C518)" },
    { id: "vagai",     h: t.flag_vagai_h,     b: t.flag_vagai_b,     image: "assets/branding/flag-element-vagai.png" },
    { id: "elephants", h: t.flag_elephants_h, b: t.flag_elephants_b, image: "assets/branding/flag-element-elephants.jpg" },
    { id: "stars",     h: t.flag_stars_h,     b: t.flag_stars_b,     image: "assets/branding/flag-element-stars.png" },
  ];

  return (
    <section id="party" className="about-tvk section-dark about-tvk-actionplan" data-screen-label="04 About TVK">
      <div className="about-actionplan-bg" aria-hidden="true"></div>
      <div className="about-actionplan-scrim" aria-hidden="true"></div>

      <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 about-pledge-center">
          <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>

      <Reveal>
        <div className="flag-feature">
          <div className="flag-feature-img">
            <img src="assets/branding/flag.png" alt={lang === "en" ? "TVK official flag" : "தவெக அதிகாரப்பூர்வ கொடி"} loading="lazy" />
          </div>
          <div className="flag-feature-text">
            <span className="flag-feature-eyebrow">{lang === "en" ? "THE FLAG" : "கொடி"}</span>
            <h3 className="flag-feature-title">{t.s_flag_title}</h3>
            <p className="flag-feature-sub">{t.s_flag_sub}</p>
            <div className="flag-cards">
              {flagCards.map((c) => (
                <div key={c.id} className="flag-card">
                  {c.image ? (
                    <div className="flag-card-cue flag-card-cue-img" aria-hidden="true">
                      <img src={c.image} alt="" loading="lazy" />
                    </div>
                  ) : (
                    <div className="flag-card-cue flag-card-cue-swatch" aria-hidden="true" style={{ background: c.swatch }} />
                  )}
                  <div className="flag-card-body">
                    <div className="flag-card-h">{c.h}</div>
                    <div className="flag-card-b">{c.b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>

      <div className="about-stats-strip">
        <div className="ass-cell">
          <span className="ass-k">{lang === "en" ? "FOUNDED" : "தொடக்கம்"}</span>
          <span className="ass-v num">2 Feb 2024</span>
        </div>
        <div className="ass-cell">
          <span className="ass-k">{lang === "en" ? "FOUNDER" : "நிறுவனர்"}</span>
          <span className="ass-v">{lang === "en" ? "Hon. CM Joseph Vijay" : "மாண்புமிகு முதலமைச்சர் ஜோசப் விஜய்"}</span>
        </div>
        <div className="ass-cell">
          <span className="ass-k">{lang === "en" ? "SYMBOL" : "சின்னம்"}</span>
          <span className="ass-v">{lang === "en" ? "Whistle (Visil)" : "விசில்"}</span>
        </div>
        <div className="ass-cell">
          <span className="ass-k">{lang === "en" ? "MANDATE" : "மக்கள் தீர்ப்பு"}</span>
          <span className="ass-v">{lang === "en" ? "Single largest party · 2026" : "தனிப்பெரும் கட்சி · 2026"}</span>
        </div>
        <div className="ass-cell">
          <span className="ass-k">{lang === "en" ? "CHIEF MINISTER" : "முதலமைச்சர்"}</span>
          <span className="ass-v">{lang === "en" ? "Hon. Vijay · since 10 May 2026" : "மாண்புமிகு விஜய் · 10 மே 2026 முதல்"}</span>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// TVK ICON STRIP — flag + whistle horizontal band
// Slim full-bleed strip between heavy content sections; reinforces
// party iconography (flag, whistle, vagai-and-stars backdrop).
// =============================================================
function TvkIconStrip({ lang }) {
  return (
    <div className="tvk-icon-strip" aria-label={lang === "en" ? "TVK party iconography" : "தவெக கட்சி அடையாளம்"}>
      <div className="strip-whistle" aria-hidden="true">
        <img src="assets/branding/whistle.svg" alt="" />
      </div>
      <div className="strip-flag">
        <img src="assets/branding/flag.png" alt={lang === "en" ? "TVK official flag" : "தவெக கொடி"} loading="lazy" />
      </div>
      <div className="strip-text">
        {lang === "en"
          ? <>TVK · WHISTLE<br/>COIMBATORE 2026</>
          : <>தவெக · விசில்<br/>கோவை 2026</>
        }
      </div>
    </div>
  );
}

// =============================================================
// INTEGRATED LEADERSHIP — Vijay × Sampath single composite
// =============================================================
function IntegratedLeadershipSection({ t, lang }) {
  return (
    <section id="leadership" className="integrated-lead" data-screen-label="02 Party Leadership">
      <div className="section-head section-head-center">
        <span className="eyebrow">{t.s_integrated_eyebrow}</span>
      </div>

      <Reveal>
        {/* The composite artwork is generated externally (Vijay × flag medallion
            × Sampath) and dropped into /assets/posters/leadership-composite.jpg.
            If the file isn't there yet, we fall back to the 2-card placeholder
            so the section never renders broken. */}
        <div className="lead-artwork">
          <img
            src="assets/posters/leadership-composite.jpg"
            alt={lang === "en"
              ? "Hon. CM Vijay and Hon. Minister Sampath Kumar with the TVK party flag medallion"
              : "மாண்புமிகு முதலமைச்சர் விஜய் மற்றும் மாண்புமிகு அமைச்சர் சம்பத்குமார் கட்சிக் கொடியுடன்"}
            onError={(e) => {
              // Hide the broken-image element and reveal the fallback below
              e.currentTarget.style.display = "none";
              const fb = e.currentTarget.parentElement.querySelector(".lead-artwork-fallback");
              if (fb) fb.style.display = "grid";
            }}
          />
          <div className="lead-artwork-caption">
            <div className="lead-cap lead-cap-left">
              <span className="lead-cap-tag">{t.s_integrated_vijay_role}</span>
              <span className="lead-cap-nm">VIJAY</span>
              <span className="lead-cap-sub">{t.s_integrated_vijay_subrole}</span>
            </div>
            <div className="lead-cap lead-cap-right">
              <span className="lead-cap-tag">{t.s_integrated_sampath_role}</span>
              <span className="lead-cap-nm">SAMPATH</span>
              <span className="lead-cap-sub">{t.s_integrated_sampath_subrole}</span>
            </div>
          </div>
          {/* Fallback — initially hidden via inline style; revealed on img error */}
          <div className="lead-artwork-fallback" style={{ display: "none" }}>
            <div className="fb-figure">
              <img src="assets/vijay/tvkofficial-hero-1.png" alt="Hon. CM Vijay" />
              <span>{lang === "en" ? "Hon. CM Vijay" : "மாண்புமிகு முதலமைச்சர் விஜய்"}</span>
            </div>
            <div className="fb-figure">
              <img src="assets/sampath/sampath-hero-hd.jpg" alt="Hon. Minister Sampath"
                   onError={(e) => { e.currentTarget.src = "assets/sampath/official-portrait.jpg"; }} />
              <span>{lang === "en" ? "Hon. Minister Sampath" : "மாண்புமிகு அமைச்சர் சம்பத்"}</span>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// MINISTERS — Two Coimbatore ministers (Sampath + Vignesh) cards
// =============================================================
function MinistersSection({ t, lang }) {
  return (
    <section id="ministers" className="ministers-sec section-dark" data-screen-label="05b Ministers">
      <div className="section-head">
        <span className="eyebrow">{t.s_ministers_eyebrow}</span>
        <h2 className="section-title">{t.s_ministers_title}</h2>
        <p className="section-sub">{t.s_ministers_sub}</p>
      </div>

      <Reveal>
        <div className="ministers-grid">
          {MINISTERS.map((m) => {
            const displayLines = lang === "en" ? m.portfolio_display_en : m.portfolio_display_ta;
            const subtitle = lang === "en" ? m.portfolio_sub_en : m.portfolio_sub_ta;
            return (
              <a key={m.id} className="minister-card" href={m.href} aria-label={`${m.name_en} — full profile`}>
                <div className="minister-card-badges">
                  <span className="minister-card-ac">{lang === "en" ? m.ac_label_en : m.ac_label_ta}</span>
                  <span className="minister-card-oath">{t.ministers_oath}</span>
                </div>
                <div className="minister-card-portrait">
                  <img src={m.img} alt={lang === "en" ? m.name_en : m.name_ta} />
                </div>
                <div className="minister-card-body">
                  <div className="minister-portfolio-display">
                    {displayLines.map((ln, i) => (
                      <span key={i} className="minister-portfolio-line">{ln}</span>
                    ))}
                  </div>
                  {subtitle && (
                    <div className="minister-portfolio-sub">{subtitle}</div>
                  )}
                  <div className="minister-portfolio-ta">
                    {lang === "en" ? m.portfolio_ta_short : m.portfolio_en_short}
                  </div>
                  <h3 className="minister-card-nm">
                    {lang === "en" ? m.name_en : m.name_ta}
                  </h3>
                  <div className="minister-card-nm-alt">{lang === "en" ? m.name_ta : m.name_en}</div>
                  <span className="minister-card-cta">
                    {t.minister_full_profile}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M17 7H8M17 7v9"/></svg>
                  </span>
                </div>
              </a>
            );
          })}
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// BIOGRAPHY
// =============================================================
function BioSection({ t, lang }) {
  // Lightbox state — open a clicked photo into a full-screen modal
  const [lightbox, setLightbox] = useState(null); // { src, caption } or null
  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === "Escape") setLightbox(null); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [lightbox]);

  const photos = [
    { src: "assets/sampath/official-portrait.jpg",        caption: t.photo_official },
    { src: "assets/sampath/cabinet-expansion.webp",       caption: t.photo_cabinet },
    { src: "assets/sampath/vikatan-feature.jpg",          caption: t.photo_vikatan },
    { src: "assets/sampath/vijay-oath.jpg",               caption: t.photo_oath },
    { src: "assets/rallies/western-region-conference.jpg", caption: t.photo_rally },
    { src: "assets/rallies/vijay-coimbatore-bang.webp",   caption: t.photo_field },
  ];

  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>

      {/* Each child is a DIRECT grid item of .bio-layout — Reveal wrappers
          would interpose a <div> that breaks grid-area placement and creates
          empty cells. Layout is filled across all rows. */}
      <div className="bio-layout">
        {/* Editorial hero card — two zones side by side on desktop, stacked
            on mobile. Portrait is FULL-BLEED (object-fit: cover) on the left
            so the maroon card has a strong, magazine-style visual anchor.
            The right zone holds the title block AND the 6 quick-facts in
            one cohesive panel. */}
        <div className="bio-hero">
          <div className="bio-hero-portrait">
            <img src="assets/sampath/sampath-hero-hd.jpg" alt="Hon. V. Sampath Kumar"
                 onError={(e) => { e.currentTarget.src = "assets/sampath/official-portrait.jpg"; }} />
          </div>
          <div className="bio-hero-content">
            <div className="bio-hero-meta">
              <span className="label">{lang === "en" ? "HON'BLE MINISTER" : "மாண்புமிகு அமைச்சர்"}</span>
              <h3 className="nm">V. SAMPATH KUMAR</h3>
              <div className="nm-ta">வே. சம்பத்குமார்</div>
              <div className="roles">
                <div className="role">{t.sampathPostingFull}</div>
                <div className="role">{t.sampathRoleMinister}</div>
                <div className="role">{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>
        </div>

        <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>

        <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>

        {/* Career photo gallery — clickable buttons that open a lightbox. */}
        <div className="bio-photogrid">
          {photos.map((p, i) => (
            <button
              key={i}
              type="button"
              className="ph"
              onClick={() => setLightbox(p)}
              aria-label={(lang === "en" ? "Open photo: " : "படத்தைத் திற: ") + p.caption}
            >
              <img src={p.src} alt={p.caption} loading="lazy" />
              <span className="tag">{p.caption}</span>
              <span className="ph-zoom" aria-hidden="true">⤢</span>
            </button>
          ))}
        </div>
      </div>

      {lightbox && (
        <div
          className="lightbox"
          role="dialog"
          aria-modal="true"
          aria-label={lightbox.caption}
          onClick={() => setLightbox(null)}
        >
          <button
            type="button"
            className="lightbox-close"
            onClick={(e) => { e.stopPropagation(); setLightbox(null); }}
            aria-label={lang === "en" ? "Close" : "மூடு"}
          >×</button>
          <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <img src={lightbox.src} alt={lightbox.caption} />
            <div className="lightbox-caption">{lightbox.caption}</div>
          </div>
        </div>
      )}
    </section>
  );
}

// =============================================================
// PRINCIPLES STRIP — five painted-pillar illustrations, small.
// Labels show ONLY the principle name (no leader name). FIX 5a.
// =============================================================
function PrinciplesStripSection({ t, lang }) {
  return (
    <section id="principles" className="principles-strip-sec" data-screen-label="03b Principles">
      <Reveal>
        <div className="principles-strip">
          {IDEOLOGICAL_LEADERS.map((p) => (
            <div key={p.id} className="principle-card">
              <div className="principle-icon">
                <img src={p.img} alt={lang === "en" ? p.pillar_en : p.pillar_ta} loading="lazy" />
              </div>
              <div className="principle-label">
                {lang === "en" ? p.pillar_en : p.pillar_ta}
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// IDEOLOGY — Five Pillars of the Movement, using real leader portraits.
// FIX 5b. Large circular leader photos, leader names only (no principle
// labels here).
// =============================================================
function IdeologySection({ t, lang }) {
  return (
    <section id="ideology" className="section-dark ideology-leaders-sec" 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="leaders-grid">
          {IDEOLOGICAL_LEADERS.map((p) => (
            <div key={p.id} className="leader-card">
              <div className="leader-portrait">
                {p.portrait
                  ? <img src={p.portrait} alt={lang === "en" ? p.en : p.ta} loading="lazy" />
                  : <div className="leader-portrait-fallback">{(lang === "en" ? p.short_en : p.short_ta).slice(0,2).toUpperCase()}</div>}
              </div>
              {/* Main name = active language. Sub = the other language as a translation hint. */}
              <div className="leader-name-en">{lang === "en" ? p.en : p.ta}</div>
              <div className="leader-name-ta">{lang === "en" ? p.ta : p.short_en}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

// =============================================================
// FEATURED ARTICLES — image-prominent, smaller text
// =============================================================
function ArticlesSection({ t, lang }) {
  const cards = (typeof FEATURED_GRID !== "undefined") ? FEATURED_GRID : [];
  return (
    <section id="articles" className="newsroom" 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>

      <Reveal>
        <div className="featured-grid">
          {cards.map((c) => (
            <a key={c.slug} className="featured-card" href={c.href}>
              <div className="featured-card-img" style={{ backgroundImage: `url("${c.img}")` }} aria-hidden="true"></div>
              <div className="featured-card-body">
                <div className="featured-card-kicker">{lang === "en" ? c.kicker_en : c.kicker_ta}</div>
                <h3 className="featured-card-title">{lang === "en" ? c.title_en : c.title_ta}</h3>
                <div className="featured-card-meta">
                  <span className="num">{c.date}</span>
                  <span>·</span>
                  <span>{lang === "en" ? "TVK Covai" : "தவெக கோவை"}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </Reveal>

      <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
        <a className="btn-gold" href="/blog/" 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>
        </a>
      </div>
    </section>
  );
}

// =============================================================
// EVENTS GRID
// =============================================================
function EventsSection({ t, lang }) {
  const [lightbox, setLightbox] = useState(null);
  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === "Escape") setLightbox(null); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [lightbox]);

  const events = [
    { src: "assets/sampath/vijay-oath.jpg",               caption: lang === "en" ? "CM Oath · 10 May 2026" : "முதல்வர் பதவியேற்பு · 10 மே 2026", span: { col: 4, row: 2 } },
    { src: "assets/sampath/cabinet-expansion.webp",       caption: lang === "en" ? "Cabinet · 21 May 2026" : "அமைச்சரவை · 21 மே 2026",       span: { col: 2, row: 2 } },
    { src: "assets/rallies/western-region-conference.jpg",caption: lang === "en" ? "Western Region Conference" : "மேற்கு பிராந்திய மாநாடு",      span: { col: 3, row: 2 } },
    { src: "assets/rallies/vijay-addressing-cadres.jpg",  caption: lang === "en" ? "Cadre Address · Kongu" : "தொண்டர் கூட்டம் · கொங்கு",        span: { col: 3, row: 2 } },
    { src: "assets/rallies/vijay-roadshow.jpg",           caption: lang === "en" ? "Roadshow · Day 2" : "ரோடுஷோ · இரண்டாம் நாள்",              span: { col: 2, row: 1 } },
    { src: "assets/rallies/vijay-coimbatore-bang.webp",   caption: lang === "en" ? "Avinashi Road Roadshow · 26 Apr 2025" : "அவினாசி சாலை ரோடுஷோ · 26 ஏப்ரல் 2025", span: { col: 2, row: 1 } },
    { src: "assets/rallies/vijay-departs.jpg",            caption: lang === "en" ? "Departs Chennai" : "சென்னையிலிருந்து புறப்பாடு",          span: { col: 2, row: 1 } },
  ];

  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">
          {events.map((ev, i) => (
            <button
              key={i}
              type="button"
              className="e"
              style={{ gridColumn: `span ${ev.span.col}`, gridRow: `span ${ev.span.row}` }}
              onClick={() => setLightbox(ev)}
              aria-label={(lang === "en" ? "Open photo: " : "படத்தைத் திற: ") + ev.caption}
            >
              <img src={ev.src} alt={ev.caption} loading="lazy" />
              <span className="cap">{ev.caption}</span>
              <span className="ph-zoom" aria-hidden="true">⤢</span>
            </button>
          ))}
        </div>
      </Reveal>

      <div className="events-cta-row">
        <a className="btn-gold" href="/gallery/">
          {lang === "en" ? "View Full Gallery" : "முழுத் தொகுப்பு காண"}
          <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
      </div>

      {lightbox && (
        <div
          className="lightbox"
          role="dialog"
          aria-modal="true"
          aria-label={lightbox.caption}
          onClick={() => setLightbox(null)}
        >
          <button
            type="button"
            className="lightbox-close"
            onClick={(e) => { e.stopPropagation(); setLightbox(null); }}
            aria-label={lang === "en" ? "Close" : "மூடு"}
          >×</button>
          <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <img src={lightbox.src} alt={lightbox.caption} />
            <div className="lightbox-caption">{lightbox.caption}</div>
          </div>
        </div>
      )}
    </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">
            <a className="btn-gold" href="/join-tvk/">
              {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>
            </a>
            <a className="btn-outline" href="/enquiry/">{t.s_join_secondary}</a>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// Footer lives in chrome.jsx (shared with every page).

Object.assign(window, {
  Hero, DistrictSecretarySection, IdeologyTicker,
  TvkIconStrip,
  PrinciplesStripSection,
  MlasSection, AboutSection, IntegratedLeadershipSection,
  MinistersSection,
  BioSection, IdeologySection, ArticlesSection, EventsSection,
  JoinSection, Reveal,
});