/* Footer — back to portfolio + contact */

function Footer() {
  return (
    <footer
      style={{
        background: "var(--page-fg)",
        color: "#F4EFDF",
        padding: "80px 0 40px",
        borderTop: "1px solid rgba(244,239,223,0.15)",
      }}
    >
      <div className="wrap">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 48,
            paddingBottom: 48,
            borderBottom: "1px solid rgba(244,239,223,0.15)",
          }}
          className="footer-top"
        >
          <div>
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-accent)", marginBottom: 16 }}
            >
              Thanks for reading
            </div>
            <h3
              style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 400,
                fontSize: "clamp(32px, 4vw, 56px)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
                margin: 0,
                maxWidth: "16ch",
                color: "#F4EFDF",
              }}
            >
              Building intelligent experiences at the intersection of UX,
              engineering and AI.
            </h3>
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 12,
              alignSelf: "end",
            }}
          >
            <a
              href="mailto:hello@akshilshah.com"
              className="btn"
              style={{
                background: "var(--page-accent)",
                borderColor: "var(--page-accent)",
              }}
            >
              hello@akshilshah.com <Icon.ArrowRight />
            </a>
            <a
              href="/"
              className="btn ghost"
              style={{ color: "#F4EFDF", borderColor: "rgba(244,239,223,0.3)" }}
            >
              <Icon.ArrowLeft /> Back to portfolio
            </a>
            <a
              href="https://linkedin.com/in/akshilshah"
              target="_blank"
              className="btn ghost"
              style={{ color: "#F4EFDF", borderColor: "rgba(244,239,223,0.3)" }}
            >
              LinkedIn <Icon.ArrowRight />
            </a>
            <a
              href="https://github.com/aksshah"
              target="_blank"
              className="btn ghost"
              style={{ color: "#F4EFDF", borderColor: "rgba(244,239,223,0.3)" }}
            >
              Github <Icon.ArrowRight />
            </a>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 16,
            marginTop: 32,
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            color: "rgba(244,239,223,0.5)",
            letterSpacing: "0.06em",
            textTransform: "uppercase",
          }}
        >
          <span>
            ©2026&nbsp; HAND CRAFTED BY ME WITH UTMOST CARE
            <span id="HeartAnimation"></span>
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .footer-top { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  )
}

window.Footer = Footer