app/frontend/src/components/Hero.tsx

import type { HeroContent } from "../content/types";

interface HeroProps {
  hero: HeroContent;
  demoMode: boolean;
}

export function Hero({ hero, demoMode }: HeroProps) {
  return (
    <section className="hero shell-block">
      <div className="hero-copy">
        <p className="section-kicker">{hero.eyebrow}</p>
        <h1>{hero.title}</h1>
        <p className="hero-statement">{hero.statement}</p>
        <p className="hero-trust">{hero.trustLine}</p>
        <div className="hero-actions">
          {hero.ctas.map((cta, index) => (
            <a
              key={cta.label}
              className={index === 0 ? "button primary" : "button ghost"}
              href={cta.href}
            >
              {cta.label}
            </a>
          ))}
        </div>
        <div className="hero-metrics">
          {hero.metrics.map((metric) => (
            <div key={metric.label} className="metric-card">
              <strong>{metric.value}</strong>
              <span>{metric.label}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="hero-visual">
        <div className="signal-panel">
          <div className="signal-grid" />
          <div className="signal-wave signal-wave-a" />
          <div className="signal-wave signal-wave-b" />
          <div className="signal-wave signal-wave-c" />
          <div className="signal-status">
            <span>routing clarity</span>
            <span>{demoMode ? "public-safe demo surface" : "live-ready surface"}</span>
          </div>
        </div>
      </div>
    </section>
  );
}