// Hero — full-bleed dynamic infrastructure background, large display headline, CTAs.

function HeroBackground() {
  // SVG-based "live infrastructure" — animated grid, flow nodes, dashboard tiles, data bars.
  return (
    <div className="so-hero-bg" aria-hidden="true">
      {/* base grid */}
      <div className="so-hero-grid"></div>

      {/* floating system tiles — parallax */}
      <div className="so-hero-tiles">
        <div className="tile tile--board" style={{ '--x': '10%', '--y': '18%', '--d': '0s' }}>
          <div className="tile-h"><span className="dot"></span>jira · sprint-42</div>
          <div className="tile-rows">
            <div className="row"><span className="pill warn">in-review</span><span>ticket-1042</span></div>
            <div className="row"><span className="pill info">queued</span><span>ticket-1044</span></div>
            <div className="row"><span className="pill ok">done</span><span>ticket-1039</span></div>
          </div>
        </div>

        <div className="tile tile--metric" style={{ '--x': '78%', '--y': '14%', '--d': '0.4s' }}>
          <div className="tile-label">SLA · 24h</div>
          <div className="tile-metric">99.94%</div>
          <div className="tile-bars">
            {Array.from({ length: 14 }).map((_, i) => (
              <span key={i} style={{ height: `${30 + Math.sin(i) * 30 + i * 2}%`, animationDelay: `${i * 80}ms` }}/>
            ))}
          </div>
        </div>

        <div className="tile tile--flow" style={{ '--x': '6%', '--y': '70%', '--d': '0.2s' }}>
          <div className="tile-label">n8n · intake-flow</div>
          <svg viewBox="0 0 240 100" width="100%" height="80">
            <g fill="#11151C" stroke="var(--border-strong)" strokeWidth="1">
              <rect x="6" y="36" width="46" height="26" rx="4"/>
              <rect x="98" y="10" width="46" height="26" rx="4"/>
              <rect x="98" y="62" width="46" height="26" rx="4"/>
              <rect x="188" y="36" width="46" height="26" rx="4"/>
            </g>
            <g fill="var(--signal)">
              <circle cx="29" cy="49" r="2"/>
              <circle cx="121" cy="23" r="2"/>
              <circle cx="121" cy="75" r="2"/>
              <circle cx="211" cy="49" r="2"/>
            </g>
            <g fill="none" stroke="var(--signal)" strokeWidth="1.2" strokeDasharray="3 4" className="so-dash">
              <path d="M 52 49 Q 75 49 98 23"/>
              <path d="M 52 49 Q 75 49 98 75"/>
              <path d="M 144 23 Q 165 23 188 49"/>
              <path d="M 144 75 Q 165 75 188 49"/>
            </g>
          </svg>
        </div>

        <div className="tile tile--db" style={{ '--x': '74%', '--y': '64%', '--d': '0.6s' }}>
          <div className="tile-label">airtable · ops_log</div>
          <div className="tile-grid">
            {Array.from({ length: 12 }).map((_, i) => (
              <div key={i} className="cell" style={{ animationDelay: `${i * 100}ms`, opacity: 0.3 + (i % 5) * 0.15 }}/>
            ))}
          </div>
        </div>

        <div className="tile tile--agent" style={{ '--x': '44%', '--y': '78%', '--d': '0.8s' }}>
          <div className="tile-label">agent · rag-intake-v3</div>
          <div className="tile-stream">
            <div>&gt; received intake</div>
            <div>&gt; matching playbook…</div>
            <div className="ok">&gt; proposal compiled <span className="cur">_</span></div>
          </div>
        </div>
      </div>

      {/* vignette + noise */}
      <div className="so-hero-vignette"></div>
    </div>
  );
}

function Hero() {
  const cfg = window.SO_CONFIG || {};
  const brand = cfg.brand || {};
  return (
    <section className="so-hero">
      <HeroBackground />
      <div className="so-hero-content">
        <div className="so-hero-meta">
          <span className="so-pulse-dot"></span>
          <span className="so-mono-label">{(brand.company || 'signalOPS').toUpperCase()} · LIVE OPERATIONAL INFRASTRUCTURE</span>
        </div>
        <h1 className="so-hero-title">
          Compile operations<br/>
          <span className="muted">into systems.</span>
        </h1>
        <p className="so-hero-sub">
          {brand.company || 'signalOPS'} {brand.lab || 'DIGITAL Lab'} builds the bridge between your tools, your data, and your team.
          {brand.project ? ` ${brand.project} sits beneath the lab as the project line.` : ''}
        </p>
        <div className="so-hero-ctas">
          <a className="so-cta so-cta--primary so-cta--lg" href="#contact">Wire a call <span className="arrow">→</span></a>
          <a className="so-cta so-cta--outline so-cta--lg" href="#contact">Send the brief</a>
        </div>
        <div className="so-hero-stats">
          <div><span className="num">native</span><span className="lab">connector coverage</span></div>
          <div><span className="num">412h</span><span className="lab">avg. monthly time saved</span></div>
          <div><span className="num">14d</span><span className="lab">audit → first flow</span></div>
        </div>
      </div>
    </section>
  );
}

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