/* global React */
// RE/MAX Experts — site chrome: sticky Header + Footer
const DS = window.REMAXExpertsDesignSystem_a17125;
const ASSET = "assets/";

function Icon({ name, size = 18, style }) {
  return <i data-lucide={name} style={{ width: size, height: size, display: "inline-flex", ...style }} />;
}

const NAV = ["O nas", "Dla sprzedających", "Dla kupujących", "Agenci", "Blog", "Kariera", "Kontakt"];

function Header() {
  const { Logo, Button } = DS;
  const [compact, setCompact] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setCompact(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "var(--rmx-white)",
      borderBottom: "1px solid var(--border-subtle)",
      boxShadow: compact ? "var(--shadow-header)" : "none",
      transition: "box-shadow var(--dur-base) var(--ease-out)",
    }}>
      <div style={{
        maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)",
        height: compact ? 64 : 84, display: "flex", alignItems: "center", gap: "var(--sp-6)",
        transition: "height var(--dur-base) var(--ease-out)",
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
          <Logo base={ASSET} height={compact ? 34 : 42} />
        </a>

        <nav className="rmx-desk-nav" style={{ display: "flex", gap: "var(--sp-5)", marginLeft: "auto", alignItems: "center" }}>
          {NAV.map((n) => (
            <a key={n} href="#" style={{
              fontFamily: "var(--font-heading)", fontWeight: "var(--fw-medium)", fontSize: "var(--fs-sm)",
              color: "var(--text-heading)", textDecoration: "none", whiteSpace: "nowrap",
              display: "inline-flex", alignItems: "center", gap: 4,
            }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--accent)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-heading)")}
            >
              {n}
              {(n === "Dla sprzedających" || n === "Dla kupujących") && <Icon name="chevron-down" size={14} />}
            </a>
          ))}
        </nav>

        <div className="rmx-desk-nav" style={{ display: "flex", alignItems: "center", gap: "var(--sp-4)", flexShrink: 0 }}>
          <a href="tel:+48612254363" style={{
            display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-heading)",
            fontWeight: "var(--fw-bold)", fontSize: "var(--fs-sm)", color: "var(--rmx-dark-blue)", textDecoration: "none",
          }}>
            <Icon name="phone" size={16} style={{ color: "var(--accent)" }} />
            +48 61 225 43 63
          </a>
          <Button variant="primary" size="sm">Bezpłatna wycena</Button>
        </div>

        <button className="rmx-mob-btn" aria-label="Menu" onClick={() => setOpenMenu((v) => !v)} style={{
          display: "none", marginLeft: "auto", background: "transparent", border: "none",
          color: "var(--rmx-dark-blue)", cursor: "pointer", padding: 6,
        }}>
          <Icon name={openMenu ? "x" : "menu"} size={26} />
        </button>
      </div>

      {openMenu && (
        <div className="rmx-mob-menu" style={{
          borderTop: "1px solid var(--border-subtle)", padding: "var(--sp-4) var(--gutter)",
          display: "flex", flexDirection: "column", gap: "var(--sp-2)", background: "#fff",
        }}>
          {NAV.map((n) => (
            <a key={n} href="#" style={{ padding: "10px 0", fontFamily: "var(--font-heading)", fontWeight: 500,
              color: "var(--text-heading)", borderBottom: "1px solid var(--border-subtle)" }}>{n}</a>
          ))}
          <a href="tel:+48612254363" style={{ padding: "12px 0", fontWeight: 700, color: "var(--accent)" }}>
            ✆ +48 61 225 43 63
          </a>
        </div>
      )}
    </header>
  );
}

function Footer() {
  const { Logo } = DS;
  const cols = [
    { h: "Nawigacja", items: ["O nas", "Agenci", "Blog", "Kariera", "Media o nas", "Kontakt"] },
    { h: "Oferta", items: ["Dla sprzedających", "Dla kupujących", "Mieszkania", "Domy", "Działki", "Lokale"] },
  ];
  return (
    <footer style={{ background: "var(--surface-footer)", color: "var(--text-on-invert-dim)", position: "relative", overflow: "hidden" }}>
      <div className="rmx-slash-rule" style={{ position: "absolute", top: 0, right: 0, width: 220, height: "100%", color: "var(--rmx-bridge-blue)", opacity: 0.5, pointerEvents: "none" }} />
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--sp-20) var(--gutter) var(--sp-8)", position: "relative" }}>
        <div className="rmx-foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr", gap: "var(--sp-12)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--sp-5)" }}>
            <Logo base={ASSET} tone="light" height={44} />
            <p style={{ fontSize: "var(--fs-sm)", lineHeight: 1.6, maxWidth: 280 }}>
              Biuro nieruchomości w Poznaniu z 12-letnim doświadczeniem. Część sieci RE/MAX obecnej w 140 krajach.
            </p>
            <div style={{ display: "flex", gap: "var(--sp-3)" }}>
              {["facebook", "instagram", "linkedin", "youtube"].map((s) => (
                <a key={s} href="#" aria-label={s} style={{
                  width: 38, height: 38, borderRadius: "var(--r-pill)", display: "grid", placeItems: "center",
                  background: "rgba(255,255,255,0.08)", color: "#fff",
                }}><Icon name={s} size={17} /></a>
              ))}
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.h} style={{ display: "flex", flexDirection: "column", gap: "var(--sp-3)" }}>
              <h4 style={{ color: "#fff", fontSize: "var(--fs-sm)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase" }}>{c.h}</h4>
              {c.items.map((i) => (
                <a key={i} href="#" style={{ fontSize: "var(--fs-sm)", color: "var(--text-on-invert-dim)", textDecoration: "none" }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                  onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-on-invert-dim)")}>{i}</a>
              ))}
            </div>
          ))}

          <div style={{ display: "flex", flexDirection: "column", gap: "var(--sp-3)" }}>
            <h4 style={{ color: "#fff", fontSize: "var(--fs-sm)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase" }}>Kontakt</h4>
            <span style={{ fontSize: "var(--fs-sm)" }}>RE/MAX Experts</span>
            <span style={{ fontSize: "var(--fs-sm)" }}>ul. Stanisława Barańczaka 1A/65<br />60-537 Poznań</span>
            <a href="tel:+48612254363" style={{ fontSize: "var(--fs-sm)", color: "#fff", fontWeight: 700 }}>+48 61 225 43 63</a>
            <a href="mailto:biuro@remaxexperts.pl" style={{ fontSize: "var(--fs-sm)", color: "var(--text-on-invert-dim)" }}>biuro@remaxexperts.pl</a>
          </div>
        </div>

        <div style={{ marginTop: "var(--sp-12)", paddingTop: "var(--sp-6)", borderTop: "1px solid rgba(255,255,255,0.12)",
          display: "flex", justifyContent: "space-between", gap: "var(--sp-6)", flexWrap: "wrap", fontSize: "var(--fs-xs)" }}>
          <div style={{ lineHeight: 1.7 }}>
            © 2026 Experts Nieruchomości Sp. z o.o. · NIP: 9512352310<br />
            <em style={{ opacity: 0.7 }}>Each Office Independently Owned and Operated.</em>
          </div>
          <div style={{ display: "flex", gap: "var(--sp-5)", alignItems: "flex-start", flexWrap: "wrap" }}>
            <a href="#" style={{ color: "var(--text-on-invert-dim)" }}>Polityka prywatności</a>
            <a href="#" style={{ color: "var(--text-on-invert-dim)" }}>RODO</a>
            <a href="#" style={{ color: "var(--text-on-invert-dim)" }}>Mapa strony</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, Icon, RMX_ASSET: ASSET });