/* 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 } = 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: 12, 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: 15,
                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: 10.5, 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: 17, 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: 17, 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: 17, 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: 17, 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: 17, 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: 11, 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: 12, 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, 6.4vw, 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: 13, 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: 11, 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.3vw, 1.95rem)" : "clamp(1.12rem, 1.5vw, 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 }}>
            <div style={{ background: dark ? "rgba(251,249,246,0.04)" : "var(--silk-100)", padding: "clamp(18px, 2.4vw, 34px)" }}>
              <img src="assets/mission-illustration.svg" alt="An artisan cradling a heritage vessel"
                style={{ display: "block", width: "100%", height: "auto" }} />
            </div>
            <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.2vw, 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: "privacy", href: PRIVACY_URL, label: t.footer.privacy },
    { 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: 11, 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, 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, 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: 13, 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: 11, 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: 11, 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.4vw, 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.7vw, 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: partner index (hairline rows, no imagery) ---------- */
function TeamList({ t }) {
  return (
    <section style={{ background: "var(--alabaster)", padding: "clamp(80px, 13vh, 150px) clamp(28px, 9vw, 160px)" }}>
      <div style={{ maxWidth: 1100 }}>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, borderTop: "1px solid var(--surface-line)" }}>
          {t.team.members.map((m, i) => (
            <Reveal as="li" key={m.name} delay={i * 100} className="team-row" style={{
              display: "grid", gridTemplateColumns: "1fr auto auto", alignItems: "baseline",
              gap: "clamp(16px, 4vw, 48px)", padding: "clamp(26px, 4vh, 40px) 2px",
              borderBottom: "1px solid var(--surface-line)",
              transition: "background var(--dur-fast) var(--ease-silk), opacity 1s var(--ease-silk) 0ms, transform 1s var(--ease-silk) 0ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--silk-100)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
            >
              <span style={{
                fontFamily: "var(--font-display)", fontWeight: 400,
                fontSize: "clamp(1.7rem, 3.2vw, 2.75rem)", lineHeight: 1, color: "var(--fg1)",
              }}>{m.name}</span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg2)" }}>{m.role}</span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg3)", minWidth: 72, textAlign: "right" }}>{m.place}</span>
            </Reveal>
          ))}
        </ul>
        <Reveal as="p" delay={t.team.members.length * 100} style={{
          fontFamily: "var(--font-serif)", fontSize: "clamp(1.05rem, 1.4vw, 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, 4.8vw, 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: 12, 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: 13, lineHeight: 1.5,
          color: "var(--fg2)", margin: "0 0 clamp(40px, 6vh, 64px)",
          padding: "14px 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) => (
            <Reveal key={s.heading} delay={400 + (i * 100)}>
              <h2 style={{
                fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600,
                letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--emerald-700)",
                margin: "0 0 12px",
              }}>{s.heading}</h2>
              <p style={{
                fontFamily: "var(--font-serif)", fontSize: "clamp(1.05rem, 1.4vw, 1.2rem)",
                lineHeight: 1.65, color: "var(--fg2)", margin: 0, textWrap: "pretty",
              }}>{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Login + data room ---------- */
function LoginPage({ t, theme, onAuthChange }) {
  const [authed, setAuthed] = useState(() => isDataRoomSession());
  const [error, setError] = useState("");
  const dr = t.dataroom || I18N.en.dataroom;

  const handleSubmit = (e) => {
    e.preventDefault();
    const username = e.target.username.value.trim();
    const password = e.target.password.value;
    if (checkDataRoomAuth(username, password)) {
      setDataRoomSession(true);
      setAuthed(true);
      setError("");
      if (onAuthChange) onAuthChange(true);
    } else {
      setError(t.login.error || I18N.en.login.error);
    }
  };

  const handleLogout = () => {
    setDataRoomSession(false);
    setAuthed(false);
    if (onAuthChange) onAuthChange(false);
  };

  if (authed) {
    return <DataRoom t={{ ...t, dataroom: dr }} theme={theme} onLogout={handleLogout} />;
  }

  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)">{t.login.eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(1.8rem, 4vw, 2.4rem)", color: "var(--alabaster)",
            margin: "14px 0 8px", lineHeight: 1.1,
          }}>{t.login.title}</h1>
          <p style={{
            fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--fg-on-dark-2)",
            margin: 0, lineHeight: 1.5,
          }}>{t.login.subtitle}</p>
        </div>
        <form onSubmit={handleSubmit}>
          <label style={loginLabelStyle}>{t.login.usernameLabel || I18N.en.login.usernameLabel}</label>
          <input name="username" type="text" required autoComplete="username" placeholder="admin" style={loginInputStyle} />
          <label style={{ ...loginLabelStyle, marginTop: 20 }}>{t.login.passwordLabel}</label>
          <input name="password" type="password" required autoComplete="current-password" placeholder="••••••••" style={loginInputStyle} />
          {error && (
            <p style={{
              fontFamily: "var(--font-sans)", fontSize: 12, color: "#E8A87C",
              margin: "16px 0 0", lineHeight: 1.4,
            }}>{error}</p>
          )}
          <button type="submit" style={{
            width: "100%", marginTop: 28, padding: "14px 20px",
            background: "var(--gold-500)", border: "none", cursor: "pointer",
            fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--emerald-900)",
            transition: "background var(--dur-base) var(--ease-silk), transform var(--dur-fast) var(--ease-silk)",
          }}
            onMouseEnter={(e) => { 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) => { e.currentTarget.style.transform = "translateY(1px)"; }}
            onMouseUp={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; }}
          >{t.login.submit}</button>
        </form>
        <a href={INDEX_URL} style={{
          display: "block", textAlign: "center", marginTop: 28,
          fontFamily: "var(--font-sans)", fontSize: 12, 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)"; }}
        >← {t.login.back}</a>
      </Reveal>
    </section>
  );
}
const loginLabelStyle = {
  display: "block", fontFamily: "var(--font-sans)", fontSize: 11, 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: 16, outline: "none",
};

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