// AboutStrip.jsx — short personal bio + contact + quiet footer.

function AboutStrip() {
  const stackGroups = [
    { label: "Languages",   items: ["TypeScript", "JavaScript", "C#", "Go", "C++", "Python"] },
    { label: "Frameworks",  items: ["React", "Next.js", "ASP.NET", "Node.js", "Tailwind"] },
    { label: "Data",        items: ["Postgres", "SQL Server", "MySQL", "MongoDB"] },
    { label: "Infra",       items: ["AWS", "Azure", "Docker", "Kubernetes", "Terraform", "Cloud Foundry"] },
    { label: "AI",          items: ["Claude", "ChatGPT", "Gemini", "Copilot"] },
  ];

  return (
    <section id="about" style={asStyles.section}>
      <div style={asStyles.inner}>
        <div className="about-grid" style={asStyles.grid}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>About</div>
            <h2 style={asStyles.title}>
              Architect and engineer,<br />end to end.
            </h2>
            <p style={asStyles.body}>
              I design the architecture and write the code. Most of my work sits at the intersection of business and engineering: taking ambiguous requirements, turning them into a technical design, and building it end to end. I care about latency budgets, error budgets, and whether the thing actually works at 2am.
            </p>
            <p style={asStyles.body}>
              The professional work mostly lives behind NDAs. The closest things to a public record are my{" "}
              <a href="https://resume.spencervoorhees.com" style={asStyles.inlineLink}>résumé</a>
              {" "}and my{" "}
              <a href="https://blog.spencervoorhees.com" style={asStyles.inlineLink}>writing</a>.
              {" "}The rest is side projects and tools nobody asked for.
            </p>
          </div>

          <aside id="contact" className="about-aside" style={asStyles.aside}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Stack</div>
            <div style={asStyles.stackGroups}>
              {stackGroups.map(g => (
                <div key={g.label} style={asStyles.stackGroup}>
                  <span style={asStyles.stackLabel}>{g.label}</span>
                  <div style={asStyles.tagWrap}>
                    {g.items.map(s => <span key={s} className="tag">{s}</span>)}
                  </div>
                </div>
              ))}
            </div>

            <div className="eyebrow" style={{ marginTop: 32, marginBottom: 14 }}>
              Get in touch
            </div>
            <div style={asStyles.contactRow}>
              <a className="btn btn--secondary" href="mailto:hello@spencervoorhees.com">
                <i data-lucide="mail" style={{ width: 14, height: 14 }}></i>
                <span>hello@spencervoorhees.com</span>
              </a>
              <div style={asStyles.socialRow}>
                <a className="btn btn--ghost btn--sm" href="https://linkedin.com/in/spencervoorhees"
                   aria-label="LinkedIn">
                  <LinkedInIcon />
                  <span>linkedin</span>
                </a>
                <a className="btn btn--ghost btn--sm" href="https://blog.spencervoorhees.com/rss.xml"
                   aria-label="RSS feed">
                  <i data-lucide="rss" style={{ width: 14, height: 14 }}></i>
                  <span>rss</span>
                </a>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function GitHubIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="ic" aria-hidden="true">
      <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.44-2.27 1.18-3.07-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.82 1.18 3.07 0 4.4-2.7 5.36-5.27 5.65.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56A11.5 11.5 0 0 0 12 .5Z"/>
    </svg>
  );
}
function LinkedInIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className="ic" aria-hidden="true">
      <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0 8h5v16H0V8Zm7.5 0h4.78v2.19h.07c.66-1.25 2.28-2.57 4.7-2.57 5.03 0 5.95 3.31 5.95 7.61V24h-5v-7.16c0-1.71-.03-3.91-2.38-3.91-2.38 0-2.75 1.86-2.75 3.79V24h-5V8Z"/>
    </svg>
  );
}

const asStyles = {
  section: {
    padding: "var(--sec-y, 96px) 0",
    borderTop: "1px solid var(--border-subtle)",
    background: "var(--bg-subtle)",
  },
  inner: { maxWidth: 1080, margin: "0 auto", padding: "0 max(20px, 5vw)" },
  grid: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1.35fr) minmax(0, 1fr)",
    gap: 72, alignItems: "start",
  },
  title: {
    fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 600,
    letterSpacing: "-0.024em", lineHeight: 1.1, color: "var(--fg)",
    margin: "0 0 22px", textWrap: "balance", maxWidth: 540,
  },
  body: {
    fontSize: 17, lineHeight: 1.6, color: "var(--fg-secondary)",
    margin: "0 0 16px", maxWidth: 540,
  },
  inlineLink: {
    color: "var(--fg)",
    textDecoration: "underline",
    textDecorationColor: "color-mix(in oklab, var(--accent) 60%, transparent)",
    textUnderlineOffset: 3,
    textDecorationThickness: 1.5,
  },
  aside: {
    borderLeft: "1px solid var(--border)",
    paddingLeft: 36,
  },
  stackGroups: { display: "flex", flexDirection: "column", gap: 10 },
  stackGroup: { display: "flex", flexDirection: "column", gap: 6 },
  stackLabel: {
    fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 500,
    letterSpacing: "0.06em", textTransform: "uppercase",
    color: "var(--fg-quaternary)",
  },
  tagWrap: { display: "flex", gap: 6, flexWrap: "wrap" },
  contactRow: { display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" },
  socialRow: { display: "flex", gap: 4, flexWrap: "wrap", marginLeft: -8 },
};

function SiteFooter() {
  return (
    <footer style={sfStyles.foot}>
      <div style={sfStyles.inner}>
        <div style={sfStyles.brand}>
          <span style={sfStyles.brandMark} aria-hidden="true">
            <svg viewBox="0 0 64 64" width="28" height="28" fill="none">
              <text x="32" y="40" textAnchor="middle"
                    fontFamily="JetBrains Mono, ui-monospace, Menlo, Consolas, monospace"
                    fontSize="20" fontWeight="500"
                    fill="currentColor" letterSpacing="-.6">&lt;sv&gt;</text>
            </svg>
          </span>
          <span>© 2026 Spencer Voorhees</span>
        </div>
<div style={sfStyles.links}>
          <a href="https://blog.spencervoorhees.com">Writing</a>
          <a href="https://resume.spencervoorhees.com">Résumé</a>
          <a href="https://linkedin.com/in/spencervoorhees">LinkedIn</a>
        </div>
      </div>
    </footer>
  );
}
const sfStyles = {
  foot: {
    borderTop: "1px solid var(--border-subtle)",
    padding: "36px 0",
  },
  inner: {
    maxWidth: 1080, margin: "0 auto", padding: "0 max(20px, 5vw)",
    display: "flex", justifyContent: "space-between", alignItems: "center",
    gap: 24, flexWrap: "wrap",
    fontSize: 13, color: "var(--fg-tertiary)",
  },
  brand: {
    display: "flex", gap: 10, alignItems: "center",
    color: "var(--fg-secondary)", fontWeight: 500,
  },
  brandMark: { display: "inline-flex", color: "var(--fg-secondary)" },
  center: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-quaternary)" },
  builtWith: {},
  links: { display: "flex", gap: 20 },
};

window.AboutStrip = AboutStrip;
window.SiteFooter = SiteFooter;