function StopMotionStrip() {
  const tones = ["warm", "rose", "sienna", "cool", "pine", "ink"];
  const frames = Array.from({ length: 14 }, (_, i) => tones[i % tones.length]);
  const Run = (k) => (
    <div key={k} style={{ display: "flex", gap: 8, flex: "0 0 auto" }}>
      {frames.map((t, i) => (
        <div key={i} style={{ position: "relative", width: 120, aspectRatio: "4/3", flex: "0 0 auto" }}>
          <Plate ratio="4/3" tone={t} frame={`F${String(i + 1).padStart(2, "0")}`} style={{ height: "100%" }} />
        </div>
      ))}
    </div>
  );
  return (
    <div style={{ overflow: "hidden", borderTop: "1px solid var(--rule-strong)" }}>
      <div className="stopmo-track" style={{ padding: "16px 0" }}>
        {Run("a")}{Run("b")}
      </div>
    </div>
  );
}

function Contact({ onBlog }) {
  const socials = [
    { name: "GitHub", handle: "@mulla759", url: "https://github.com/Mulla759" },
    { name: "LinkedIn", handle: "in/abdull-abdi5", url: "https://www.linkedin.com/in/abdull-abdi5/" },
    { name: "Letterboxd", handle: "@Mulla759", url: "https://letterboxd.com/Mulla759/" },
    { name: "Last.fm", handle: "what's playing", url: "https://www.last.fm/user/Mulla759" },
    { name: "X", handle: "short thoughts", url: "https://x.com/AAbdallahDev" },
  ];
  const [mailHover, setMailHover] = React.useState(false);
  const [moreHover, setMoreHover] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const copyTimer = React.useRef(null);

  React.useEffect(() => () => clearTimeout(copyTimer.current), []);

  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText("Abdullahi.aabdii@gmail.com");
    setCopied(true);
    clearTimeout(copyTimer.current);
    copyTimer.current = setTimeout(() => setCopied(false), 1600);
  };

  return (
    <section id="contact" className="section" style={{ background: "var(--paper-blush)" }}>
      <Micro color="var(--vermilion)" style={{ display: "block" }}>— Write to me</Micro>

      <div style={{ marginTop: 26 }}>
        <a href="mailto:Abdullahi.aabdii@gmail.com"
          onMouseEnter={() => setMailHover(true)}
          onMouseLeave={() => setMailHover(false)}
          style={{
            fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(1.6rem,5.4vw,4.4rem)", letterSpacing: "-0.04em",
            lineHeight: 1.02, color: "var(--ink)", textDecoration: "underline",
            textDecorationThickness: "1px", textUnderlineOffset: "0.12em",
            textDecorationColor: mailHover ? "var(--vermilion)" : "var(--ink-4)",
            overflowWrap: "break-word", wordBreak: "break-word",
            transition: "text-decoration-color 300ms var(--ease-soft)",
          }}>abdullahi.aabdii@gmail.com</a>
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 8 }}>
          <span style={{ fontFamily: "var(--font-annotation)", color: "var(--vermilion)",
            fontSize: "clamp(1rem,1.9vw,1.4rem)", lineHeight: 1.1, transform: "rotate(-2deg)" }}>↑ yes, two i's</span>
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 34 }}>
        <Button variant="solid" onClick={() => { window.location.href = "mailto:Abdullahi.aabdii@gmail.com"; }}>Send an email</Button>
        <Button variant="ghost" onClick={copy}>{copied ? "Copied ✓" : "Copy address"}</Button>
      </div>

      <div style={{ marginTop: 64 }}>
        <Micro style={{ display: "block", marginBottom: 20 }}>Elsewhere</Micro>
        <div className="cols cols--elsewhere">
          {socials.map(s => (
            <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer"
              style={{ textDecoration: "none", display: "flex", flexDirection: "column", gap: 5 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "1.15rem",
                letterSpacing: "-0.02em", lineHeight: 1.1, color: "var(--ink)" }}>
                {s.name}<span style={{ color: "var(--vermilion)", marginLeft: 6 }}>↗</span>
              </span>
              <Micro size={10} color="var(--ink-3)">{s.handle}</Micro>
            </a>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 72 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          gap: 16, flexWrap: "wrap", marginBottom: 18 }}>
          <Micro size={9} color="var(--ink-4)">stop-motion · 14 frames · loops</Micro>
          <button onClick={onBlog}
            onMouseEnter={() => setMoreHover(true)}
            onMouseLeave={() => setMoreHover(false)}
            style={{
              background: "none", border: "none", padding: 0, cursor: "pointer",
              fontFamily: "var(--font-annotation)", fontSize: "clamp(1rem,1.8vw,1.4rem)",
              lineHeight: 1.2, color: moreHover ? "var(--orange)" : "var(--ink-4)",
              transition: "color 320ms var(--ease-soft)",
            }}>you made it. there's more →</button>
        </div>
        <StopMotionStrip />
      </div>

      <div style={{ marginTop: 64 }}>
        <Rule strong />
        <div className="cols cols--colophon" style={{ marginTop: 26 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Wordmark />
            <Shavian />
            <Micro size={10} color="var(--ink-4)">made with love in Minneapolis</Micro>
          </div>
          <div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "0.95rem", lineHeight: 1.5,
              letterSpacing: "-0.005em", color: "var(--ink-3)", margin: 0, maxWidth: "42ch" }}>
              Set in Newsreader and Karla, the same pair as SpeakEz. The site speaks in sans; I speak in serif.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <Micro size={10} color="var(--ink-4)">last updated oct 2, 2026</Micro>
            <Micro size={10} color="var(--ink-4)">44.9778°N 93.2650°W</Micro>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact, StopMotionStrip });