/* 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.html" style={{ color: "var(--white)", textDecoration: "none" }}>About</a>
          <a href="mailto:emili@myhstimeline.com" style={{ color: "var(--white)", textDecoration: "none" }}>Contact</a>
          <a href="privacy.html" style={{ color: "var(--white)", textDecoration: "none" }}>Privacy</a>
        </div>
      </div>

      {/* Contact card */}
      <div id="contact" style={{
        marginTop: 36,
        padding: "20px 22px",
        border: "1px solid #1A1A1A",
        background: "#0B0B0B",
        borderRadius: 16,
        display: "flex", alignItems: "center", gap: 18,
        flexWrap: "wrap",
      }}>
        <img
          src="assets/emily.jpg"
          alt="Emily Kosik"
          width={64}
          height={64}
          style={{
            width: 64, height: 64, borderRadius: 999,
            objectFit: "cover", objectPosition: "center",
            border: "2px solid var(--brand-lime)",
            flexShrink: 0,
            background: "var(--ink-900)",
          }}
        />
        <div style={{ flex: "1 1 200px", minWidth: 0 }}>
          <div style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: 18, color: "var(--white)", letterSpacing: "-0.01em",
          }}>
            Emily Kosik
          </div>
          <div style={{
            marginTop: 4,
            fontFamily: "var(--font-body)", fontSize: 13, color: "#A8A8A8",
          }}>
            Founder · Round Rock HS · Class of 2027
          </div>
        </div>
        <a
          href="mailto:emili@myhstimeline.com"
          style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "10px 16px",
            borderRadius: 999,
            border: "1px solid rgba(255,255,255,0.2)",
            background: "transparent",
            color: "var(--white)",
            fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14,
            textDecoration: "none",
          }}
        >
          emili@myhstimeline.com
        </a>
      </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;