const { useState, useEffect, useRef, useMemo, createContext, useContext, Fragment } = React;

const I18nContext = createContext({ lang: "en", setLang: () => {} });
const useI18n = () => useContext(I18nContext);
const t = (lang, en, ta) => (lang === "ta" && ta ? ta : en);

const Icon = ({ name, size = 16 }) => {
  const p = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    close: <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    edit: <><path d="M4 20h4l10-10-4-4L4 16v4z" /><path d="M14 6l4 4" /></>,
    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="1" /><path d="M3 9h18M8 3v4M16 3v4" /></>,
    news: <><rect x="3" y="4" width="18" height="16" rx="1" /><path d="M7 8h10M7 12h10M7 16h6" /></>,
    image: <><rect x="3" y="4" width="18" height="16" rx="1" /><circle cx="9" cy="10" r="2" /><path d="M3 18l5-5 4 4 3-3 6 6" /></>,
    people: <><circle cx="9" cy="8" r="4" /><path d="M2 21c0-4 3-7 7-7s7 3 7 7" /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="1" /><path d="M3 7l9 7 9-7" /></>,
    dashboard: <><rect x="3" y="3" width="8" height="8" /><rect x="13" y="3" width="8" height="5" /><rect x="13" y="10" width="8" height="11" /><rect x="3" y="13" width="8" height="8" /></>,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4" /></>,
    moon: <path d="M20 14.5A8 8 0 019.5 4 8 8 0 1020 14.5z" />,
    check: <path d="M5 12l5 5 9-11" />,
    logout: <><path d="M10 19H5V5h5" /><path d="M15 12H21M18 9l3 3-3 3" /></>,
    location: <><path d="M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z" /><circle cx="12" cy="9" r="2.5" /></>,
    github: <path d="M12 2a10 10 0 00-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.1-1.47-1.1-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.9.83.1-.65.35-1.08.63-1.33-2.22-.25-4.55-1.1-4.55-4.94 0-1.1.4-2 1.03-2.7-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 015 0c1.9-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.6 1.03 2.7 0 3.85-2.34 4.7-4.57 4.94.36.31.67.92.67 1.85v2.74c0 .27.18.58.69.48A10 10 0 0012 2z" />,
    search: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3-3" /></>,
    external: <><path d="M7 17L17 7M8 7h9v9" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 8v.01M11 12h1v5h1" /></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{p[name]}</svg>;
};

const Logo = ({ size = 40 }) => (
  <div style={{ width: size, height: size, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 4, background: "var(--bg-2)", border: "1px solid var(--rule)", flexShrink: 0 }}>
    <svg width={size * 0.7} height={size * 0.7} viewBox="0 0 40 40" fill="none" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 4 L24 20 L20 36 L16 20 Z" />
      <path d="M20 4 L20 36" />
      <circle cx="20" cy="20" r="3" />
      <path d="M8 20 Q 20 10 32 20" opacity="0.4" />
      <path d="M8 20 Q 20 30 32 20" opacity="0.4" />
    </svg>
  </div>
);

const Nav = ({ current, onNav }) => {
  const { lang, setLang, theme, setTheme } = useI18n();
  const links = [
    { id: "home", en: "Home", ta: "முகப்பு" },
    { id: "about", en: "About", ta: "எம்மைப் பற்றி" },
    { id: "feast", en: "Thirukalyanam", ta: "திருக்கல்யாணம்" },
    { id: "gallery", en: "Gallery", ta: "படத்தொகுப்பு" },
    { id: "leadership", en: "Leadership", ta: "தலைமை" },
    { id: "news", en: "News", ta: "செய்திகள்" },
    { id: "announcements", en: "Notices", ta: "அறிவிப்புகள்" },
    { id: "contact", en: "Contact", ta: "தொடர்பு" },
  ];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-logo" onClick={() => onNav("home")}>
          <Logo size={40} />
          <div>
            <div className="nav-logo-name">Ptmbstrust</div>
            <div className="nav-logo-sub">Madurai · Est. 1969</div>
          </div>
        </div>
        <div className="nav-links">
          {links.map(l => (
            <button key={l.id} className={"nav-link " + (current === l.id ? "active" : "")} onClick={() => onNav(l.id)} lang={lang === "ta" ? "ta" : undefined}>
              {t(lang, l.en, l.ta)}
            </button>
          ))}
        </div>
        <div className="nav-tools">
          <button className="lang-toggle" onClick={() => setLang(lang === "en" ? "ta" : "en")}>{lang === "en" ? "EN · த" : "த · EN"}</button>
          <button className="theme-toggle" onClick={() => setTheme(theme === "light" ? "dark" : "light")}><Icon name={theme === "light" ? "moon" : "sun"} size={14} /></button>
        </div>
      </div>
    </nav>
  );
};

const MottoBand = () => {
  const D = window.TRUST_DATA.trust;
  return (
    <div className="motto">
      <div className="wrap">
        <div className="motto-ta" lang="ta">{D.mottoTaTranslit}</div>
        <div className="motto-en">"{D.mottoEn}" — {D.mottoTranslation}</div>
      </div>
    </div>
  );
};

const Footer = ({ onNav }) => {
  const { lang } = useI18n();
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div><div className="footer-tag serif" lang={lang === "ta" ? "ta" : undefined}>{t(lang, "Service to the Divine through service to the people.", "மக்களுக்குச் செய்யும் சேவையே இறைவனுக்குச் செய்யும் சேவை.")}</div></div>
          <div><h4>Explore</h4><ul>
            <li><button onClick={() => onNav("about")}>About</button></li>
            <li><button onClick={() => onNav("feast")}>Thirukalyanam</button></li>
            <li><button onClick={() => onNav("gallery")}>Gallery</button></li>
            <li><button onClick={() => onNav("news")}>News</button></li>
            <li><button onClick={() => onNav("announcements")}>Announcements</button></li>
            <li><button onClick={() => onNav("newsletters")}>Newsletters</button></li>
          </ul></div>
          <div><h4>Leadership</h4><ul>
            <li><button onClick={() => onNav("leadership")}>Our lineage</button></li>
            <li><button onClick={() => onNav("contact")}>Contact</button></li>
          </ul></div>
          <div><h4>Admin</h4><ul>
            <li><a href="/admin/" style={{ background: "none", border: 0, padding: 0, color: "inherit", font: "inherit", cursor: "pointer", textDecoration: "none" }}>Staff sign in</a></li>
          </ul></div>
        </div>
        <div className="footer-bottom">
          <div>© 1969–2026 Pazhamuthircholai Thiruvarul Murugan Baktha Sabai Trust</div>
          <div className="mono">Madurai, Tamil Nadu</div>
        </div>
      </div>
    </footer>
  );
};

const ToastContext = createContext({ push: () => {} });
const useToast = () => useContext(ToastContext);
const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);
  const push = (msg, kind = "default") => {
    const id = Math.random().toString(36);
    setToasts(ts => [...ts, { id, msg, kind }]);
    setTimeout(() => setToasts(ts => ts.filter(x => x.id !== id)), 3000);
  };
  return (
    <ToastContext.Provider value={{ push }}>
      {children}
      <div className="toast-container">
        {toasts.map(t => <div key={t.id} className="toast">{t.kind === "gh" && <Icon name="github" size={14} />}{t.msg}</div>)}
      </div>
    </ToastContext.Provider>
  );
};

const Placeholder = ({ label, aspect = "4/3", style = {} }) => (
  <div style={{ aspectRatio: aspect, background: "repeating-linear-gradient(45deg, var(--bg-2) 0 10px, var(--bg-3) 10px 20px)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 11, padding: 16, textAlign: "center", ...style }}>{label}</div>
);

const Modal = ({ title, onClose, children, footer }) => (
  <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains("modal-backdrop")) onClose(); }}>
    <div className="modal">
      <div className="modal-head"><h3>{title}</h3><button className="icon-btn" onClick={onClose}><Icon name="close" /></button></div>
      <div className="modal-body">{children}</div>
      {footer && <div className="modal-foot">{footer}</div>}
    </div>
  </div>
);

Object.assign(window, { I18nContext, useI18n, t, Icon, Logo, Nav, MottoBand, Footer, ToastContext, useToast, ToastProvider, Placeholder, Modal, Fragment, useState, useEffect, useRef, useMemo });