function Header({ data }) {
  return (
    <header style={hStyles.head}>
      <h1 style={hStyles.name}>{data.name}</h1>
      <div style={hStyles.title}>{data.title}</div>

      <p style={hStyles.summary}>{data.summary}</p>

      <div style={hStyles.contact}>
        <a href={`mailto:${data.contact.email}`} style={hStyles.link}>
          <i data-lucide="mail" style={hStyles.icon}></i>
          <span>{data.contact.email}</span>
        </a>
        <a href={`https://linkedin.com/${data.contact.linkedin}`} style={hStyles.link}>
          <svg viewBox="0 0 24 24" fill="currentColor" style={hStyles.iconSvg} 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>
          <span>linkedin.com/{data.contact.linkedin}</span>
        </a>
        <span style={hStyles.linkPlain}>
          <i data-lucide="map-pin" style={hStyles.icon}></i>
          <span>{data.contact.location}</span>
        </span>
      </div>

      <div
        className="stat-row"
        style={{ gridTemplateColumns: `repeat(${data.stats.length}, 1fr)` }}
      >
        {data.stats.map((s, i) => (
          <div
            key={i}
            className="stat"
            style={i === data.stats.length - 1 ? { borderRight: "none", paddingRight: 0 } : {}}
          >
            <div className="stat__value">
              {s.value}<span style={hStyles.unit}>{s.unit}</span>
            </div>
            <div className="stat__label">{s.label}</div>
          </div>
        ))}
      </div>
    </header>
  );
}

const hStyles = {
  head: { paddingTop: 72, paddingBottom: 48 },
  name: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(40px, 6vw, 60px)",
    fontWeight: 600,
    letterSpacing: "-0.024em",
    lineHeight: 1.02,
    margin: 0,
    color: "var(--fg)",
  },
  title: {
    marginTop: 8,
    fontFamily: "var(--font-display)",
    fontSize: 18,
    color: "var(--fg-secondary)",
    fontWeight: 500,
    letterSpacing: "-0.011em",
  },
  summary: {
    marginTop: 22,
    maxWidth: 600,
    fontSize: 16,
    lineHeight: 1.6,
    color: "var(--fg-secondary)",
    margin: "22px 0 0",
  },
  contact: {
    marginTop: 22,
    display: "flex",
    flexWrap: "wrap",
    gap: "10px 18px",
    fontSize: 13,
    color: "var(--fg-secondary)",
  },
  link: {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    color: "var(--accent)",
    textDecoration: "none",
  },
  linkPlain: {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    color: "var(--fg-tertiary)",
  },
  icon: { width: 13, height: 13 },
  iconSvg: { width: 13, height: 13, display: "block", flexShrink: 0, alignSelf: "center" },
  unit: {
    fontFamily: "var(--font-mono)",
    fontSize: 14,
    fontWeight: 500,
    color: "var(--fg-tertiary)",
    marginLeft: 1,
    letterSpacing: 0,
  },
};

window.Header = Header;