/* NeuralVault — Hero.jsx
   Simple agency intro: positioning + three building-block teasers.
   Detailed diagrams live one section down, in <Verticals>. */

function HeroBlocks() {
  const items = [
    { id: "v01", num: "01", title: "Attention & Scale", sub: "Velocity ops · traffic · retention" },
    { id: "v02", num: "02", title: "Engineer the Data", sub: "Pipelines · edge storage · telemetry" },
    { id: "v03", num: "03", title: "Computer Vision & ML", sub: "Bespoke models · shipped to hardware" },
  ];
  return (
    <div className="hero-blocks">
      {items.map((it) => (
        <a key={it.id} href={`#${it.id}`} className="hero-block">
          <span className="hb-num mono">{it.num}</span>
          <span className="hb-title">{it.title}</span>
          <span className="hb-sub mono">{it.sub}</span>
          <span className="hb-arrow" aria-hidden="true">
            <svg viewBox="0 0 16 16" width="14" height="14">
              <path d="M4 12L12 4M12 4H6M12 4V10"
                    stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="square" />
            </svg>
          </span>
        </a>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <header className="hero hero-simple" id="dashboard" data-screen-label="01 Studio">
      <div className="grid-bg" />

      <div className="wrap hero-simple-inner">
        <Eyebrow>AI Agency · Est. 2025</Eyebrow>

        <h1 className="manifesto">
          Three building blocks<br />
          <span className="accent">for the modern tech stack</span>
        </h1>

        <p className="lede">
          NeuralVault is an AI agency for companies and individuals stepping into modern tech.
          We work in three fundamentals — done quietly, in order, and instrumented end-to-end.
          Principles before dashboards.
        </p>

        <div className="cta-row">
          <Button variant="primary" arrow href="#verticals">See the fundamentals</Button>
          <Button variant="ghost" href="#portal">Make an inquiry</Button>
        </div>

        <HeroBlocks />
      </div>

      <SectionRef pos="tr" ref_="SYS_REF · 09.23.26-A" />
    </header>
  );
}

Object.assign(window, { Hero, HeroBlocks });