/* Folclore landing — components.
   Forked from the brand website UI kit, recomposed as a single scrolling page:
   Nav (+ language switcher) · Hero · Mission · Contact/Footer. */

const { useState, useEffect, useRef, useCallback } = React;

const INDEX_URL = "index.html";
const TEAM_URL = "Team%20Page.html";

/* ---------- Reveal Animation Wrapper ---------- */
function Reveal({ children, delay = 0, style = {}, as: Component = "div", className = "" }) {
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  // Check if reduced motion is preferred to disable animation
  const prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  return (
    <Component
      ref={ref}
      className={className}
      style={{
        ...style,
        opacity: prefersReducedMotion || visible ? 1 : 0,
        transform: prefersReducedMotion || visible ? "none" : "translateY(24px)",
        transition: prefersReducedMotion ? "none" : `opacity 1s var(--ease-silk) ${delay}ms, transform 1s var(--ease-silk) ${delay}ms`
      }}
    >
      {children}
    </Component>
  );
}

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, color = "var(--fg-gold)", style }) {
  return (
    <span style={{
      fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 500,
      letterSpacing: "0.22em", textTransform: "uppercase", color, ...style,
    }}>{children}</span>
  );
}

/* ---------- Language switcher ---------- */
function LangSwitcher({ lang, setLang, scrolled }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const iconColor = scrolled ? "var(--fg2)" : "rgba(251,249,246,0.65)";
  const iconActiveColor = scrolled ? "var(--fg1)" : "var(--alabaster)";
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        aria-label="Change language"
        style={{
          background: "transparent", border: "none", padding: "4px",
          cursor: "pointer", color: open ? iconActiveColor : iconColor,
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "color var(--dur-base) var(--ease-silk)",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.color = iconActiveColor; }}
        onMouseLeave={(e) => { if (!open) e.currentTarget.style.color = iconColor; }}
      >
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="2" y1="12" x2="22" y2="12"></line>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
        </svg>
      </button>
      <div style={{
        position: "absolute", top: "calc(100% + 10px)", right: 0, minWidth: 152,
        background: "var(--alabaster-pure)", border: "1px solid var(--surface-line)",
        borderRadius: "var(--r-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden",
        opacity: open ? 1 : 0, transform: open ? "none" : "translateY(-6px)",
        pointerEvents: open ? "auto" : "none",
        transition: "opacity var(--dur-base) var(--ease-silk), transform var(--dur-base) var(--ease-silk)",
        zIndex: 60,
      }}>
        <div style={{ height: 2, background: "var(--gold-500)" }}></div>
        {LANG_ORDER.map((code) => {
          const active = code === lang;
          return (
            <button key={code}
              onClick={() => { setLang(code); setOpen(false); }}
              style={{
                width: "100%", textAlign: "left",
                background: active ? "var(--gold-tint)" : "transparent",
                border: "none", cursor: "pointer", padding: "11px 16px",
                transition: "background var(--dur-fast) var(--ease-silk)",
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--silk-100)"; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
            >
              <span style={{
                fontFamily: "var(--font-serif)", fontSize: "0.9375rem",
                color: active ? "var(--gold-700)" : "var(--fg1)",
                transition: "color var(--dur-fast) var(--ease-silk)",
              }}>{I18N[code].name}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- Hamburger ("More") — discreet menu for nav links ---------- */
function Hamburger({ t, scrolled, go, page = "home", isMobile }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const line = scrolled ? "var(--fg1)" : "var(--alabaster)";
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        aria-label={t.nav.more}
        onClick={() => setOpen((o) => !o)}
        style={{
          background: "transparent", border: "none", cursor: "pointer", padding: 6,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>
        <span style={{ position: "relative", display: "block", width: 22, height: 14 }}>
          {/* Top bar */}
          <span style={{
            position: "absolute", left: 0, width: 22, height: 1, background: line,
            top: open ? "50%" : 0,
            transform: open ? "translateY(-50%) rotate(45deg)" : "none",
            transition: "top 240ms var(--ease-silk), transform 240ms var(--ease-silk) 60ms",
          }}></span>
          {/* Bottom bar */}
          <span style={{
            position: "absolute", left: 0, width: 22, height: 1, background: line,
            top: open ? "50%" : "100%",
            transform: open ? "translateY(-50%) rotate(-45deg)" : "translateY(-100%)",
            transition: "top 240ms var(--ease-silk), transform 240ms var(--ease-silk) 60ms",
          }}></span>
        </span>
      </button>
      <div style={{
        position: "absolute", top: "calc(100% + 12px)", right: 0, minWidth: 196,
        background: "var(--alabaster-pure)", border: "1px solid var(--surface-line)",
        borderRadius: "var(--r-sm)", boxShadow: "var(--shadow-md)", overflow: "hidden",
        opacity: open ? 1 : 0, transform: open ? "none" : "translateY(-6px)",
        pointerEvents: open ? "auto" : "none",
        transition: "opacity var(--dur-base) var(--ease-silk), transform var(--dur-base) var(--ease-silk)",
        zIndex: 60,
      }}>
        <div style={{ height: 2, background: "var(--gold-500)" }}></div>
        <div style={{ padding: "14px 16px 6px" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.65625rem", fontWeight: 500, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--fg3)" }}>{t.nav.more}</span>
        </div>
        {isMobile && (
          <button type="button" onClick={() => { setOpen(false); page === "home" && go ? go("mission") : (window.location.href = INDEX_URL + "#mission"); }}
            style={{ ...menuItemStyle, width: "100%", background: "transparent", border: "none", cursor: "pointer" }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--silk-100)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
            <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.0625rem", color: "var(--fg1)" }}>{t.nav.mission}</span>
            <i data-lucide="arrow-down" style={{ width: 15, height: 15, color: "var(--fg3)" }}></i>
          </button>
        )}
        {isMobile && (
          <button type="button" onClick={() => { setOpen(false); page === "home" && go ? go("contact") : (window.location.href = INDEX_URL + "#contact"); }}
            style={{ ...menuItemStyle, width: "100%", background: "transparent", border: "none", borderTop: "1px solid var(--surface-line)", cursor: "pointer" }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--silk-100)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
            <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.0625rem", color: "var(--fg1)" }}>{t.nav.contact}</span>
            <i data-lucide="arrow-down" style={{ width: 15, height: 15, color: "var(--fg3)" }}></i>
          </button>
        )}
        <a href={TEAM_URL} style={{ ...menuItemStyle, borderTop: isMobile ? "1px solid var(--surface-line)" : "none" }}
          onMouseEnter={(e) => (e.currentTarget.style.background = "var(--silk-100)")}
          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
          <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.0625rem", color: "var(--fg1)" }}>{t.nav.team}</span>
          <i data-lucide="arrow-right" style={{ width: 15, height: 15, color: "var(--fg3)" }}></i>
        </a>
        <a href={PODCAST_URL} target="_blank" rel="noopener" style={{ ...menuItemStyle, borderTop: "1px solid var(--surface-line)" }}
          onMouseEnter={(e) => (e.currentTarget.style.background = "var(--silk-100)")}
          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
          <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.0625rem", color: "var(--fg1)" }}>{t.nav.podcast}</span>
          <i data-lucide="arrow-up-right" style={{ width: 15, height: 15, color: "var(--fg3)" }}></i>
        </a>
        <a href={LOGIN_URL} style={{ ...menuItemStyle, borderTop: "1px solid var(--surface-line)" }}
          onMouseEnter={(e) => (e.currentTarget.style.background = "var(--silk-100)")}
          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
          <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.0625rem", color: "var(--fg1)" }}>{t.nav.login}</span>
          <i data-lucide="lock" style={{ width: 15, height: 15, color: "var(--fg3)" }}></i>
        </a>
      </div>
    </div>
  );
}
const menuItemStyle = {
  display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18,
  padding: "12px 16px", textDecoration: "none",
  transition: "background var(--dur-fast) var(--ease-silk)",
};
const footerLinkStyle = {
  fontFamily: "var(--font-sans)", fontSize: "0.6875rem", fontWeight: 500,
  letterSpacing: "0.12em", textTransform: "uppercase", textDecoration: "none",
  color: "rgba(251,249,246,0.75)",
  borderBottom: "1px solid transparent", paddingBottom: 1,
  transition: "color var(--dur-base) var(--ease-silk), border-color var(--dur-base) var(--ease-silk)",
};

/* ---------- Nav ---------- */
function Nav({ scrolled, lang, setLang, t, go, page = "home" }) {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 600);
  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 600);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  const linkColor = scrolled ? "var(--fg1)" : "var(--alabaster)";
  const navTo = (id) => {
    if (page === "home") { go(id); } else { window.location.href = INDEX_URL + "#" + id; }
  };
  const linkStyle = {
    fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 500,
    letterSpacing: "0.14em", textTransform: "uppercase", textDecoration: "none",
    color: linkColor, cursor: "pointer", display: "inline-block",
    transition: "color var(--dur-base) var(--ease-silk), transform var(--dur-fast) var(--ease-silk)",
  };
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: scrolled ? "13px clamp(20px, 5vw, 48px)" : "22px clamp(20px, 5vw, 48px)",
      background: scrolled ? "rgba(251,249,246,0.9)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: "1px solid " + (scrolled ? "var(--surface-line)" : "transparent"),
      boxShadow: scrolled ? "0 4px 24px rgba(0,0,0,0.04)" : "none",
      transition: "all var(--dur-slow) var(--ease-silk)",
    }}>
      <div
        onClick={() => (page === "home" ? go("top") : (window.location.href = INDEX_URL))}
        style={{ display: "flex", alignItems: "center", cursor: "pointer", transition: "transform var(--dur-base) var(--ease-silk)" }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = "scale(1.02)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = "scale(1)"; }}
      >
        <img
          src={scrolled ? "assets/logo-lockup-emerald.png" : "assets/logo-lockup-alabaster.png"}
          alt="Folclore Capital Partners"
          style={{ height: scrolled ? "clamp(38px, 4.8vw, 48px)" : "clamp(44px, 5.4vw, 56px)", transition: "height var(--dur-slow) var(--ease-silk)" }} />
      </div>
      <nav style={{ display: "flex", alignItems: "center", gap: "clamp(16px, 2.6vw, 30px)" }}>
        {!isMobile && <a style={linkStyle} onClick={() => navTo("mission")}
          onMouseEnter={(e) => { e.target.style.color = "var(--gold-500)"; e.target.style.transform = "translateY(-1px)"; }}
          onMouseLeave={(e) => { e.target.style.color = linkColor; e.target.style.transform = "none"; }}>{t.nav.mission}</a>}
        {!isMobile && <a style={linkStyle} onClick={() => navTo("contact")}
          onMouseEnter={(e) => { e.target.style.color = "var(--gold-500)"; e.target.style.transform = "translateY(-1px)"; }}
          onMouseLeave={(e) => { e.target.style.color = linkColor; e.target.style.transform = "none"; }}>{t.nav.contact}</a>}
        <LangSwitcher lang={lang} setLang={setLang} scrolled={scrolled} />
        <Hamburger t={t} scrolled={scrolled} go={go} page={page} isMobile={isMobile} />
      </nav>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ t, theme, align, watermark, go }) {
  const centered = align === "center";
  const [offsetY, setOffsetY] = useState(0);
  
  useEffect(() => {
    const handleScroll = () => setOffsetY(window.scrollY * 0.15);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <section id="top" style={{
      position: "relative", minHeight: "100vh", background: "var(--" + theme + ")",
      display: "flex", flexDirection: "column", justifyContent: "center",
      alignItems: centered ? "center" : "flex-start",
      textAlign: centered ? "center" : "left",
      padding: "0 clamp(28px, 9vw, 160px)", overflow: "hidden",
    }}>
      {watermark && (
        <img src="assets/logo-mark-alabaster.png" alt="" className="hero-watermark" style={{
          position: "absolute", right: centered ? "50%" : "-3%", top: "50%",
          transform: centered ? `translate(50%, calc(-50% + ${offsetY}px))` : `translateY(calc(-50% + ${offsetY}px))`,
          height: "94%", opacity: centered ? 0.04 : 0.06, pointerEvents: "none",
          transition: "transform 0.1s linear"
        }} />
      )}
      <div style={{ position: "relative", maxWidth: 1000, display: "flex", flexDirection: "column", alignItems: centered ? "center" : "flex-start" }}>
        <Reveal delay={0} style={{ marginBottom: 32 }}>
          <Eyebrow color="var(--gold-400)">{t.hero.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal as="h1" delay={150} style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(2.6rem, 7.04vw, 6rem)", lineHeight: 1.0,
          letterSpacing: "-0.015em", color: "var(--alabaster)", margin: 0,
          maxWidth: "15ch"
        }}>{t.hero.headline}</Reveal>
        <Reveal delay={300} style={{ marginTop: 46 }}>
          <a onClick={() => go("mission")} style={{
            fontFamily: "var(--font-sans)", fontSize: "0.8125rem", fontWeight: 500,
            letterSpacing: "0.16em", textTransform: "uppercase", textDecoration: "none",
            color: "var(--gold-400)", display: "inline-flex", alignItems: "center", gap: 11,
            paddingBottom: 6, borderBottom: "1px solid rgba(197,160,89,0.4)", cursor: "pointer",
            transition: "border-color var(--dur-base) var(--ease-silk), color var(--dur-base) var(--ease-silk), transform var(--dur-fast) var(--ease-silk)",
          }}
            onMouseEnter={(e) => { 
              e.currentTarget.style.borderBottomColor = "var(--gold-400)"; 
              e.currentTarget.style.color = "var(--gold-200)"; 
              e.currentTarget.style.transform = "translateY(2px)";
              const icon = e.currentTarget.querySelector('i');
              if (icon) icon.style.transform = "translateY(2px)";
            }}
            onMouseLeave={(e) => { 
              e.currentTarget.style.borderBottomColor = "rgba(197,160,89,0.4)"; 
              e.currentTarget.style.color = "var(--gold-400)"; 
              e.currentTarget.style.transform = "none";
              const icon = e.currentTarget.querySelector('i');
              if (icon) icon.style.transform = "none";
            }}
          >{t.hero.cta}<i data-lucide="arrow-down" style={{ width: 15, height: 15, transition: "transform var(--dur-base) var(--ease-silk)" }}></i></a>
        </Reveal>
      </div>
      <Reveal delay={450} style={{
        position: "absolute", bottom: 34, left: centered ? "50%" : "clamp(28px, 9vw, 160px)",
        transform: centered ? "translateX(-50%)" : "none",
        display: "flex", alignItems: "center", gap: 14,
      }}>
        <span style={{ width: 40, height: 1, background: "var(--gold-500)" }}></span>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.6875rem", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-on-dark-2)" }}>{t.hero.footnote}</span>
      </Reveal>
    </section>
  );
}

/* ---------- Mission ---------- */
function Mission({ t, theme, dark }) {
  const bg = dark ? "var(--" + theme + ")" : "var(--alabaster)";
  const eyebrowColor = "var(--gold-500)";
  const textColor = dark ? "var(--fg-on-dark-1)" : "var(--fg1)";
  const bodyColor = dark ? "var(--fg-on-dark-2)" : "var(--fg2)";
  const rule = dark ? "var(--emerald-600)" : "var(--surface-line)";
  return (
    <section id="mission" style={{ background: bg, padding: "clamp(96px, 16vh, 190px) clamp(28px, 9vw, 160px)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <Reveal style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: "clamp(40px, 6vh, 64px)" }}>
          <Eyebrow color={dark ? "var(--gold-400)" : eyebrowColor}>{t.mission.eyebrow}</Eyebrow>
          <span style={{ flex: 1, height: 1, background: rule }}></span>
        </Reveal>
        <div className="mission-grid" style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, 0.85fr)",
          gap: "clamp(40px, 6vw, 88px)", alignItems: "start",
        }}>
          <div style={{ maxWidth: "54ch", display: "flex", flexDirection: "column", gap: "1.4em" }}>
            {t.mission.body.map((para, i) => (
              <Reveal as="p" key={i} delay={i * 150} style={{
                fontFamily: "var(--font-serif)", fontWeight: 400, margin: 0,
                fontSize: i === 0 ? "clamp(1.4rem, 2.53vw, 1.95rem)" : "clamp(1.12rem, 1.65vw, 1.3rem)",
                lineHeight: i === 0 ? 1.42 : 1.62,
                color: i === 0 ? textColor : bodyColor,
                textWrap: "pretty",
              }}>{para}</Reveal>
            ))}
          </div>
          <Reveal as="figure" delay={200} className="mission-figure" style={{ margin: 0 }}>
            <img src="assets/mission-horizonte.jpg" alt="An archway opening onto a gold horizon, with a path leading toward it"
              style={{ display: "block", width: "100%", height: "auto" }} />
            <figcaption style={{
              display: "flex", alignItems: "center", gap: 12, marginTop: 18,
            }}>
              <span style={{ width: 28, height: 1, background: "var(--gold-500)", flexShrink: 0 }}></span>
              <span style={{
                fontFamily: "var(--font-italic)", fontStyle: "italic",
                fontSize: "clamp(0.95rem, 1.32vw, 1.1rem)",
                color: dark ? "var(--fg-on-dark-2)" : "var(--fg2)", lineHeight: 1.4,
              }}>{t.mission.caption}</span>
            </figcaption>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact / Footer ---------- */
function FooterLinks({ t }) {
  const links = [
    { key: "terms", href: TERMS_URL, label: t.footer.terms },
    { key: "login", href: LOGIN_URL, label: t.nav.login },
  ];
  return (
    <nav className="footer-links" aria-label="Legal and portal" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0 }}>
      {links.map((link, i) => (
        <React.Fragment key={link.key}>
          {i > 0 && (
            <span aria-hidden="true" style={{ fontFamily: "var(--font-sans)", fontSize: "0.6875rem", color: "var(--fg-on-dark-2)", opacity: 0.45, margin: "0 10px" }}>·</span>
          )}
          <a href={link.href} className="footer-link" style={footerLinkStyle}
            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--gold-400)"; e.currentTarget.style.borderBottomColor = "var(--gold-400)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(251,249,246,0.75)"; e.currentTarget.style.borderBottomColor = "transparent"; }}
          >{link.label}</a>
        </React.Fragment>
      ))}
    </nav>
  );
}

function ContactFooter({ t, theme }) {
  const padX = "clamp(28px, 9vw, 160px)";
  return (
    <footer id="contact" style={{
      width: "100%", boxSizing: "border-box",
      background: "var(--" + theme + ")",
      padding: "clamp(90px, 14vh, 170px) 0 0",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: `0 ${padX}` }}>
        <Reveal delay={0}>
          <Eyebrow color="var(--gold-400)">{t.contact.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal as="h2" delay={100} style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(2.4rem, 5.5vw, 4.25rem)", lineHeight: 1.02,
          letterSpacing: "-0.015em", color: "var(--alabaster)", margin: "20px 0 36px",
        }}>{t.contact.heading}</Reveal>
        <Reveal delay={200}>
          <a href="mailto:hello@folclore.capital" className="contact-email" style={{
            fontFamily: "var(--font-serif)", fontWeight: 400,
            fontSize: "clamp(1.5rem, 3.3vw, 2.5rem)", color: "var(--gold-400)",
            textDecoration: "none", display: "inline-block",
            borderBottom: "1px solid rgba(197,160,89,0.4)", paddingBottom: 5,
            transition: "border-color var(--dur-base) var(--ease-silk), color var(--dur-base) var(--ease-silk), transform var(--dur-fast) var(--ease-silk)",
          }}
            onMouseEnter={(e) => { e.currentTarget.style.borderBottomColor = "var(--gold-400)"; e.currentTarget.style.color = "var(--gold-200)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderBottomColor = "rgba(197,160,89,0.4)"; e.currentTarget.style.color = "var(--gold-400)"; e.currentTarget.style.transform = "none"; }}
          >hello@folclore.capital</a>
        </Reveal>
        <Reveal as="p" delay={300} style={{
          fontFamily: "var(--font-sans)", fontSize: "0.8125rem", fontWeight: 400,
          letterSpacing: "0.04em", color: "var(--fg-on-dark-2)", margin: "26px 0 0", maxWidth: "44ch",
          lineHeight: 1.6,
        }}>{t.contact.note}</Reveal>
      </div>

      <Reveal delay={400} className="footer-bar" style={{
        width: "100%", boxSizing: "border-box",
        marginTop: "clamp(64px, 10vh, 120px)",
        borderTop: "1px solid var(--emerald-600)",
        padding: `28px ${padX} 40px`,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        flexWrap: "wrap", gap: 20,
      }}>
        <img src="assets/logo-mark-gold.png" alt="Folclore" style={{ height: 44, flexShrink: 0 }} />
        <div className="footer-meta" style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10, textAlign: "right", flex: "1 1 240px" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.6875rem", fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--fg-on-dark-2)" }}>{t.contact.offices}</span>
          <FooterLinks t={t} />
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.6875rem", letterSpacing: "0.1em", color: "var(--fg-on-dark-2)", opacity: 0.7 }}>{t.rights}</span>
        </div>
      </Reveal>
    </footer>
  );
}

/* ---------- Team page: header ---------- */
function TeamHeader({ t, theme }) {
  return (
    <section id="top" style={{
      position: "relative", background: "var(--" + theme + ")",
      padding: "clamp(150px, 24vh, 260px) clamp(28px, 9vw, 160px) clamp(72px, 12vh, 120px)",
      overflow: "hidden",
    }}>
      <img src="assets/logo-mark-alabaster.png" alt="" style={{
        position: "absolute", right: "-3%", top: "50%", transform: "translateY(-50%)",
        height: "118%", opacity: 0.05, pointerEvents: "none",
      }} />
      <div style={{ position: "relative", maxWidth: 1000 }}>
        <Reveal delay={0} style={{ marginBottom: 30 }}>
          <Eyebrow color="var(--gold-400)">{t.team.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal as="h1" delay={150} style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(2.4rem, 5.94vw, 4.75rem)", lineHeight: 1.02,
          letterSpacing: "-0.015em", color: "var(--alabaster)", margin: 0, maxWidth: "16ch",
        }}>{t.team.heading}</Reveal>
        <Reveal as="p" delay={300} style={{
          fontFamily: "var(--font-serif)", fontWeight: 400,
          fontSize: "clamp(1.15rem, 1.87vw, 1.45rem)", lineHeight: 1.55,
          color: "var(--fg-on-dark-2)", margin: "30px 0 0", maxWidth: "46ch",
          textWrap: "pretty",
        }}>{t.team.standfirst}</Reveal>
      </div>
    </section>
  );
}

/* ---------- Team page: names, roles, biography files, and LinkedIn. Full biographies stay in the data room. ---------- */
function TeamLink({ href, children }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{
      fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 500,
      letterSpacing: "0.08em", textTransform: "uppercase",
      color: "var(--emerald-700)", textDecoration: "none",
      borderBottom: "1px solid var(--gold-500)", paddingBottom: 1,
      transition: "color var(--dur-base) var(--ease-silk), border-color var(--dur-base) var(--ease-silk)",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.color = "var(--emerald-500)"; e.currentTarget.style.borderBottomColor = "var(--emerald-500)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.color = "var(--emerald-700)"; e.currentTarget.style.borderBottomColor = "var(--gold-500)"; }}
    >{children}</a>
  );
}

function TeamRoster({ people, t, start }) {
  return (
    <ul style={{ listStyle: "none", margin: 0, padding: 0, borderTop: "1px solid var(--surface-line)" }}>
      {people.map((m, i) => (
          <Reveal as="li" key={m.name} delay={(start + i) * 80} className="team-card" style={{
            padding: "clamp(28px, 4vh, 40px) 2px",
            borderBottom: "1px solid var(--surface-line)",
          }}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 400,
              fontSize: "clamp(2rem, 3.6vw, 3rem)", lineHeight: 1.02,
              letterSpacing: "-0.015em", color: "var(--fg1)", margin: 0,
            }}>{m.name}</h2>
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 500,
              letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg2)",
              margin: "14px 0 0",
            }}>{m.role}<span style={{ color: "var(--fg3)", fontWeight: 500 }}> · {m.place}</span></p>
            {(m.bio || m.linkedin) && (
              <p style={{ margin: "16px 0 0", display: "flex", flexWrap: "wrap", gap: "8px 22px" }}>
                {m.bio && <TeamLink href={m.bio}>{t.team.bioDownload || "Download biography"}</TeamLink>}
                {m.linkedin && <TeamLink href={m.linkedin}>LinkedIn</TeamLink>}
              </p>
            )}
          </Reveal>
      ))}
    </ul>
  );
}

function TeamList({ t }) {
  const members = (t.team && t.team.members) || [];
  const advisors = (t.team && t.team.advisors) || [];
  return (
    <section style={{ background: "var(--alabaster)", padding: "clamp(64px, 10vh, 120px) clamp(28px, 9vw, 160px)" }}>
      <div style={{ maxWidth: 880 }}>
        <TeamRoster people={members} t={t} start={0} />
        {advisors.length > 0 && (
          <React.Fragment>
            <h2 style={{
              fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 500,
              letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--emerald-700)",
              margin: "clamp(56px, 8vh, 88px) 0 18px",
            }}>{t.team.advisorsLabel || "Advisors"}</h2>
            <TeamRoster people={advisors} t={t} start={members.length} />
          </React.Fragment>
        )}
        <Reveal as="p" delay={(members.length + advisors.length) * 100} style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(1.05rem, 1.54vw, 1.25rem)",
          lineHeight: 1.6, color: "var(--fg2)", margin: "clamp(48px, 7vh, 80px) 0 0", maxWidth: "52ch",
        }}>
          {t.team.closing}{" "}
          <a href={INDEX_URL + "#contact"} style={{
            color: "var(--emerald-700)", textDecoration: "none",
            borderBottom: "1px solid var(--gold-500)", paddingBottom: 1,
            transition: "color var(--dur-base) var(--ease-silk), border-color var(--dur-base) var(--ease-silk)",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.color = "var(--emerald-500)"; e.currentTarget.style.borderBottomColor = "var(--emerald-500)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = "var(--emerald-700)"; e.currentTarget.style.borderBottomColor = "var(--gold-500)"; }}
          >{t.team.closingLink}</a>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Legal page ---------- */
function LegalPage({ t, content, theme }) {
  return (
    <section style={{
      background: "var(--alabaster)", padding: "clamp(150px, 22vh, 220px) clamp(28px, 9vw, 160px) clamp(80px, 12vh, 140px)",
    }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <Reveal delay={0}>
          <Eyebrow color="var(--gold-500)">{content.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal as="h1" delay={100} style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(2.2rem, 5.28vw, 3.5rem)", lineHeight: 1.05,
          letterSpacing: "-0.015em", color: "var(--fg1)", margin: "18px 0 10px",
        }}>{content.title}</Reveal>
        <Reveal as="p" delay={200} style={{
          fontFamily: "var(--font-sans)", fontSize: "0.75rem", letterSpacing: "0.08em",
          textTransform: "uppercase", color: "var(--fg3)", margin: "0 0 20px",
        }}>{content.updated}</Reveal>
        <Reveal as="p" delay={300} style={{
          fontFamily: "var(--font-sans)", fontSize: "0.875rem", lineHeight: 1.6,
          color: "var(--fg2)", margin: "0 0 clamp(40px, 6vh, 64px)",
          padding: "16px 18px", background: "var(--silk-100)", borderLeft: "3px solid var(--gold-500)",
        }}>{content.placeholder}</Reveal>
        <div style={{ display: "flex", flexDirection: "column", gap: "clamp(28px, 4vh, 40px)" }}>
          {content.sections.map((s, i) => {
            const paragraphs = Array.isArray(s.body) ? s.body : [s.body];
            return (
              <Reveal key={s.heading} delay={Math.min(360 + i * 30, 640)}>
                <h2 style={{
                  fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 600,
                  letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--emerald-700)",
                  margin: "0 0 12px",
                }}>{s.heading}</h2>
                {paragraphs.map((para, j) => (
                  <p key={j} style={{
                    fontFamily: "var(--font-serif)", fontSize: "clamp(1.02rem, 1.43vw, 1.15rem)",
                    lineHeight: 1.65, color: "var(--fg2)", margin: j ? "14px 0 0" : 0, textWrap: "pretty",
                  }}>{para}</p>
                ))}
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Login + data room ---------- */
const FUND_I_CONFIDENTIALITY_KEY = "folclore_fund_i_confidentiality";

function roomFromLocation() {
  const id = (window.location.hash || "").replace(/^#/, "").split("?")[0];
  if (id === "general" || id.startsWith("general/")) return "general";
  if (id === "fund-i" || id.startsWith("fund-i/")) return "fund-i";
  return "";
}

function sessionSignInKey(session) {
  const user = session && session.user;
  if (!(user && user.id)) return "";
  return String(user.id) + "|" + String(user.last_sign_in_at || "");
}

function hasFundIConfidentialityAck(session) {
  try {
    const key = sessionSignInKey(session);
    if (!key) return false;
    return localStorage.getItem(FUND_I_CONFIDENTIALITY_KEY) === key;
  } catch (_) {
    return false;
  }
}

function saveFundIConfidentialityAck(session) {
  try {
    const key = sessionSignInKey(session);
    if (key) localStorage.setItem(FUND_I_CONFIDENTIALITY_KEY, key);
  } catch (_) { /* private mode */ }
}

function FundIConfidentialityGate({ t, onAccept, onDecline }) {
  const [checked, setChecked] = useState(false);
  const C = (t && t.confidentiality) || I18N.en.login.confidentiality;
  const paragraphs = Array.isArray(C.body) ? C.body : [C.body];

  return (
    <section className="dr-portal">
      <div className="dr-portal-inner dr-confidentiality">
        <Eyebrow color="var(--gold-400)">{C.eyebrow}</Eyebrow>
        <h1 className="dr-portal-title">{C.title}</h1>
        <div className="dr-confidentiality-body">
          {paragraphs.map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>
        <p className="dr-confidentiality-terms">
          {C.termsBefore}
          <a href={TERMS_URL} target="_blank" rel="noopener noreferrer">{C.termsLink}</a>
          {C.termsAfter}
        </p>
        <label className="dr-confidentiality-check">
          <input
            type="checkbox"
            checked={checked}
            onChange={(e) => setChecked(e.target.checked)}
          />
          <span>{C.checkbox}</span>
        </label>
        <div className="dr-confidentiality-actions">
          <button
            type="button"
            className="dr-confidentiality-enter"
            disabled={!checked}
            onClick={onAccept}
          >{C.enter}</button>
          <button type="button" className="dr-confidentiality-decline" onClick={onDecline}>
            {C.decline}
          </button>
        </div>
      </div>
    </section>
  );
}

function LoginPage({ t, theme, onAuthChange }) {
  const [phase, setPhase] = useState("loading"); /* loading | form | sent | unauthorized | authed */
  const [room, setRoom] = useState(roomFromLocation);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const [sentEmail, setSentEmail] = useState("");
  const [authSession, setAuthSession] = useState(null);
  const [fundIAcked, setFundIAcked] = useState(false);
  const [fundIAccessLevel, setFundIAccessLevel] = useState(1);
  const dr = t.dataroom || I18N.en.dataroom;
  const L = t.login || I18N.en.login;
  const p = t.portal || I18N.en.portal;

  useEffect(() => {
    const sync = () => setRoom(roomFromLocation());
    window.addEventListener("hashchange", sync);
    return () => window.removeEventListener("hashchange", sync);
  }, []);

  const enterAuthed = useCallback(async (session) => {
    setAuthSession(session || null);
    setFundIAcked(hasFundIConfidentialityAck(session));
    setPhase("authed");
    setError("");
    if (onAuthChange) onAuthChange(true);
    try {
      const level = typeof getFundIAccessLevel === "function"
        ? await getFundIAccessLevel(session)
        : 1;
      setFundIAccessLevel(level);
      if (typeof folcloreIdentify === "function") folcloreIdentify(session, level);
    } catch (_) {
      setFundIAccessLevel(1);
      if (typeof folcloreIdentify === "function") folcloreIdentify(session, 1);
    }
  }, [onAuthChange]);

  const showForm = useCallback((msg) => {
    setAuthSession(null);
    setFundIAcked(false);
    setFundIAccessLevel(1);
    setPhase("form");
    if (msg) setError(msg);
    if (onAuthChange) onAuthChange(false);
  }, [onAuthChange]);

  useEffect(() => {
    let cancelled = false;
    let unsubscribe = null;
    (async () => {
      if (!isSupabaseConfigured() || !folcloreSupabase) {
        showForm("Supabase is not configured. Paste the publishable key into supabase-public.js.");
        return;
      }
      try {
        const session = await getDataRoomSession();
        if (cancelled) return;
        if (!session) {
          showForm();
          return;
        }
        const allowed = await hasActiveLpAccess(session);
        if (cancelled) return;
        if (allowed) enterAuthed(session);
        else {
          await signOutDataRoom();
          setPhase("unauthorized");
          setError(L.unauthorized || I18N.en.login.unauthorized);
          if (typeof folcloreTrack === "function") folcloreTrack("data_room_access_denied", "data room access denied", {}, "warn");
          if (onAuthChange) onAuthChange(false);
        }
      } catch (err) {
        if (!cancelled) showForm(err.message || String(err));
      }
    })();
    if (folcloreSupabase) {
      const { data: sub } = folcloreSupabase.auth.onAuthStateChange(async (event, session) => {
        if (cancelled) return;
        if (event === "SIGNED_OUT") {
          if (typeof _folcloreIdentifiedId !== "undefined" && _folcloreIdentifiedId && typeof folcloreTrack === "function") {
            folcloreTrack("signed_out", "signed out");
          }
          if (typeof folcloreReset === "function") folcloreReset();
          setAuthSession(null);
          setFundIAcked(false);
          setFundIAccessLevel(1);
          setPhase("form");
          if (onAuthChange) onAuthChange(false);
          return;
        }
        if ((event === "SIGNED_IN" || event === "TOKEN_REFRESHED" || event === "INITIAL_SESSION") && session) {
          const allowed = await hasActiveLpAccess(session);
          if (cancelled) return;
          if (allowed) enterAuthed(session);
          else {
            await signOutDataRoom();
            setPhase("unauthorized");
            setError(L.unauthorized || I18N.en.login.unauthorized);
            if (typeof folcloreTrack === "function") folcloreTrack("data_room_access_denied", "data room access denied", {}, "warn");
            if (onAuthChange) onAuthChange(false);
          }
        }
      });
      unsubscribe = () => {
        if (sub && sub.subscription) sub.subscription.unsubscribe();
      };
    }
    return () => {
      cancelled = true;
      if (unsubscribe) unsubscribe();
    };
  }, [enterAuthed, showForm, onAuthChange, L.unauthorized]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const email = e.target.email.value.trim().toLowerCase();
    if (!email) return;
    setBusy(true);
    setError("");
    try {
      const { error: otpError } = await requestDataRoomMagicLink(email);
      if (otpError) throw otpError;
      setSentEmail(email);
      setPhase("sent");
      if (typeof folcloreTrack === "function") folcloreTrack("magic_link_requested", "magic link requested");
    } catch (err) {
      setError(err.message || L.error || I18N.en.login.error);
      setPhase("form");
    } finally {
      setBusy(false);
    }
  };

  const handleLogout = async () => {
    if (window.location.hash) {
      history.replaceState(null, "", window.location.pathname + window.location.search);
    }
    setRoom("");
    setAuthSession(null);
    setFundIAcked(false);
    setFundIAccessLevel(1);
    await signOutDataRoom();
    setPhase("form");
    setError("");
    if (onAuthChange) onAuthChange(false);
  };

  const openRoom = (id) => { window.location.hash = id; };

  const leaveRoom = () => {
    history.pushState(null, "", window.location.pathname + window.location.search);
    setRoom("");
  };

  const acceptFundIConfidentiality = () => {
    saveFundIConfidentialityAck(authSession);
    setFundIAcked(true);
    if (typeof logRoomEvent === "function") logRoomEvent("confidentiality", "fund-i");
  };

  if (phase === "authed") {
    const roomProps = {
      t: { ...t, dataroom: dr, portal: p },
      theme,
      onBack: leaveRoom,
      onLogout: handleLogout,
    };
    if (room === "general") return <GeneralFundRoom {...roomProps} />;
    if (room === "fund-i") {
      if (!fundIAcked) {
        return (
          <FundIConfidentialityGate
            t={L}
            onAccept={acceptFundIConfidentiality}
            onDecline={leaveRoom}
          />
        );
      }
      return (
        <DataRoom
          {...roomProps}
          accessLevel={fundIAccessLevel}
          userEmail={(authSession && authSession.user && authSession.user.email) || ""}
        />
      );
    }
    const choices = [
      { id: "general", eyebrow: p.generalEyebrow, title: p.generalTitle, subtitle: p.generalSubtitle, body: p.generalBody },
      { id: "fund-i", eyebrow: p.fundEyebrow, title: p.fundTitle, body: p.fundBody },
    ];
    return (
      <section className="dr-portal">
        <div className="dr-portal-inner">
          <Eyebrow color="var(--gold-400)">{p.eyebrow}</Eyebrow>
          <h1 className="dr-portal-title">{p.title}</h1>
          <figure className="dr-welcome">
            <figcaption className="dr-welcome-label">{p.welcomeLabel}</figcaption>
            <blockquote className="dr-welcome-body">{p.welcomeBody}</blockquote>
            <p className="dr-welcome-sign">{p.welcomeSign}</p>
          </figure>
          <div className="dr-portal-grid">
            {choices.map((choice) => (
              <button key={choice.id} type="button" className="dr-portal-card" onClick={() => openRoom(choice.id)}>
                <span className="dr-portal-card-eyebrow">{choice.eyebrow}</span>
                <span className="dr-portal-card-title">{choice.title}</span>
                {choice.subtitle && <span className="dr-portal-card-sub">{choice.subtitle}</span>}
                <span className="dr-portal-card-body">{choice.body}</span>
                <span className="dr-portal-card-cta">
                  {p.enter}
                  <span className="dr-portal-card-arrow" aria-hidden="true">→</span>
                </span>
              </button>
            ))}
          </div>
          <button type="button" className="dr-portal-signout" onClick={handleLogout}>{p.signOut}</button>
        </div>
      </section>
    );
  }

  const submitLabel = busy ? (L.sending || I18N.en.login.sending) : (L.submit || I18N.en.login.submit);

  return (
    <section style={{
      minHeight: "100vh", background: "var(--" + theme + ")",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: "clamp(120px, 18vh, 160px) clamp(24px, 6vw, 48px) clamp(60px, 10vh, 100px)",
    }}>
      <Reveal delay={0} style={{
        width: "100%", maxWidth: 420, background: "rgba(251,249,246,0.04)",
        border: "1px solid rgba(197,160,89,0.25)", padding: "clamp(32px, 5vw, 48px)",
        backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
      }}>
        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <Eyebrow color="var(--gold-400)">{L.eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(1.8rem, 4.4vw, 2.4rem)", color: "var(--alabaster)",
            margin: "14px 0 0", lineHeight: 1.1,
          }}>{L.title}</h1>
        </div>

        {phase === "loading" && (
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "0.8125rem", color: "var(--fg-on-dark-2)", textAlign: "center", margin: 0 }}>
            {L.checking || I18N.en.login.checking}
          </p>
        )}

        {phase === "sent" && (
          <div>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: "1rem", color: "var(--alabaster)", lineHeight: 1.55, margin: 0, textAlign: "center" }}>
              {(L.checkEmail || I18N.en.login.checkEmail).replace("{email}", sentEmail)}
            </p>
            <button type="button" onClick={() => { setPhase("form"); setError(""); }} style={{
              width: "100%", marginTop: 28, padding: "14px 20px",
              background: "transparent", border: "1px solid rgba(197,160,89,0.45)", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-400)",
            }}>{L.useDifferentEmail || I18N.en.login.useDifferentEmail}</button>
          </div>
        )}

        {(phase === "form" || phase === "unauthorized") && (
          <form onSubmit={handleSubmit}>
            <label style={loginLabelStyle}>{L.emailLabel || I18N.en.login.emailLabel}</label>
            <input name="email" type="email" required autoComplete="email" placeholder="name@firm.com" style={loginInputStyle} />
            {error && (
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: "0.75rem", color: "#E8A87C",
                margin: "16px 0 0", lineHeight: 1.4,
              }}>{error}</p>
            )}
            <button type="submit" disabled={busy} style={{
              width: "100%", marginTop: 28, padding: "14px 20px",
              background: "var(--gold-500)", border: "none", cursor: busy ? "wait" : "pointer",
              fontFamily: "var(--font-sans)", fontSize: "0.75rem", fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--emerald-900)",
              opacity: busy ? 0.75 : 1,
              transition: "background var(--dur-base) var(--ease-silk), transform var(--dur-fast) var(--ease-silk)",
            }}
              onMouseEnter={(e) => { if (!busy) { e.currentTarget.style.background = "var(--gold-400)"; e.currentTarget.style.transform = "translateY(-1px)"; } }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "var(--gold-500)"; e.currentTarget.style.transform = "none"; }}
              onMouseDown={(e) => { if (!busy) e.currentTarget.style.transform = "translateY(1px)"; }}
              onMouseUp={(e) => { if (!busy) e.currentTarget.style.transform = "translateY(-1px)"; }}
            >{submitLabel}</button>
          </form>
        )}

        <p style={{
          fontFamily: "var(--font-sans)", fontSize: "0.75rem", lineHeight: 1.55,
          color: "var(--fg-on-dark-2)", textAlign: "center", margin: "22px 0 0",
        }}>
          {(L.termsBefore || I18N.en.login.termsBefore)}
          <a href={TERMS_URL} style={{
            color: "var(--gold-400)", textDecoration: "none",
            borderBottom: "1px solid rgba(197,160,89,0.45)",
          }}>{L.termsLink || I18N.en.login.termsLink}</a>
          {(L.termsAfter || I18N.en.login.termsAfter)}
        </p>
        <a href={INDEX_URL} style={{
          display: "block", textAlign: "center", marginTop: 28,
          fontFamily: "var(--font-sans)", fontSize: "0.75rem", letterSpacing: "0.06em",
          color: "var(--fg-on-dark-2)", textDecoration: "none", opacity: 0.7,
          transition: "opacity var(--dur-base) var(--ease-silk), color var(--dur-base) var(--ease-silk)",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.color = "var(--gold-400)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.7"; e.currentTarget.style.color = "var(--fg-on-dark-2)"; }}
        >← {L.back}</a>
      </Reveal>
    </section>
  );
}
const loginLabelStyle = {
  display: "block", fontFamily: "var(--font-sans)", fontSize: "0.6875rem", fontWeight: 500,
  letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-400)", marginBottom: 8,
};
const loginInputStyle = {
  width: "100%", padding: "12px 14px", background: "rgba(251,249,246,0.06)",
  border: "1px solid rgba(197,160,89,0.3)", color: "var(--alabaster)",
  fontFamily: "var(--font-serif)", fontSize: "1rem", outline: "none",
};

Object.assign(window, { Eyebrow, LangSwitcher, Hamburger, Nav, Hero, Mission, ContactFooter, TeamHeader, TeamList, LegalPage, LoginPage });