const { useState, useEffect, useMemo, Fragment } = React;

const HomePage = ({ onNav }) => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA;
  const [cd, setCd] = useState(calc());
  useEffect(() => { const id = setInterval(() => setCd(calc()), 60000); return () => clearInterval(id); }, []);
  function calc() {
    const target = new Date("2026-04-28T08:30:00+05:30").getTime();
    const diff = target - Date.now();
    if (diff < 0) return null;
    return { d: Math.floor(diff/86400000), h: Math.floor((diff%86400000)/3600000), m: Math.floor((diff%3600000)/60000) };
  }
  return (
    <Fragment>
      <section className="hero"><div className="wrap">
        <div className="hero-meta">
          <span className="chip accent">{t(lang, "28 April 2026 · Flagship", "28 ஏப்ரல் 2026")}</span>
          <span className="mono" style={{ color: "var(--ink-3)" }}>— Est. 1969</span>
        </div>
        <div className="hero-grid">
          <div>
            <h1 className="hero-title" lang={lang === "ta" ? "ta" : undefined}>
              {t(lang,
                <>Fifty-five years of<br /><em>Annadhanam</em>,<br />for all who arrive.</>,
                <>ஐம்பத்தைந்து ஆண்டுகளாய்<br /><em>அன்னதானம்</em>,<br />வருவோருக்கெல்லாம்.</>
              )}
            </h1>
            <p className="hero-sub" lang={lang === "ta" ? "ta" : undefined}>
              {t(lang,
                "The Pazhamuthircholai Thiruvarul Murugan Baktha Sabai is a Madurai trust of service — a sustained tradition of food, pilgrimage and community built from a single vision in 1969.",
                "பழமுதிர்சோலை திருவருள் முருகன் பக்த சபை — 1969இல் தொடங்கிய ஒரு தரிசனத்திலிருந்து உருவான, உணவு, யாத்திரை, சமூக சேவை."
              )}
            </p>
            <div className="hero-actions">
              <button className="btn" onClick={() => onNav("feast")}>{t(lang, "2026 Thirukalyanam Feast", "2026 திருக்கல்யாண விருந்து")} <Icon name="arrow" /></button>
              <button className="btn ghost" onClick={() => onNav("about")}>{t(lang, "Our story", "எங்கள் கதை")}</button>
            </div>
          </div>
          <aside className="hero-aside">
            {cd && <div className="hero-aside-item">
              <div className="hero-aside-label">{t(lang, "Countdown", "விருந்து நேரம்")}</div>
              <div className="hero-aside-val">{cd.d}d · {cd.h}h · {cd.m}m</div>
              <div className="hero-aside-sub">Sethupathi Higher Sec. School, Madurai</div>
            </div>}
            <div className="hero-aside-item"><div className="hero-aside-label">{t(lang, "This year", "இந்த ஆண்டு")}</div><div className="hero-aside-val">28th</div><div className="hero-aside-sub">consecutive Thirukalyanam feast</div></div>
            <div className="hero-aside-item"><div className="hero-aside-label">{t(lang, "Expected", "எதிர்பார்ப்பு")}</div><div className="hero-aside-val">1,00,000+</div><div className="hero-aside-sub">devotees served</div></div>
          </aside>
        </div>
      </div></section>

      <MottoBand />

      <section className="section"><div className="wrap">
        <div className="stats">{D.stats.map((s,i) => (
          <div className="stat" key={i}><div className="stat-val">{s.value}</div><div className="stat-label" lang={lang === "ta" ? "ta" : undefined}>{t(lang, s.labelEn, s.labelTa)}</div></div>
        ))}</div>
      </div></section>

      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "This Chithirai", "இந்த சித்திரை")}</div><h2 className="section-head-title">{t(lang, "Upcoming feasts & service", "வரவிருக்கும் நிகழ்வுகள்")}</h2></div>
          <p className="section-head-body" lang={lang === "ta" ? "ta" : undefined}>{t(lang, "The Chithirai month is the trust's most demanding season — three consecutive days of preparation, service and community. Everyone is welcome.", "சித்திரை மாதம் எங்கள் சேவையின் உச்சம். அனைவரும் வருக.")}</p>
        </div>
        <div className="events-grid">{D.events.map(e => (
          <div className="event" key={e.id} onClick={() => onNav("event:" + e.id)}>
            <div className="event-date">{t(lang, e.dateEn, e.dateTa)}</div>
            <h3 className="event-title" lang={lang === "ta" ? "ta" : undefined}>{t(lang, e.titleEn, e.titleTa)}</h3>
            <div className="event-place" lang={lang === "ta" ? "ta" : undefined}>{t(lang, e.placeEn, e.placeTa)}</div>
            <div className="event-cta"><span className="chip">{e.tag}</span><Icon name="arrow" /></div>
          </div>
        ))}</div>
      </div></section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "1969 · Origin", "1969 · தொடக்கம்")}</div><h2 className="section-head-title serif-it">{t(lang, "A vision in the forest.", "ஒரு தரிசனம், காட்டில்.")}</h2></div>
          <p className="section-head-body" lang={lang === "ta" ? "ta" : undefined}>{t(lang, "In 1969, Guru Sevanthirajan encountered a young child in the forest of Pazhamudircholai who spoke of intense hunger. Recognizing this figure as Lord Murugan, the Guru faced a question that would define the trust's work.", "1969இல், குரு செவந்திராஜன் பழமுதிர்சோலை காட்டில் ஒரு பசித்த சிறுவனை சந்தித்தார்.")}</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <blockquote style={{ margin: 0, padding: "0 0 0 32px", borderLeft: "2px solid var(--accent)" }}>
            <div style={{ fontFamily: "var(--serif-display)", fontSize: 30, fontStyle: "italic", lineHeight: 1.3, color: "var(--ink)", marginBottom: 16 }} lang={lang === "ta" ? "ta" : undefined}>
              {t(lang, "How can one offer food to the Lord who can feed the entire universe?", "அண்டமெல்லாம் உணவளிக்கும் இறைவனுக்கு, நாம் என்ன உணவளிப்போம்?")}
            </div>
            <div style={{ fontFamily: "var(--serif-sub)", fontSize: 17, color: "var(--ink-2)" }} lang={lang === "ta" ? "ta" : undefined}>
              {t(lang, "Serving the people is the only way to serve the Lord.", "மக்களுக்குச் செய்யும் சேவையே இறைவனுக்குச் செய்யும் சேவை.")}
            </div>
            <div className="mono" style={{ marginTop: 16, color: "var(--ink-3)" }}>— Guru Sevanthirajan, 1969</div>
          </blockquote>
          <Placeholder label="[ Portrait — Guru Sevanthirajan, archival ]" aspect="4/5" />
        </div>
        <div style={{ marginTop: 40, textAlign: "center" }}>
          <button className="btn ghost" onClick={() => onNav("about")}>{t(lang, "Read the full history", "முழு வரலாறு")} <Icon name="arrow" /></button>
        </div>
      </div></section>

      <section className="section"><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "Latest", "சமீபத்திய")}</div><h2 className="section-head-title">{t(lang, "News & dispatches", "செய்திகள்")}</h2></div>
          <p className="section-head-body">{t(lang, "Updates from the trust — event reports, volunteer calls, and notes from the field.", "நிகழ்வுகள், தன்னார்வலர் அழைப்புகள்.")}</p>
        </div>
        <div className="news-list">{D.news.slice(0,3).map(n => (
          <div className="news-item" key={n.id} onClick={() => onNav("news:" + n.id)}>
            <div className="news-date">{n.dateEn}</div>
            <div><h3 className="news-title">{n.titleEn}</h3><p className="news-excerpt">{n.excerptEn}</p></div>
            <div className="news-tag">{n.tag}</div>
          </div>
        ))}</div>
        <div style={{ marginTop: 32 }}><button className="btn ghost" onClick={() => onNav("news")}>{t(lang, "All news & press", "அனைத்து செய்திகள்")} <Icon name="arrow" /></button></div>
      </div></section>
    </Fragment>
  );
};

const AboutPage = () => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA;
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "About the trust", "எம்மைப் பற்றி")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }} lang={lang === "ta" ? "ta" : undefined}>
          {t(lang, <>Service to the Divine<br />through <em>service to the people</em>.</>, <>மக்களுக்குச் சேவை செய்வதன் மூலம்<br /><em>இறைவனுக்குச் சேவை</em>.</>)}
        </h1>
      </div></section>

      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "Timeline", "காலவரிசை")}</div><h2 className="section-head-title">{t(lang, "Fifty-five years, in milestones.", "55 ஆண்டுகள், மைல்கற்களில்.")}</h2></div>
          <p className="section-head-body">{t(lang, "Each milestone marks a strategic evolution — from a circle of disciples to a pillar of the region's social infrastructure.", "ஒவ்வொரு மைல்கல்லும் ஒரு வளர்ச்சி.")}</p>
        </div>
        <div className="timeline">{D.timeline.map((r,i) => (
          <Fragment key={i}><div className="tl-year">{r.year}</div><div className="tl-body"><h3 className="tl-title">{r.titleEn}</h3><p className="tl-text">{r.bodyEn}</p></div></Fragment>
        ))}</div>
      </div></section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "Annual calendar", "ஆண்டுச் சேவைகள்")}</div><h2 className="section-head-title">{t(lang, "A year of service.", "ஓராண்டுச் சேவை.")}</h2></div>
          <p className="section-head-body">{t(lang, "Five locations, six tastes: every feast honors the Aru Suvai Virunthu — Sweet, Sour, Salt, Bitter, Pungent, Astringent.", "ஐந்து இடங்கள், ஆறு சுவை.")}</p>
        </div>
        <div className="calendar">{D.annualCalendar.map((c,i) => (
          <div className="cal-row" key={i}>
            <div className="cal-month">{c.monthEn}</div>
            <div className="cal-title">{c.titleEn}{c.flagship && <span className="chip accent" style={{ marginLeft: 12 }}>Flagship</span>}</div>
            <div className="cal-place">{c.placeEn}</div><Icon name="arrow" />
          </div>
        ))}</div>
        <div style={{ marginTop: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t(lang, "Aru Suvai · Six tastes", "ஆறு சுவை")}</div>
          <div className="tastes">{[
            {en:"Sweet",ta:"இனிப்பு"},{en:"Sour",ta:"புளிப்பு"},{en:"Salt",ta:"உப்பு"},
            {en:"Bitter",ta:"கசப்பு"},{en:"Pungent",ta:"காரம்"},{en:"Astringent",ta:"துவர்ப்பு"}
          ].map((x,i) => <div className="taste" key={i}><div className="taste-name">{x.en}</div><div className="taste-ta" lang="ta">{x.ta}</div></div>)}</div>
        </div>
      </div></section>

      <section className="section"><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "Crisis response", "நெருக்கடியில்")}</div><h2 className="section-head-title">{t(lang, "COVID-19 intervention, 2020–21.", "கோவிட் சேவை.")}</h2></div>
          <p className="section-head-body">{t(lang, "When Madurai's public-health infrastructure was most under pressure, the trust repurposed its festival-feast logistics into a civic first-responder operation.", "மதுரையின் சுகாதார அமைப்பு அழுத்தத்தில் இருந்தபோது, நெருக்கடி-பதில் சேவை.")}</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div className="card" style={{ padding: 32 }}><div style={{ fontFamily: "var(--serif-display)", fontSize: 72, lineHeight: 1, color: "var(--accent)" }}>1,20,000</div><div className="eyebrow" style={{ marginTop: 8 }}>Food packets distributed</div></div>
          <div className="card" style={{ padding: 32 }}><div style={{ fontFamily: "var(--serif-display)", fontSize: 72, lineHeight: 1, color: "var(--accent)" }}>5,000+</div><div className="eyebrow" style={{ marginTop: 8 }}>Vaccinations facilitated</div></div>
        </div>
      </div></section>
    </Fragment>
  );
};

const FeastPage = () => {
  const { lang } = useI18n();
  const menu = [
    { num: "01", name: "Chakkarai Pongal", ta: "சக்கரைப் பொங்கல்" },
    { num: "02", name: "Vegetable Rice", ta: "காய்கறி சாதம்" },
    { num: "03", name: "Tomato Rice", ta: "தக்காளி சாதம்" },
    { num: "04", name: "Sambar Rice", ta: "சாம்பார் சாதம்" },
    { num: "05", name: "Curd Rice", ta: "தயிர் சாதம்" },
  ];
  return (
    <Fragment>
      <section className="feast-hero wrap">
        <div>
          <div className="eyebrow">{t(lang, "Flagship · 28 April 2026", "28 ஏப்ரல் 2026")}</div>
          <h1 className="hero-title" style={{ marginTop: 20 }} lang={lang === "ta" ? "ta" : undefined}>
            {t(lang, <>Meenakshi — Sundareswarar<br /><em>Thirukalyanam</em> Feast.</>, <>மீனாட்சி — சுந்தரேஸ்வரர்<br /><em>திருக்கல்யாண</em> விருந்து.</>)}
          </h1>
          <p className="hero-sub" style={{ marginTop: 16 }} lang={lang === "ta" ? "ta" : undefined}>
            {t(lang, "For 28 consecutive years, the trust has served a sumptuous six-taste feast on the day of the celestial wedding of Goddess Meenakshi and Lord Sundareswarar. From 8:30 AM until the last devotee leaves.", "28 ஆண்டுகளாக, ஆறுசுவை விருந்து. காலை 8:30 முதல் கடைசி அன்பர் வரை.")}
          </p>
        </div>
        <div>
          <div className="feast-countdown">
            <div className="cd-item"><div className="cd-num">28</div><div className="cd-label">April</div></div>
            <div className="cd-item"><div className="cd-num">100k</div><div className="cd-label">Devotees</div></div>
            <div className="cd-item"><div className="cd-num">06</div><div className="cd-label">Tastes</div></div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 20, fontFamily: "var(--sans)", fontSize: 13, color: "var(--ink-3)" }}>
            <Icon name="location" size={14} />
            Sethupathi Higher Secondary School, Madurai
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}><div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 24 }}>{t(lang, "The menu", "மெனு")}</div>
        <div className="menu-grid">{menu.map(m => (
          <div className="menu-item" key={m.num}><div className="num">{m.num}</div><div><div className="name" lang={lang === "ta" ? "ta" : undefined}>{t(lang, m.name, m.ta)}</div></div></div>
        ))}</div>
      </div></section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--rule)" }}><div className="wrap">
        <div className="section-head">
          <div><div className="eyebrow">{t(lang, "Night before", "முந்தைய இரவு")}</div><h2 className="section-head-title serif-it">Mappillai Azhaippu Virundhu.</h2></div>
          <p className="section-head-body">{t(lang, "On the evening of 27 April 2026, the trust hosts the special 'groom's welcome' dinner — Kesari, Pongal and Vadai.", "27 ஏப்ரல் மாலை, மாப்பிள்ளை அழைப்பு விருந்து — கேசரி, பொங்கல், வடை.")}</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          <Placeholder label="[ Service line photograph ]" aspect="3/4" />
          <Placeholder label="[ Chakkarai Pongal, bulk preparation ]" aspect="3/4" />
          <Placeholder label="[ Plantain leaf, fully plated ]" aspect="3/4" />
        </div>
      </div></section>
    </Fragment>
  );
};

const GalleryPage = ({ onNav }) => {
  const { lang } = useI18n();
  const [filter, setFilter] = useState("All");
  const [open, setOpen] = useState(null);
  const G = window.TRUST_DATA.gallery;
  const tags = ["All", ...new Set(G.map(g => g.tag))];
  const items = filter === "All" ? G : G.filter(g => g.tag === filter);
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56, paddingBottom: 32 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "Gallery", "படத்தொகுப்பு")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }} lang={lang === "ta" ? "ta" : undefined}>
          {t(lang, <>Fifty-five years, <em>in pictures.</em></>, <>55 ஆண்டுகள், <em>படங்களில்.</em></>)}
        </h1>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 32 }}>
          {tags.map(tg => <button key={tg} className={"chip " + (filter === tg ? "accent" : "")} style={{ cursor: "pointer" }} onClick={() => setFilter(tg)}>{tg}</button>)}
        </div>
      </div></section>
      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        <div className="gallery">{items.map((g,i) => (
          <div key={g.id} className={"gallery-item " + (i === 0 ? "wide" : "")}
            onClick={() => setOpen(g)}
            style={g.src ? { backgroundImage: `url('${g.src}')`, backgroundSize: "cover", backgroundPosition: "center" } : {}}>
            {g.type === "video" && <div className="play-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>}
            <div className="gallery-caption"><span className="tag">{g.tag}{g.type === "video" ? " · Video" : ""}</span>{t(lang, g.captionEn, g.captionTa)}</div>
          </div>
        ))}</div>
      </div></section>
      {open && <Lightbox item={open} onClose={() => setOpen(null)} />}
    </Fragment>
  );
};

const Lightbox = ({ item, onClose }) => (
  <div className="lightbox" onClick={onClose}>
    <button className="lightbox-close" onClick={onClose}><Icon name="close" size={18} /></button>
    <div className="lightbox-inner" onClick={e => e.stopPropagation()}>
      {item.type === "video"
        ? (item.src
            ? <video src={item.src} controls autoPlay style={{ maxWidth: "90vw", maxHeight: "75vh", display: "block" }} />
            : <div className="lightbox-placeholder">[ Video not yet uploaded ]<br /><span className="mono" style={{ fontSize: 11, opacity: .7 }}>Upload via Admin → Gallery</span></div>)
        : (item.src
            ? <img src={item.src} alt={item.captionEn} style={{ maxWidth: "90vw", maxHeight: "75vh", display: "block" }} />
            : <div className="lightbox-placeholder">[ Photo not yet uploaded ]<br /><span className="mono" style={{ fontSize: 11, opacity: .7 }}>Upload via Admin → Gallery</span></div>)}
      <div className="lightbox-caption">
        <span className="chip">{item.tag}</span>
        <div className="cap">{item.captionEn}</div>
      </div>
    </div>
  </div>
);

const DetailPage = ({ kind, id, onNav }) => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA;
  const source = kind === "event" ? D.events : kind === "news" ? D.news : kind === "announcement" ? (D.announcements || []) : [];
  const item = source.find(x => x.id === id);
  if (!item) return (
    <section className="section" style={{ paddingTop: 80 }}><div className="wrap">
      <div className="eyebrow">Not found</div>
      <h1 className="hero-title">This page has moved.</h1>
      <button className="btn" onClick={() => onNav("home")}>← Back home</button>
    </div></section>
  );
  const galleryItems = (item.galleryIds || []).map(gid => D.gallery.find(g => g.id === gid)).filter(Boolean);
  const backTo = kind === "event" ? "feast" : kind === "news" ? "news" : "announcements";
  const backLabel = kind === "event" ? "All feasts" : kind === "news" ? "All news" : "All announcements";
  return (
    <Fragment>
      <section className="section detail-hero"><div className="wrap">
        <button className="detail-back" onClick={() => onNav(backTo)}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
          {backLabel}
        </button>
        <div className="eyebrow" style={{ marginTop: 32 }}>
          {item.dateEn}{item.tag ? " · " + item.tag : ""}{kind === "event" && item.placeEn ? " · " + item.placeEn : ""}
        </div>
        <h1 className="detail-title" lang={lang === "ta" ? "ta" : undefined}>{t(lang, item.titleEn, item.titleTa || item.titleEn)}</h1>
        {item.excerptEn && <p className="detail-lede">{item.excerptEn}</p>}
        {kind === "event" && item.timeEn && (
          <div className="detail-meta">
            <div><div className="eyebrow">When</div><div className="val">{item.timeEn} · {item.dateEn}</div></div>
            <div><div className="eyebrow">Where</div><div className="val">{item.placeEn}</div></div>
            <div><div className="eyebrow">Tag</div><div className="val" style={{ textTransform: "capitalize" }}>{item.tag}</div></div>
          </div>
        )}
      </div></section>
      <section className="section" style={{ paddingTop: 0 }}><div className="wrap detail-body-wrap">
        <article className="detail-body">
          {item.bodyEn
            ? item.bodyEn.split("\n\n").map((p, i) => <p key={i}>{p}</p>)
            : <p style={{ color: "var(--ink-3)", fontStyle: "italic" }}>Full description coming soon.</p>}
        </article>
        <aside className="detail-aside">
          <div className="eyebrow">Share or get involved</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 16 }}>
            <button className="btn" onClick={() => onNav("contact")}>Contact the trust <Icon name="arrow" /></button>
            <button className="btn ghost" onClick={() => onNav(backTo)}>{backLabel} <Icon name="arrow" /></button>
          </div>
        </aside>
      </div></section>
      {galleryItems.length > 0 && (
        <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 20 }}>From the gallery</div>
          <div className="gallery">{galleryItems.map(g => (
            <div key={g.id} className="gallery-item" onClick={() => onNav("gallery")}
              style={g.src ? { backgroundImage: `url('${g.src}')`, backgroundSize: "cover", backgroundPosition: "center" } : {}}>
              <div className="gallery-caption"><span className="tag">{g.tag}</span>{g.captionEn}</div>
            </div>
          ))}</div>
        </div></section>
      )}
    </Fragment>
  );
};

const AnnouncementsPage = ({ onNav }) => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA.announcements || [];
  const sorted = [...D].sort((a,b) => (b.pinned?1:0) - (a.pinned?1:0));
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "Announcements", "அறிவிப்புகள்")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }}>
          {t(lang, <>Notices &amp; <em>service calls.</em></>, <>அறிவிப்புகள்.</>)}
        </h1>
        <p className="hero-sub" style={{ marginTop: 16 }}>Short, time-sensitive notices — volunteer calls, traffic advisories, and schedule changes.</p>
      </div></section>
      <section className="section" style={{ paddingTop: 24 }}><div className="wrap">
        <div className="announce-list">{sorted.map(a => (
          <div key={a.id} className={"announce-item " + (a.pinned ? "pinned" : "")} onClick={() => onNav("announcement:" + a.id)}>
            {a.pinned && <div className="announce-pin">★ Pinned</div>}
            <div className="news-date">{a.dateEn}</div>
            <div>
              <h3 className="news-title">{a.titleEn}</h3>
              <p className="news-excerpt">{a.bodyEn}</p>
            </div>
            <Icon name="arrow" />
          </div>
        ))}</div>
      </div></section>
    </Fragment>
  );
};

const NewslettersPage = ({ onNav }) => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA.newsletters || [];
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "Newsletters", "செய்திமடல்")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }}>
          {t(lang, <>The <em>monthly letter.</em></>, <>மாத செய்திமடல்.</>)}
        </h1>
        <p className="hero-sub" style={{ marginTop: 16 }}>Event reports, accounts, a photo essay, and a letter from the Thalapathi.</p>
      </div></section>
      <section className="section" style={{ paddingTop: 24 }}><div className="wrap">
        <div className="newsletter-grid">{D.map(nl => (
          <div key={nl.id} className="newsletter-card">
            <div className="newsletter-cover">
              <div className="eyebrow" style={{ color: "var(--accent)" }}>{nl.issueEn}</div>
              <div className="newsletter-title">{nl.titleEn}</div>
              <div className="mono" style={{ color: "var(--ink-3)", marginTop: "auto" }}>{nl.dateEn}</div>
            </div>
            <div className="newsletter-meta">
              <p>{nl.summaryEn}</p>
              <button className="btn small ghost" onClick={() => alert("PDF upload available in Admin → Newsletters")}>
                {nl.pdf ? "Download PDF" : "PDF not uploaded"} <Icon name="arrow" />
              </button>
            </div>
          </div>
        ))}</div>
      </div></section>
    </Fragment>
  );
};

const LeadershipPage = () => {
  const { lang } = useI18n();
  const D = window.TRUST_DATA.leaders;
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "Leadership & lineage", "தலைமை")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }} lang={lang === "ta" ? "ta" : undefined}>
          {t(lang, <>Three generations,<br /><em>one continuous vow.</em></>, <>மூன்று தலைமுறைகள்,<br /><em>ஒரே உறுதிமொழி.</em></>)}
        </h1>
      </div></section>
      <section className="section" style={{ paddingTop: 32 }}><div className="wrap">
        <div className="leaders-grid">{D.map(l => (
          <div className="leader" key={l.id}>
            <div className="leader-portrait" style={l.photo ? { backgroundImage: `url('${l.photo}')`, backgroundSize: "cover", backgroundPosition: "center top", color: "transparent" } : {}}>{!l.photo && <>[ Portrait ·<br />{l.nameEn} ]</>}</div>
            <div className="leader-period">{l.periodEn}</div>
            <h3 className="leader-name">{l.nameEn}</h3>
            <div className="leader-name-ta" lang="ta">{l.nameTa}</div>
            <div className="leader-role">{l.roleEn}</div>
            <p className="leader-bio">{l.bioEn}</p>
          </div>
        ))}</div>
      </div></section>
    </Fragment>
  );
};

const NewsPage = ({ onNav }) => {
  const { lang } = useI18n();
  const [filter, setFilter] = useState("All");
  const D = window.TRUST_DATA.news;
  const tags = ["All", ...new Set(D.map(n => n.tag))];
  const items = filter === "All" ? D : D.filter(n => n.tag === filter);
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "News & press", "செய்திகள்")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }}>{t(lang, <>Dispatches from<br /><em>the trust.</em></>, <>எங்கள் <em>செய்திகள்.</em></>)}</h1>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 32 }}>
          {tags.map(tg => <button key={tg} className={"chip " + (filter === tg ? "accent" : "")} style={{ cursor: "pointer" }} onClick={() => setFilter(tg)}>{tg}</button>)}
        </div>
      </div></section>
      <section className="section" style={{ paddingTop: 32 }}><div className="wrap">
        <div className="news-list">{items.map(n => (
          <div className="news-item" key={n.id} onClick={() => onNav && onNav("news:" + n.id)}>
            <div className="news-date">{n.dateEn}</div>
            <div><h3 className="news-title">{n.titleEn}</h3><p className="news-excerpt">{n.excerptEn}</p></div>
            <div className="news-tag">{n.tag}</div>
          </div>
        ))}</div>
      </div></section>
    </Fragment>
  );
};

const ContactPage = () => {
  const { lang } = useI18n();
  const toast = useToast();
  const D = window.TRUST_DATA.contact;
  const [form, setForm] = useState({ name: "", email: "", subject: "General", message: "" });
  const submit = (e) => { e.preventDefault(); toast.push(t(lang, "Message sent.", "செய்தி அனுப்பப்பட்டது.")); setForm({ name: "", email: "", subject: "General", message: "" }); };
  return (
    <Fragment>
      <section className="section" style={{ paddingTop: 56 }}><div className="wrap">
        <div className="eyebrow">{t(lang, "Contact", "தொடர்பு")}</div>
        <h1 className="hero-title" style={{ marginTop: 16 }}>{t(lang, <>Reach the <em>trust office.</em></>, <>தொடர்பு கொள்ளுங்கள்.</>)}</h1>
      </div></section>
      <section className="section" style={{ paddingTop: 32 }}><div className="wrap">
        <div className="contact-grid">
          <div>
            <div className="contact-field"><label>{t(lang, "Address", "முகவரி")}</label><div className="val" lang={lang === "ta" ? "ta" : undefined}>{t(lang, D.addressEn, D.addressTa)}</div></div>
            <div className="contact-field"><label>{t(lang, "Phone", "தொலைபேசி")}</label><div className="val">{D.phone}</div></div>
            <div className="contact-field"><label>Email</label><div className="val">{D.email}</div></div>
          </div>
          <form onSubmit={submit}>
            <div className="form-row"><label>{t(lang, "Your name", "பெயர்")}</label><input className="input" value={form.name} onChange={e => setForm({...form, name: e.target.value})} required /></div>
            <div className="form-row"><label>Email</label><input className="input" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} required /></div>
            <div className="form-row"><label>{t(lang, "Subject", "விஷயம்")}</label>
              <select className="input" value={form.subject} onChange={e => setForm({...form, subject: e.target.value})}>
                <option>General</option><option>Volunteering</option><option>Press</option>
              </select>
            </div>
            <div className="form-row"><label>{t(lang, "Message", "செய்தி")}</label><textarea className="input" value={form.message} onChange={e => setForm({...form, message: e.target.value})} required /></div>
            <button className="btn" type="submit">{t(lang, "Send message", "அனுப்பு")} <Icon name="arrow" /></button>
          </form>
        </div>
      </div></section>
    </Fragment>
  );
};

Object.assign(window, { HomePage, AboutPage, FeastPage, GalleryPage, LeadershipPage, NewsPage, ContactPage, DetailPage, AnnouncementsPage, NewslettersPage });