/* LinkFX marketplace UI kit — Header & Footer */
const { Button, NavLink } = window.LinkFXDesignSystem_0271c1;

const NAV = ["Services", "Company", "Showcases", "Blog", "Contact"];

function Header({ route, onNav, onRegister, onLogin, transparentOver }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const scroller = document.getElementById("lfx-scroll") || window;
    const onScroll = () => {
      const y = scroller === window ? window.scrollY : scroller.scrollTop;
      setScrolled(y > 8);
    };
    scroller.addEventListener("scroll", onScroll);
    return () => scroller.removeEventListener("scroll", onScroll);
  }, []);

  const solid = scrolled || !transparentOver;
  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 40,
        transition: "background-color .3s var(--ease-standard), box-shadow .3s var(--ease-standard)",
        background: solid ? "var(--base-100)" : "transparent",
        boxShadow: solid ? "var(--shadow-xs)" : "none",
      }}
    >
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 clamp(1.25rem,4vw,2.5rem)", height: "72px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "2rem" }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }} style={{ display: "flex" }}>
            <img src="../../assets/logo.svg" alt="LinkFX" style={{ height: 26, display: solid ? "block" : "none" }} />
            <img src="../../assets/logo-inverted.svg" alt="LinkFX" style={{ height: 26, display: solid ? "none" : "block" }} />
          </a>
          <nav style={{ display: "flex", gap: "1.5rem", alignItems: "center" }} className="lfx-desktop-nav">
            {NAV.map((n) => (
              <NavLink key={n} onDark={!solid} active={route === n.toLowerCase()}
                onClick={(e) => { e.preventDefault(); onNav(n.toLowerCase()); }}>
                {n}
              </NavLink>
            ))}
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
          <NavLink onDark={!solid} onClick={(e) => { e.preventDefault(); onLogin(); }} style={{ }} >
            <span className="lfx-desktop-nav">Login to Marketplace</span>
          </NavLink>
          <Button variant="accent" onClick={onRegister}>Open an account</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ onNav }) {
  const cols = [
    { h: "Services", links: ["Spot FX", "Global Payments", "Hedging", "Multi-currency Accounts", "Market Data", "API Access"] },
    { h: "Company", links: ["About Us", "Blog", "Showcases", "Resources", "Contact"] },
    { h: "Legal", links: ["Terms", "Privacy", "Cookies", "Complaints"] },
  ];
  return (
    <footer style={{ background: "var(--base-inverted-100)", marginTop: "var(--section-spacer-lg)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,2.5rem)" }}>
        {/* Newsletter */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: "2rem", justifyContent: "space-between", alignItems: "center", paddingBottom: "3rem", borderBottom: "1px solid var(--primary)" }}>
          <div style={{ flex: "1 1 300px" }}>
            <h3 style={{ margin: 0, color: "#fff", fontSize: "var(--text-h3)", fontWeight: 500, letterSpacing: "-.02em" }}>Stay up to date</h3>
            <p style={{ margin: ".5rem 0 0", color: "var(--slate-200)" }}>Updates on industry news, services and promotions direct to your inbox.</p>
          </div>
          <form style={{ flex: "1 1 320px", position: "relative", maxWidth: 440 }} onSubmit={(e) => e.preventDefault()}>
            <input placeholder="Your email address" style={{ width: "100%", boxSizing: "border-box", padding: "1.15rem 8.5rem 1.15rem 1.5rem", borderRadius: "var(--radius-full)", border: "none", fontFamily: "var(--font-sans)", fontSize: "1rem" }} />
            <div style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)" }}>
              <Button variant="primary">Subscribe</Button>
            </div>
          </form>
        </div>
        {/* Columns */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: "2.5rem", justifyContent: "space-between", paddingTop: "3rem" }}>
          <div style={{ flex: "1 1 200px" }}>
            <img src="../../assets/logo-inverted.svg" alt="LinkFX" style={{ height: 24 }} />
            <div style={{ marginTop: "1.25rem", display: "flex", flexDirection: "column", gap: ".4rem" }}>
              <a href="#" style={{ color: "#fff", fontSize: "1.125rem" }}>+44 20 7946 0100</a>
              <a href="#" style={{ color: "#fff", fontSize: "1.125rem" }}>hello@linkfx.com</a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h} style={{ flex: "0 0 auto" }}>
              <h4 style={{ margin: "0 0 1rem", color: "#fff", fontSize: "1.125rem", fontWeight: 500 }}>{c.h}</h4>
              <div style={{ display: "flex", flexDirection: "column", gap: ".5rem" }}>
                {c.links.map((l) => (
                  <a key={l} href="#" onClick={(e) => { e.preventDefault(); onNav && onNav("blog"); }}
                    style={{ color: "var(--slate-200)", fontSize: ".875rem", textDecoration: "none" }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "var(--primary)")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = "var(--slate-200)")}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "3rem", paddingTop: "2rem", borderTop: "1px solid var(--base-inverted-200)" }}>
          <p style={{ margin: 0, fontSize: ".75rem", color: "var(--slate-500)" }}>© {new Date().getFullYear()} Link FX. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { LfxHeader: Header, LfxFooter: Footer });