// Shared components for Wat Thai Norway
// React is loaded globally; styles use scoped names to avoid collisions.

const { useState, useEffect, useRef } = React;

function BtnPrimary({ children, onClick, href, external, className = "" }) {
  const cls = "wn-btn wn-btn--primary " + className;
  if (href) {
    return <a href={href} className={cls} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>{children}</a>;
  }
  return <button type="button" className={cls} onClick={onClick}>{children}</button>;
}
function BtnSecondary({ children, onClick, href, external, className = "" }) {
  const cls = "wn-btn wn-btn--secondary " + className;
  if (href) {
    return <a href={href} className={cls} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>{children}</a>;
  }
  return <button type="button" className={cls} onClick={onClick}>{children}</button>;
}
function BtnGhost({ children, onClick, href, external, className = "" }) {
  const cls = "wn-btn wn-btn--ghost " + className;
  if (href) {
    return <a href={href} className={cls} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>{children}</a>;
  }
  return <button type="button" className={cls} onClick={onClick}>{children}</button>;
}
function BtnLight({ children, onClick, className = "" }) {
  return <button type="button" className={"wn-btn wn-btn--light " + className} onClick={onClick}>{children}</button>;
}

// ─── Subtle striped image placeholder ──────────────────────────────
function ImagePlaceholder({ label, ratio = "4 / 5", tone = "warm", style = {}, children }) {
  const palettes = {
    warm: { bg: "#efe7d8", stripe: "#e4d8c1", ink: "#6b5a3e" },
    deep: { bg: "#2c2218", stripe: "#3a2e21", ink: "#c9a227" },
    cool: { bg: "#e6e4dd", stripe: "#d6d2c6", ink: "#5e5749" },
  };
  const p = palettes[tone] || palettes.warm;
  return (
    <div
      style={{
        position: "relative",
        aspectRatio: ratio,
        width: "100%",
        backgroundColor: p.bg,
        backgroundImage: `repeating-linear-gradient(45deg, ${p.stripe} 0 2px, transparent 2px 14px)`,
        overflow: "hidden",
        ...style,
      }}
    >
      {label && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
            fontSize: "10px",
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: p.ink,
            textAlign: "center",
            padding: "16px",
          }}
        >
          {label}
        </div>
      )}
      {children}
    </div>
  );
}

// ─── Thai-style ornamental divider (subtle line + dot) ──────────────
function Ornament({ width = 96, color = "var(--accent)" }) {
  return (
    <svg
      width={width}
      height="10"
      viewBox="0 0 96 10"
      fill="none"
      style={{ display: "block" }}
      aria-hidden="true"
    >
      <line x1="0" y1="5" x2="38" y2="5" stroke={color} strokeWidth="0.8" />
      <circle cx="48" cy="5" r="2.6" fill={color} />
      <circle cx="48" cy="5" r="5" fill="none" stroke={color} strokeWidth="0.6" />
      <line x1="58" y1="5" x2="96" y2="5" stroke={color} strokeWidth="0.8" />
    </svg>
  );
}

// ─── Lotus mark (used as logo) ──────────────────────────────────────
// ─── Temple emblem (DTB 35-year anniversary logo) ───────────────────
function LotusMark({ size = 28, color }) {
  return (
    <span
      aria-hidden="true"
      style={{
        display: "inline-block",
        width: size,
        height: size,
        borderRadius: "50%",
        overflow: "hidden",
        flexShrink: 0,
        backgroundImage: "url('assets/logo-dtb.jpg')",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    />
  );
}

// ─── Moon glyph for calendar days ───────────────────────────────────
function MoonIcon({ kind = "full", size = 18 }) {
  if (!kind) return null;
  if (kind === "full") {
    return (
      <svg width={size} height={size} viewBox="0 0 18 18" aria-hidden="true">
        <circle cx="9" cy="9" r="6" fill="currentColor" opacity="0.85" />
      </svg>
    );
  }
  // new moon — outline only
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" aria-hidden="true">
      <circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.7" />
    </svg>
  );
}

// ─── Header (sticky, transparent on hero) ───────────────────────────
function Header({ t, page, setPage, onDark = false, lang = "th", onLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobile, setMobile] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 860px)");
    const apply = () => setMobile(mq.matches);
    apply();
    mq.addEventListener("change", apply);
    return () => mq.removeEventListener("change", apply);
  }, []);
  useEffect(() => { if (!mobile) setMenuOpen(false); }, [mobile]);

  const go = (id, e) => {
    if (e && e.metaKey) return;
    if (e) e.preventDefault();
    setPage(id);
    setMenuOpen(false);
  };
  const href = function (id) {
    return window.TempleEventsData ? window.TempleEventsData.pageHref(id) : "/" + (id === "home" ? "" : id);
  };
  const isActive = function (id) {
    if (id === "events") return page === "events" || page === "eventDetail" || page === "gallery";
    return page === id;
  };
  const light = onDark && !scrolled && !menuOpen;
  const cPrimary = light ? "#fbf7ef" : "var(--ink)";
  const cMuted = light ? "rgba(251,247,239,0.72)" : "var(--muted)";
  const cLine = light ? "rgba(251,247,239,0.28)" : "var(--line)";
  const languageOptions = [
    { id: "th", label: "ไทย", short: "ไทย", title: "ภาษาไทย" },
    { id: "no", label: "Norsk", short: "Norsk", title: "Norsk" },
    { id: "en", label: "English", short: "English", title: "English" },
  ];

  const nav = [
    { id: "home", label: t.nav.home },
    { id: "about", label: t.nav.about },
    { id: "events", label: t.nav.events },
    { id: "dailyDhamma", label: t.nav.buddhism },
    { id: "people", label: t.nav.community },
  ];

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        backgroundColor: (scrolled || menuOpen) ? "var(--bg)" : "transparent",
        borderBottom: (scrolled || menuOpen) ? "1px solid var(--line)" : "1px solid transparent",
        transition: "background-color 240ms ease, border-color 240ms ease",
        backdropFilter: (scrolled && !menuOpen) ? "blur(8px)" : "none",
      }}
    >
      <div className="wn-container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 0" }}>
        <button
          onClick={() => setPage("home")}
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
            background: "none",
            border: "none",
            cursor: "pointer",
            color: cPrimary,
            padding: 0,
            transition: "color 240ms ease",
          }}
        >
          <LotusMark size={42} />
          <div style={{ textAlign: "left", lineHeight: 1.1 }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "20px", letterSpacing: "0.01em" }}>{t.siteName}</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.22em", textTransform: "uppercase", color: cMuted }}>
              {t.siteTagline}
            </div>
          </div>
        </button>

        <nav style={{ display: mobile ? "none" : "flex", alignItems: "center", gap: "20px" }}>
          {nav.map((n) => {
            const active = isActive(n.id);
            return (
              <a
                key={n.id}
                href={href(n.id)}
                onClick={(e) => go(n.id, e)}
                style={{
                  backgroundColor: active ? "var(--accent)" : light ? "rgba(251,247,239,0.10)" : "rgba(201,162,39,0.08)",
                  border: `1px solid ${active ? "var(--accent)" : light ? "rgba(251,247,239,0.22)" : "rgba(201,162,39,0.20)"}`,
                  borderRadius: "999px",
                  cursor: "pointer",
                  padding: "9px 14px",
                  fontFamily: "var(--font-body)",
                  fontSize: "13px",
                  letterSpacing: "0.04em",
                  color: active ? "#191107" : cPrimary,
                  boxShadow: active ? "0 10px 28px rgba(201,162,39,0.28)" : "none",
                  transition: "background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease",
                  textDecoration: "none",
                }}
                onMouseEnter={(e) => {
                  if (!active) {
                    e.currentTarget.style.backgroundColor = "rgba(201,162,39,0.18)";
                    e.currentTarget.style.borderColor = "rgba(201,162,39,0.42)";
                  }
                }}
                onMouseLeave={(e) => {
                  if (!active) {
                    e.currentTarget.style.backgroundColor = light ? "rgba(251,247,239,0.10)" : "rgba(201,162,39,0.08)";
                    e.currentTarget.style.borderColor = light ? "rgba(251,247,239,0.22)" : "rgba(201,162,39,0.20)";
                  }
                }}
              >
                {n.label}
              </a>
            );
          })}
          <div style={{ width: "1px", height: "20px", background: cLine }} />
          <div aria-label="Language" style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            {languageOptions.map((l, i) => (
              <React.Fragment key={l.id}>
                {i > 0 && <span style={{ width: "1px", height: "12px", background: cLine }} />}
                <button
                  onClick={() => onLang && onLang(l.id)}
                  title={l.title}
                  aria-pressed={lang === l.id}
                  style={{
                    background: lang === l.id ? "rgba(201,162,39,0.14)" : "none",
                    border: lang === l.id ? "1px solid rgba(201,162,39,0.42)" : "1px solid transparent",
                    borderRadius: "999px",
                    cursor: "pointer",
                    padding: "7px 10px",
                    fontFamily: "var(--font-body)",
                    fontSize: l.id === "en" ? "12px" : "13px",
                    letterSpacing: "0.04em",
                    color: lang === l.id ? cPrimary : cMuted,
                    transition: "color 160ms ease, border-color 160ms ease, background-color 160ms ease",
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = cPrimary)}
                  onMouseLeave={(e) => (e.currentTarget.style.color = lang === l.id ? cPrimary : cMuted)}
                >
                  {l.label}
                </button>
              </React.Fragment>
            ))}
          </div>
          <div style={{ width: "1px", height: "20px", background: cLine }} />
          <button
            onClick={() => setPage("contact")}
            style={{
              backgroundColor: page === "contact" ? "var(--accent)" : "transparent",
              color: page === "contact" ? "#191107" : cPrimary,
              border: `1px solid ${page === "contact" ? "var(--accent)" : light ? "rgba(251,247,239,0.5)" : "var(--accent)"}`,
              padding: "10px 20px",
              borderRadius: "999px",
              fontFamily: "var(--font-body)",
              fontSize: "13px",
              letterSpacing: "0.04em",
              cursor: "pointer",
              transition: "color 240ms ease, border-color 240ms ease",
            }}
          >
            {t.nav.contact}
          </button>
          <button
            onClick={() => setPage("donate")}
            style={{
              backgroundColor: "var(--accent)",
              color: "#191107",
              border: "1px solid var(--accent)",
              padding: "10px 20px",
              borderRadius: "999px",
              fontFamily: "var(--font-body)",
              fontSize: "13px",
              letterSpacing: "0.04em",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: "8px",
              transition: "background-color 240ms ease, color 240ms ease, border-color 240ms ease",
            }}
          >
            <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "#191107" }} />
            {t.nav.donate}
          </button>
        </nav>

        {mobile && (
          <button
            onClick={() => setMenuOpen((v) => !v)}
            aria-label="Menu"
            aria-expanded={menuOpen}
            style={{ background: "none", border: "none", cursor: "pointer", padding: "10px 0 10px 10px", display: "flex", flexDirection: "column", justifyContent: "center", gap: "6px", width: "34px", height: "44px" }}
          >
            <span style={{ display: "block", width: "24px", height: "1.5px", background: cPrimary, transformOrigin: "center", transition: "transform 220ms ease, opacity 160ms ease", transform: menuOpen ? "translateY(3.75px) rotate(45deg)" : "none" }} />
            <span style={{ display: "block", width: "24px", height: "1.5px", background: cPrimary, transition: "transform 220ms ease, opacity 160ms ease", transform: menuOpen ? "translateY(-3.75px) rotate(-45deg)" : "none" }} />
          </button>
        )}
      </div>

      {mobile && menuOpen && (
        <div style={{ position: "fixed", inset: 0, zIndex: 45, background: "var(--bg)", overflowY: "auto", WebkitOverflowScrolling: "touch", paddingTop: "92px", paddingBottom: "40px" }}>
        <div className="wn-container" style={{ paddingTop: "8px", paddingBottom: "28px" }}>
          <nav style={{ display: "flex", flexDirection: "column" }}>
            {nav.map((n) => (
              <a
                key={n.id}
                href={href(n.id)}
                onClick={(e) => go(n.id, e)}
                style={{
                  background: isActive(n.id) ? "var(--accent)" : "transparent",
                  border: isActive(n.id) ? "1px solid var(--accent)" : "1px solid transparent",
                  borderTop: "1px solid var(--line)",
                  borderRadius: isActive(n.id) ? "22px" : 0,
                  cursor: "pointer",
                  textAlign: "left",
                  padding: isActive(n.id) ? "18px 20px" : "18px 0",
                  fontFamily: "var(--font-display)",
                  fontSize: "22px",
                  color: isActive(n.id) ? "#191107" : "var(--ink)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  marginBottom: "8px",
                  textDecoration: "none",
                }}
              >
                {n.label}
                <span style={{ color: isActive(n.id) ? "#191107" : "var(--accent)", fontSize: "16px" }}>→</span>
              </a>
            ))}
          </nav>

          <div aria-label="Language" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "8px", marginTop: "24px", marginBottom: "24px" }}>
            {languageOptions.map((l) => (
              <React.Fragment key={l.id}>
                <button
                  onClick={() => onLang && onLang(l.id)}
                  title={l.title}
                  aria-pressed={lang === l.id}
                  style={{
                    background: lang === l.id ? "var(--accent)" : "rgba(201,162,39,0.08)",
                    border: lang === l.id ? "1px solid var(--accent)" : "1px solid rgba(201,162,39,0.22)",
                    borderRadius: "999px",
                    cursor: "pointer",
                    padding: "12px 10px",
                    minHeight: "44px",
                    fontFamily: "var(--font-body)",
                    fontSize: l.id === "en" ? "13px" : "14px",
                    letterSpacing: "0.04em",
                    color: lang === l.id ? "#191107" : "var(--ink)",
                  }}
                >
                  {l.short}
                </button>
              </React.Fragment>
            ))}
          </div>

          <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
            <button
              onClick={() => go("contact")}
              style={{ flex: "1 1 auto", backgroundColor: page === "contact" ? "var(--accent)" : "transparent", color: "var(--ink)", border: "1px solid var(--accent)", padding: "15px 22px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "14px", letterSpacing: "0.04em", cursor: "pointer" }}
            >
              {t.nav.contact}
            </button>
            <button
              onClick={() => go("donate")}
              style={{ flex: "1 1 auto", backgroundColor: "var(--accent)", color: "#191107", border: "1px solid var(--accent)", padding: "15px 22px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "14px", letterSpacing: "0.04em", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }}
            >
              <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "#191107" }} />
              {t.nav.donate}
            </button>
          </div>
        </div>
        </div>
      )}
    </header>
  );
}

// ─── Footer ────────────────────────────────────────────────────────
function Footer({ t, setPage }) {
  const f = t.footer;
  const lang = t.locale;
  return (
    <footer style={{ backgroundColor: "var(--ink)", color: "var(--bg)", marginTop: "120px", paddingTop: "80px", paddingBottom: "32px" }}>
      <div className="wn-container">
        <div className="wn-r-footer" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: "48px", paddingBottom: "64px", borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: "14px", marginBottom: "20px" }}>
              <LotusMark size={46} color="var(--accent)" />
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "22px" }}>{t.siteName}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.6 }}>
                  {t.siteTagline}
                </div>
              </div>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.7, opacity: 0.78, maxWidth: "360px", marginBottom: "16px" }}>{f.tagline}</p>
            <address style={{ fontStyle: "normal", fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.65, opacity: 0.72, marginBottom: "20px" }}>
              Trondheimsvegen 582<br />2016 Frogner, Norway<br />
              <a href="tel:+4763820103" style={{ color: "inherit", textDecoration: "none" }}>+47 63 82 01 03</a><br />
              <a href="mailto:info@watthainorway.com" style={{ color: "inherit", textDecoration: "none" }}>info@watthainorway.com</a>
            </address>
            <div style={{ marginTop: "32px" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.5, marginBottom: "12px" }}>
                {f.follow}
              </div>
              <div style={{ display: "flex", gap: "10px" }}>
                {[
                  { id: "f", label: "Facebook", href: "https://www.facebook.com/watthainorway" },
                  { id: "▶", label: "YouTube", href: "https://www.youtube.com/@watthainorway" },
                  { id: "@", label: lang === "th" ? "อีเมล" : lang === "no" ? "E-post" : "Email", href: "mailto:info@watthainorway.com" },
                  { id: "↗", label: "watthainorway.com", href: "https://watthainorway.com" },
                ].map((s) => (
                  <a key={s.id} href={s.href} target="_blank" rel="noopener noreferrer" title={s.label} style={{ width: "36px", height: "36px", borderRadius: "999px", border: "1px solid rgba(255,255,255,0.2)", display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none", color: "var(--bg)", fontSize: "14px", letterSpacing: "0.05em" }}>
                    {s.id}
                  </a>
                ))}
              </div>
            </div>
          </div>

          {[
            { title: f.sections.visit, links: [
              { label: f.links.directions, page: "contact" },
              { label: f.links.hours, page: "contact" },
              { label: f.links.contact, page: "contact" },
            ] },
            { title: f.sections.community, links: [
              { label: f.links.events, page: "events" },
              { label: f.links.gallery, page: "gallery" },
              { label: f.links.calendar, page: "calendar" },
              { label: f.links.dhamma, page: "dailyDhamma" },
              { label: f.links.people, page: "people" },
              { label: f.links.bergen, page: "bergen" },
            ] },
            { title: f.sections.support, links: [
              { label: f.links.donate, page: "donate" },
              { label: f.links.volunteer, page: "eventDetail", slug: "volunteer-activities" },
              { label: f.links.newsletter, href: "mailto:info@watthainorway.com?subject=" + encodeURIComponent(lang === "th" ? "สมัครรับจดหมายข่าววัดไทยนอร์เวย์" : lang === "no" ? "Nyhetsbrev fra Wat Thai Norge" : "Wat Thai Norway newsletter signup") },
              { label: f.links.contact, page: "contact" },
            ] },
          ].map((col) => (
            <div key={col.title}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.5, marginBottom: "18px" }}>
                {col.title}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "10px" }}>
                {col.links.map((l) => {
                  const linkStyle = { color: "var(--bg)", opacity: 0.8, textDecoration: "none", fontFamily: "var(--font-body)", fontSize: "14px", background: "none", border: "none", cursor: "pointer", padding: 0, textAlign: "left" };
                  if (l.href) {
                    return (
                      <li key={l.label}>
                        <a href={l.href} style={linkStyle}>{l.label}</a>
                      </li>
                    );
                  }
                  const href = window.TempleEventsData
                    ? window.TempleEventsData.pageHref(l.page, l.slug)
                    : (l.page === "eventDetail" && l.slug ? "/events/" + l.slug : "/" + (l.page === "home" ? "" : l.page));
                  return (
                    <li key={l.label}>
                      <a
                        href={href}
                        onClick={function (e) {
                          e.preventDefault();
                          if (l.page === "eventDetail" && l.slug) setPage("eventDetail", { slug: l.slug });
                          else setPage(l.page);
                        }}
                        style={linkStyle}
                      >
                        {l.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>

        <div className="wn-wrap" style={{ paddingTop: "32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px", fontFamily: "var(--font-body)", fontSize: "12px", opacity: 0.6 }}>
          <div>{f.copyright}</div>
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--accent)" }} />
            Trondheimsvegen 582 · 2016 Frogner
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Page heading (used by inner pages) ────────────────────────────
function PageHeading({ eyebrow, title, intro }) {
  return (
    <div style={{ paddingTop: "80px", paddingBottom: "48px" }}>
      <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "20px", display: "flex", alignItems: "center", gap: "12px" }}>
        <span style={{ width: "32px", height: "1px", background: "var(--accent)" }} />
        {eyebrow}
      </div>
      <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5.5vw, 72px)", fontWeight: 400, lineHeight: 1.05, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0, maxWidth: "920px" }}>
        {title}
      </h1>
      {intro && (
        <p style={{ fontFamily: "var(--font-body)", fontSize: "18px", lineHeight: 1.6, color: "var(--muted)", marginTop: "28px", maxWidth: "640px" }}>
          {intro}
        </p>
      )}
    </div>
  );
}

// ─── Eyebrow tag ───────────────────────────────────────────────────
function Eyebrow({ children }) {
  return (
    <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "16px", display: "flex", alignItems: "center", gap: "12px" }}>
      <span style={{ width: "28px", height: "1px", background: "var(--accent)" }} />
      {children}
    </div>
  );
}

// ─── Section title ─────────────────────────────────────────────────
function SectionTitle({ children, align = "left", size = "md", style = {} }) {
  const sizes = {
    sm: "clamp(28px, 3vw, 36px)",
    md: "clamp(32px, 4vw, 48px)",
    lg: "clamp(40px, 5vw, 64px)",
  };
  return (
    <h2 style={{ fontFamily: "var(--font-display)", fontSize: sizes[size], fontWeight: 400, lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0, textAlign: align, ...style }}>
      {children}
    </h2>
  );
}

Object.assign(window, {
  ImagePlaceholder,
  Ornament,
  LotusMark,
  MoonIcon,
  BtnPrimary,
  BtnSecondary,
  BtnGhost,
  BtnLight,
  Header,
  Footer,
  PageHeading,
  Eyebrow,
  SectionTitle,
});