/* Footer.jsx — about / contact closer (dark, sharp, mono) */
function Footer({ onResume }) {
  const socials = [
    { icon: "mail", label: "Email", meta: "neel.satyavolu@proton.me", href: "mailto:neel.satyavolu@proton.me" },
    { icon: "link", label: "LinkedIn", meta: "in/neel-satyavolu", href: "https://www.linkedin.com/in/neel-satyavolu/" },
    { icon: "play-circle", label: "InFocus profile", meta: "infocusnews.tv", href: "https://infocusnews.tv/staff_name/neel-satyavolu/" },
  ];
  return (
    <footer id="about" style={{ borderTop: "1px solid var(--border)" }}>
      <Section style={{ paddingTop: 96, paddingBottom: 48 }}>
        <Kicker>[ 05 ] About / contact</Kicker>
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 56, alignItems: "start", margin: "40px 0 56px", paddingBottom: 56, borderBottom: "1px solid var(--border)" }}>
          <div>
            <h2 className="h1" style={{ margin: "0 0 18px", maxWidth: 520 }}>Have a story I should cover?</h2>
            <p className="body" style={{ maxWidth: 460, marginBottom: 28 }}>I'm always looking for the next story around my school and beyond. Reach out — or take my resume with you.</p>
            <div className="footer-actions" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="primary" icon="arrow-down-to-line" onClick={onResume}>Download resume</Button>
              <Button variant="ghost" icon="mail">Send a message</Button>
            </div>
          </div>
          <div className="social-panel" style={{ border: "1px solid var(--border)" }}>
            {socials.map((s, i) => <SocialRow key={s.label} {...s} last={i === socials.length - 1} />)}
          </div>
        </div>
        <div className="footer-bottom" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: 14, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg)" }}>Neel Satyavolu</span>
          <span className="label" style={{ color: "var(--fg-4)" }}>© 2026 · InFocus News · Palo Alto High</span>
        </div>
      </Section>
    </footer>
  );
}

function SocialRow({ icon, label, meta, href, last }) {
  const [h, setH] = React.useState(false);
  return (
    <a className="social-row" href={href} target="_blank" rel="noopener noreferrer" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 18px", borderBottom: last ? "none" : "1px solid var(--border)", background: h ? "var(--surface-hover)" : "transparent", cursor: "pointer", transition: "background var(--dur) var(--ease)", textDecoration: "none" }}>
      <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <Icon name={icon} size={18} style={{ color: h ? "var(--fg)" : "var(--fg-3)" }} />
        <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15, color: "var(--fg)" }}>{label}</span>
          <span className="timecode" style={{ fontSize: 12 }}>{meta}</span>
        </span>
      </span>
      <Icon name="arrow-up-right" size={16} style={{ color: h ? "var(--fg)" : "var(--fg-4)" }} />
    </a>
  );
}

Object.assign(window, { Footer });