const Hero = ({ accentHue }) => {
  return (
    <header id="top" className="k-hero" data-screen-label="Hero">
      <div className="k-hero__glow" aria-hidden="true" />
      <div className="k-hero__grid" aria-hidden="true" />

      <div className="k-container k-hero__inner">
        <div className="k-eyebrow">
          <span className="k-eyebrow__bar" />
          <span className="k-mono">// est. 2026 — independent application studio</span>
        </div>

        <h1 className="k-hero__title">
          Building software<br />
          that solves<br />
          <span className="k-hero__title-accent">real problems.</span>
        </h1>

        <p className="k-hero__sub">
          Kratos Applications is a small studio shipping focused, practical tools.
          No bloat, no buzzwords — software that earns its keep on day one.
        </p>

        <div className="k-hero__actions">
          <a href="#products" className="k-btn k-btn--primary" onClick={(e) => { e.preventDefault(); document.getElementById('products')?.scrollIntoView({ behavior: 'smooth' }); }}>
            See our applications
            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="square"/></svg>
          </a>
          <a href="#about" className="k-btn k-btn--ghost" onClick={(e) => { e.preventDefault(); document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }); }}>
            Read our philosophy
          </a>
        </div>

        <div className="k-hero__strip" role="group" aria-label="Studio status">
          <div className="k-strip__item">
            <span className="k-dot k-dot--live" />
            <span className="k-mono">Building 3 active applications</span>
          </div>
          <span className="k-strip__sep" aria-hidden="true" />
          <div className="k-strip__item">
            <span className="k-strip__bar" aria-hidden="true" />
            <span className="k-mono">Focused on real-world utility</span>
          </div>
          <span className="k-strip__sep" aria-hidden="true" />
          <div className="k-strip__item">
            <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 1l4 2v3c0 2.5-1.7 4.4-4 5-2.3-.6-4-2.5-4-5V3l4-2z" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
            <span className="k-mono">Private development infrastructure</span>
          </div>
        </div>

        <div className="k-hero__meta">
          <div className="k-meta">
            <div className="k-meta__num">3</div>
            <div className="k-meta__label k-mono">applications in development</div>
          </div>
          <div className="k-meta__sep" aria-hidden="true" />
          <div className="k-meta">
            <div className="k-meta__num">2026</div>
            <div className="k-meta__label k-mono">studio established</div>
          </div>
          <div className="k-meta__sep" aria-hidden="true" />
          <div className="k-meta">
            <div className="k-meta__num">100%</div>
            <div className="k-meta__label k-mono">independently funded</div>
          </div>
        </div>
      </div>
    </header>
  );
};

window.Hero = Hero;