/* Footer — simplified */
const Footer = () => {
  const { isMobile } = useViewport();
  const footer = {
    background: "#06060a",
    borderTop: "1px solid var(--rule)",
    padding: isMobile ? "56px 0 24px" : "80px 0 32px"
  };
  const fInner = { maxWidth: 1440, margin: "0 auto", padding: isMobile ? "0 20px" : "0 56px" };
  const fGrid = {
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr 1fr 1.4fr",
    gap: isMobile ? 36 : 48,
    paddingBottom: isMobile ? 36 : 56,
    borderBottom: "1px solid var(--rule)"
  };
  const colTitle = {
    fontFamily: "var(--mono)",
    fontSize: 10.5,
    letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "var(--ink-3)",
    marginBottom: 20
  };
  const linkList = {
    display: "flex", flexDirection: "column", gap: 10,
    fontSize: 14, color: "var(--ink-2)"
  };
  const fBottom = {
    paddingTop: isMobile ? 24 : 32,
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : "1fr auto",
    alignItems: isMobile ? "start" : "center",
    gap: isMobile ? 16 : 32,
    fontFamily: "var(--mono)",
    fontSize: isMobile ? 10 : 11,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color: "var(--ink-3)"
  };

  return (
    <footer id="contact" style={footer} data-screen-label="05 Footer">
      <div style={fInner}>
        <div style={fGrid}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <span style={{
                width: 26, height: 26, borderRadius: "50%",
                background: "radial-gradient(circle at 35% 30%, #ecefff 0%, #c9c1ff 38%, #9d8bdf 70%, #6d5aa8 100%)"
              }}></span>
              <span style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink)" }}>Human Centered AI Academy</span>
            </div>
            <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: 360, margin: 0, textWrap: "pretty" }}>
              A capability partner for organisations building AI that earns trust.
            </p>
            <a href="mailto:humancenteredaiacademy@gmail.com" style={{ display: "inline-block", marginTop: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-3)", transition: "color 200ms ease" }} onMouseEnter={(e) => e.currentTarget.style.color = "var(--lav-1)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-3)"}>HUMANCENTEREDAIACADEMY@GMAIL.COM</a>
          </div>

          <div>
            <div style={colTitle}>Services</div>
            <div style={linkList}>
              <a href="#services">AI Readiness</a>
              <a href="#services">AIOS Design</a>
              <a href="#services">AI Build</a>
              <a href="#services">AI Policy</a>
              <a href="#services">AI Coaching</a>
              <a href="#services">AI Ergonomics</a>
            </div>
          </div>

          <div>
            <div style={colTitle}>About</div>
            <div style={linkList}>
              <a href="#about">Our Method</a>
              <a href="#why">Philosophy</a>
              <a href="#contact">Contact</a>
            </div>
          </div>

          <div>
            <div style={colTitle}>Stay in touch</div>
            <p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55, margin: "0 0 14px", textWrap: "pretty" }}>
              Field notes and insights, four times a year. No spam, no AI slop.
            </p>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", gap: 8 }}>
              <input
                type="email"
                placeholder="you@example.com"
                style={{
                  flex: 1,
                  background: "transparent",
                  border: "1px solid var(--rule-2)",
                  borderRadius: 999,
                  padding: "10px 16px",
                  color: "var(--ink)",
                  fontFamily: "var(--sans)",
                  fontSize: 13,
                  outline: "none"
                }} />
              
              <button type="submit" className="btn btn--solid" style={{ padding: "10px 18px" }}>
                Subscribe
              </button>
            </form>
          </div>
        </div>

        <div style={fBottom}>
          <div>© MMXXVI · HUMAN CENTERED AI ACADEMY INC · TORONTO</div>
          <div style={{ display: "flex", gap: 28 }}>
            <a href="#">Privacy</a>
            <a href="#">Accessibility</a>
          </div>
        </div>
      </div>
    </footer>);

};

window.Footer = Footer;