// Hero.jsx — first impression. Plain bg + subtle radial glow. No availability badge.
// Three variants exposed via Tweaks.

function Hero({ variant = "default" }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.default;

  return (
    <section className="hero-section" style={heroStyles.section}>
      <div style={heroStyles.glow} aria-hidden="true"></div>
      <div style={heroStyles.dots} aria-hidden="true"></div>

      <div style={heroStyles.inner}>
        <div style={heroStyles.meta}>
          <span style={heroStyles.metaDot}></span>
          <span style={heroStyles.metaMono}>
            solutions architect &nbsp;·&nbsp; software engineer &nbsp;·&nbsp; 2026
          </span>
        </div>

        <h1 style={heroStyles.h1}>{v.h1}</h1>

        <p style={heroStyles.lede}>{v.lede}</p>

        <div style={heroStyles.cta}>
          <a className="btn btn--primary btn--lg"
             href="https://blog.spencervoorhees.com">
            Read the writing
            <i data-lucide="arrow-up-right" style={{ width: 14, height: 14 }}></i>
          </a>
          <a className="btn btn--ghost btn--lg" href="#experiments">
            See experiments
          </a>
        </div>
      </div>
    </section>
  );
}

const HERO_VARIANTS = {
  default: {
    h1: (
      <React.Fragment>
        Software systems,<br />
        drawn with <span style={{ color: "var(--accent)" }}>intent</span>.
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        I'm a solutions architect and software engineer. Most of my day job lives
        behind NDAs, so this site is what's left: things I'm writing,
        small tools I built for fun, and a place to say hello.
      </React.Fragment>
    ),
  },
  byline: {
    h1: (
      <React.Fragment>
        Hi, I'm Spencer. I build platforms<br />
        teams stay <span style={{ color: "var(--accent)" }}>on</span>.
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        Solutions architect and software engineer. My day job lives mostly
        behind NDAs, so this site collects what isn't: writing, tools I built for
        fun, and a way to get in touch.
      </React.Fragment>
    ),
  },
  terse: {
    h1: (
      <React.Fragment>
        Architect. Engineer.<br />
        <span style={{ color: "var(--accent)" }}>Pragmatic.</span>
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        The day job is mostly under NDA. This site is the rest of it: writing,
        experiments, and a way to say hello.
      </React.Fragment>
    ),
  },
};

const heroStyles = {
  section: {
    position: "relative",
    padding: "calc(var(--sec-y, 96px) + 24px) 0 var(--sec-y, 96px)",
    overflow: "hidden",
  },
  glow: {
    position: "absolute", inset: 0, pointerEvents: "none",
    background: `
      radial-gradient(900px 420px at 78% -8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 65%),
      radial-gradient(700px 320px at -4% 110%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%)
    `,
  },
  dots: {
    position: "absolute", inset: 0, pointerEvents: "none",
    backgroundImage:
      "radial-gradient(circle, color-mix(in oklab, var(--fg) 8%, transparent) 1px, transparent 1.2px)",
    backgroundSize: "28px 28px",
    backgroundPosition: "0 0",
    maskImage: "radial-gradient(900px 480px at 50% 30%, #000 30%, transparent 80%)",
    WebkitMaskImage: "radial-gradient(900px 480px at 50% 30%, #000 30%, transparent 80%)",
    opacity: 0.55,
  },
  inner: {
    position: "relative",
    maxWidth: 1080, margin: "0 auto", padding: "0 max(20px, 5vw)",
  },
  meta: {
    display: "inline-flex", alignItems: "center", gap: 10,
    fontFamily: "var(--font-mono)",
    fontSize: 12, color: "var(--fg-secondary)",
    padding: "6px 14px 6px 12px",
    background: "color-mix(in oklab, var(--surface) 60%, transparent)",
    border: "1px solid var(--border-subtle)",
    borderRadius: 999,
    marginBottom: 32,
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
    whiteSpace: "nowrap",
    letterSpacing: "-0.011em",
  },
  metaDot: {
    width: 6, height: 6, borderRadius: "50%",
    background: "var(--accent)",
    boxShadow: "0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent)",
  },
  metaSep: { color: "var(--fg-quaternary)" },
  metaMono: { color: "var(--fg-secondary)" },
  h1: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(40px, 5.8vw, 76px)",
    fontWeight: 600, lineHeight: 1.04, letterSpacing: "-0.026em",
    color: "var(--fg)", margin: 0, textWrap: "balance",
    maxWidth: 920,
  },
  lede: {
    marginTop: 28, maxWidth: 600,
    fontSize: 19, lineHeight: 1.55, color: "var(--fg-secondary)",
    letterSpacing: "-0.011em",
  },
  cta: { marginTop: 40, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" },
};

window.Hero = Hero;