/* global React */

const Footer = () => (
  <footer
    data-screen-label="10 Footer"
    style={{
      background: "#070707",
      color: "var(--white)",
      padding: "56px 24px 40px",
      borderTop: "1px solid #1A1A1A",
    }}
  >
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div style={{
        display: "flex", alignItems: "flex-start", justifyContent: "space-between",
        gap: 32, flexWrap: "wrap",
      }}>
        <a href="/" aria-label="My High School Timeline" style={{
          display: "inline-flex", alignItems: "center", textDecoration: "none",
        }}>
          <img
            src="assets/logo.png"
            alt="My High School Timeline"
            style={{
              height: 40, width: "auto", display: "block",
              filter: "invert(1) hue-rotate(180deg)",
            }}
          />
        </a>

        <div style={{
          display: "flex", gap: 28, fontFamily: "var(--font-body)", fontSize: 14,
          flexWrap: "wrap", fontWeight: 500,
        }}>
          <a href="#about" style={{ color: "var(--white)", textDecoration: "none", textDecorationColor: "transparent" }}>About</a>
          <a href="#contact" style={{ color: "var(--white)", textDecoration: "none", textDecorationColor: "transparent" }}>Contact</a>
          <a href="#privacy" style={{ color: "var(--white)", textDecoration: "none", textDecorationColor: "transparent" }}>Privacy</a>
        </div>
      </div>

      <div style={{
        marginTop: 40, paddingTop: 24,
        borderTop: "1px solid #1A1A1A",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 16, flexWrap: "wrap",
        fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-400)",
      }}>
        <div>
          © 2026 My High School Timeline · Built by Emily Kosik
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: "var(--brand-lime)",
          }} />
          Currently available for Round Rock High School, TX
        </div>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;