// Footer.jsx — minimal: logo / channels / legal

function Footer() {
  useLucide();
  return (
    <footer style={{ background: "var(--sand)", padding: "56px 32px 32px",
      borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto",
        display: "flex", flexDirection: "column", gap: 32 }}>

        <div style={{ display: "flex", justifyContent: "space-between",
          alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <Logo height={28} />
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <FooterChannel icon="message-circle" label="WhatsApp" href="https://wa.me/447572367442" bg="#25D366" />
            <FooterChannel icon="send" label="Telegram" href="https://t.me/mikhailtruf" bg="#229ED9" />
          </div>
        </div>

        <div style={{
          paddingTop: 24, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between",
          alignItems: "center", gap: 24, flexWrap: "wrap"
        }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12,
            color: "var(--muted)" }}>© 2026 AI Fitters · A trading name of AI Heroes Limited · UK

          </span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#privacy" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("af:show-legal", { detail: { type: "privacy" } })); }} style={footerLink}>Privacy Policy</a>
            <a href="#terms" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("af:show-legal", { detail: { type: "terms" } })); }} style={footerLink}>Terms</a>
          </div>
        </div>
      </div>
    </footer>);

}

const footerLink = {
  fontSize: 13, color: "var(--ink-soft)", textDecoration: "none"
};

function FooterChannel({ icon, label, href, bg }) {
  return (
    <a href={href} target="_blank" rel="noopener"
    style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "8px 14px 8px 10px", borderRadius: 10,
      background: "#fff", border: "1px solid var(--line)",
      fontSize: 13, fontWeight: 600, color: "var(--ink)",
      textDecoration: "none",
      transition: "transform .12s var(--t-ease), border-color .15s"
    }}
    onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-1px)";e.currentTarget.style.borderColor = "var(--ink)";}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.borderColor = "var(--line)";}}>
      <span style={{
        width: 22, height: 22, borderRadius: 6, background: bg,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        color: "#fff"
      }}>
        <i data-lucide={icon} style={{ width: 13, height: 13, strokeWidth: 2.5 }}></i>
      </span>
      {label}
    </a>);

}

window.Footer = Footer;