/* Footer — big closing line, résumé download CTA, links */
function Footer() {
  const socials = [
    { name: "GitHub", href: "#" },
    { name: "LinkedIn", href: "#" },
    { name: "Email", href: "mailto:hello@rishi.dv" },
  ];
  return (
    <section id="resume" style={{ padding: "120px 0 0", position: "relative" }}>
      <div className="wrap">
        <Reveal style={{ marginBottom: 18 }}><span className="eyebrow">03 — what's next</span></Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.2fr) minmax(0,0.85fr)", gap: 64, alignItems: "end" }} className="foot-grid">
          <div>
            <Reveal>
              <h2 className="ds-display" style={{ fontSize: "clamp(42px,6vw,82px)", margin: 0, lineHeight: 1.02 }}>
                <WordReveal text="Let's build" /><br /><WordReveal text="something hard." />
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p className="ds-body-lg" style={{ marginTop: 24, maxWidth: 460, color: "var(--fg2)" }}>
                I'm looking for hard problems, sharp teams, and internships where I can build at the systems level. The résumé has the details.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{ display: "flex", gap: 14, marginTop: 38, flexWrap: "wrap", alignItems: "center" }}>
                <Magnetic as="span" strength={0.4} style={{ display: "inline-flex" }}>
                  <a className="btn-primary lk" href="Rishi-DV-Resume.pdf" download>
                    Download résumé <span className="arrow">↓</span>
                  </a>
                </Magnetic>
                <a className="btn-outline" href="mailto:hello@rishi.dv">Email me</a>
              </div>
            </Reveal>
          </div>

          {/* mini codeblock signature */}
          <Reveal delay={160} dir="right">
            <pre style={{
              margin: 0, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.8, color: "var(--fg3)",
              border: "1px solid var(--border-subtle)", borderRadius: 8, padding: "20px 22px", background: "var(--bg-inset)",
            }}>{`while True:
    build()
    solve()
    learn()
    repeat()`}</pre>
          </Reveal>
        </div>

        {/* footer bar */}
        <footer style={{ marginTop: 100, borderTop: "1px solid var(--border-subtle)", padding: "32px 0 44px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 15, color: "var(--fg1)" }}>rishi<span style={{ color: "var(--fg4)" }}>.dv</span></div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".1em", color: "var(--fg4)", marginTop: 6 }}>BUILD · SOLVE · LEARN · REPEAT</div>
          </div>
          <div style={{ display: "flex", gap: 22 }}>
            {socials.map((s) => (
              <a key={s.name} href={s.href} className="lk" style={{ color: "var(--fg3)", display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".02em", transition: "color 140ms" }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg1)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg3)")}>
                {s.name} <span className="arrow" style={{ fontSize: 12 }}>↗</span>
              </a>
            ))}
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg4)" }}>© 2026 Rishi D V</div>
        </footer>
      </div>
      <style>{`@media(max-width:760px){.foot-grid{grid-template-columns:1fr !important;gap:40px !important}}`}</style>
    </section>
  );
}
Object.assign(window, { Footer });
