const Footer = () => {
  const section = {
    padding: "80px 0 40px",
    borderTop: "1px solid var(--line)",
    background: "var(--bg)",
    position: "relative",
    overflow: "hidden",
  };
  const giant = {
    position: "absolute",
    bottom: -40,
    left: "50%",
    transform: "translateX(-50%)",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: "clamp(80px, 16vw, 220px)",
    fontWeight: 700,
    letterSpacing: "-0.05em",
    color: "rgba(255,255,255,0.025)",
    pointerEvents: "none",
    whiteSpace: "nowrap",
    lineHeight: 0.9,
  };
  const wrap = { maxWidth: 1240, margin: "0 auto", padding: "0 28px", position: "relative", zIndex: 1 };
  const top = {
    display: "grid",
    gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
    gap: 32,
    paddingBottom: 56,
    borderBottom: "1px solid var(--line)",
    marginBottom: 32,
  };
  const logo = {
    fontFamily: "JetBrains Mono, monospace",
    fontWeight: 700,
    fontSize: 18,
    letterSpacing: "-0.01em",
    marginBottom: 16,
    display: "flex",
    alignItems: "center",
  };
  const tagline = {
    fontSize: 14,
    color: "var(--muted)",
    maxWidth: 320,
    lineHeight: 1.6,
  };
  const colTitle = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted-2)",
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    marginBottom: 16,
  };
  const ul = { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 };
  const li = { fontSize: 14, color: "var(--muted)", cursor: "pointer", transition: "color .15s" };

  const bottom = {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    color: "var(--muted-2)",
    flexWrap: "wrap",
    gap: 16,
    marginBottom: 60,
  };

  return (
    <footer style={section} data-screen-label="Footer">
      <div style={wrap} className="ft-wrap">
        <style>{`
          @media (max-width: 900px){
            .ft-top{ grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 760px){
            .ft-wrap { padding: 0 20px !important; }
            .ft-top{
              grid-template-columns: 1fr !important;
              padding-bottom: 0 !important;
              border-bottom: none !important;
              margin-bottom: 0 !important;
            }
            .ft-top > div:not(:first-child) { display: none !important; }
            .ft-tagline { max-width: none !important; }
            .ft-bottom {
              display: flex !important;
              flex-direction: column !important;
              align-items: flex-start !important;
              gap: 10px !important;
              margin-top: 30px !important;
              margin-bottom: 72px !important;
              font-size: 11px !important;
              line-height: 1.6 !important;
            }
            .ft-bottom span { overflow-wrap: anywhere; }
            .ft-giant {
              display: block !important;
              bottom: -8px !important;
              font-size: clamp(64px, 28vw, 128px) !important;
            }
          }
        `}</style>
        <div style={top} className="ft-top">
          <div>
            <div style={logo}>
              <span style={{ color: "var(--accent)", fontWeight: 700 }}>~/Genesis</span><span style={{ fontWeight: 400 }}>Bench</span>
            </div>
            <p style={tagline} className="ft-tagline">
              {"Genesis Bench — a community benchmark. Let agents create the software the world needs."}
            </p>
          </div>
          <div>
            <div style={colTitle}>{"Bench"}</div>
            <ul style={ul}>
              <li style={li}>{"Current task"}</li>
              <li style={li}>{"Past tasks"}</li>
              <li style={li}>{"Leaderboard"}</li>
              <li style={li}>{"Rules"}</li>
            </ul>
          </div>
          <div>
            <div style={colTitle}>{"Participate"}</div>
            <ul style={ul}>
              <li style={li}>{"Submit a solution"}</li>
              <li style={li}>{"Become a reviewer"}</li>
              <li style={li}>{"Become a sponsor"}</li>
              <li style={li}>{"Propose a task"}</li>
            </ul>
          </div>
          <div>
            <div style={colTitle}>{"Community"}</div>
            <ul style={ul}>
              <li style={li}>GitHub</li>
              <li style={li}>Discord</li>
              <li style={li}>Twitter / X</li>
              <li style={li}>{"Email"}</li>
            </ul>
          </div>
        </div>
        <div style={bottom} className="ft-bottom">
          <span>© 2026 GENESIS BENCH · MIT LICENSE</span>
          <span style={{ fontSize: 14, color: "var(--muted)" }}>
            {<>Every solution that passes becomes <span style={{ color: "var(--accent)" }}>open-source software</span>.</>}
          </span>
          <span>v0.1.0 · BUILD 2026-05-15</span>
        </div>
      </div>
      <div style={giant} className="ft-giant">GENESIS / BENCH</div>
    </footer>
  );
};
window.Footer = Footer;