const MetricIcon = ({ kind }) => {
  const common = { width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none', stroke: 'url(#metricGrad)', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', className: 'hstat-icon' };
  if (kind === 'users') return (
    <svg {...common}>
      <circle cx="12" cy="8" r="3.6" />
      <path d="M5 20c0-3.6 3.1-6.2 7-6.2s7 2.6 7 6.2" />
    </svg>
  );
  if (kind === 'supply') return (
    <svg {...common}>
      <path d="M12 3 21 7.5 12 12 3 7.5Z" />
      <path d="M3 12 12 16.5 21 12" />
      <path d="M3 16.5 12 21 21 16.5" />
    </svg>
  );
  return (
    <svg {...common}>
      <path d="M9.5 3h5M10.5 3v6.2L5.6 18a2 2 0 0 0 1.8 3h9.2a2 2 0 0 0 1.8-3l-4.9-8.8V3" />
      <path d="M7.8 14.5h8.4" />
    </svg>
  );
};

const METRICS = [
  { kind: 'users',  num: '2M', plus: '+', lbl: 'End-point Users' },
  { kind: 'supply', num: '4,000', plus: '+', lbl: 'Clients' },
  { kind: 'research', num: '1.2 M', plus: '+', lbl: 'public models with 500+ proprietary research models and 10K+ used as ferquently used base model' },
];

const Hero = () => (
  <section className="hero" id="top" data-screen-label="01 Hero">
    <div className="hero-glow" />
    <HeroViz />

    <svg width="0" height="0" aria-hidden="true" style={{position:'absolute'}}>
      <defs>
        <linearGradient id="metricGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#6080ff" />
          <stop offset="0.5" stopColor="#b264ff" />
          <stop offset="1" stopColor="#ff6fbf" />
        </linearGradient>
      </defs>
    </svg>

    <div className="hero-eyebrow">
      <span className="dot" />
      Enterprise AI Development Platform
    </div>

    <h1>
      Build <span className="gradient">Custom AI Models</span><br />
      Your Company Owns
    </h1>

    <p className="hero-sub">
      Model OS enables companies to build custom AI models that deliver better performance
      at lower cost, without sharing proprietary data with frontier AI providers.
    </p>

    <div className="hero-positioning">
      <p className="hero-positioning-line">
        <span className="hero-pos-strong">Don’t share your data with the big labs.</span>{' '}
        <span className="hero-pos-strong hero-pos-accent">Stop renting intelligence. Own it.</span>
      </p>
    </div>

    <div className="hero-ctas">
      <a className="btn btn-primary" href="demo.html">
        Request Access
        <span className="arrow">→</span>
      </a>
      <a className="btn btn-ghost" href="#explore">
        Explore
        <span className="arrow">→</span>
      </a>
    </div>

    <div className="hero-stats hero-stats--glass">
      {METRICS.map((m) => (
        <div className="hstat" key={m.lbl}>
          <MetricIcon kind={m.kind} />
          <div className="hstat-body">
            <div className="hstat-num gradient-text">{m.num}<span>{m.plus}</span></div>
            <div className="hstat-lbl">{m.lbl}</div>
          </div>
        </div>
      ))}
    </div>

    <a href="#explore" className="hero-scroll" aria-label="Scroll to explore">
      <span>Explore</span>
      <span className="hero-scroll-line" />
    </a>

    <div className="hero-updates" aria-label="Latest updates">
      <span className="hero-startx-kicker hero-updates-label">Latest updates</span>
      <div className="hero-startx">
        <div className="hero-startx-logo-wrap">
          <img src="assets/startx-logo.png" alt="StartX" className="hero-startx-logo" />
        </div>
        <div className="hero-startx-copy">
          <p>Model OS has officially been accepted into StartX.</p>
        </div>
      </div>
      <div className="hero-startx">
        <div className="hero-startx-logo-wrap">
          <img src="assets/images/nvidia-inception-badge.png" alt="NVIDIA Inception Program member" className="hero-startx-logo" />
        </div>
        <div className="hero-startx-copy">
          <p>Model OS has been accepted into the NVIDIA Inception Program.</p>
        </div>
      </div>
      <a className="hero-startx hero-startx--link" href="https://arxiv.org/abs/2609.31784" target="_blank" rel="noopener noreferrer">
        <div className="hero-startx-logo-wrap hero-startx-logo-wrap--photo">
          <img src="assets/images/research/neurips-2026-witness-overlap.png" alt="Witness Overlap NeurIPS 2026 paper" className="hero-startx-logo" />
        </div>
        <div className="hero-startx-copy">
          <span className="hero-startx-kicker">NeurIPS 2026 · arXiv:2609.31784 →</span>
          <p>NeurIPS Paper: Witness Overlap: Directional Provenance Inside Open-Weight Model Families</p>
        </div>
      </a>
    </div>
  </section>
);

window.Hero = Hero;