// Hero.jsx
const Hero = () => (
  <header className="cc-hero">
    <HeroBadge>Independent Software Studio · Est. 2024</HeroBadge>
    <h1 className="cc-hero-title">
      We build software<br/>
      <span className="cc-title-italic">people love.</span>
    </h1>
    <p className="cc-hero-sub">
      Constructive Creativity is a multi-product software studio crafting thoughtful tools across mobile, desktop, and AI. From family-safe apps to professional creative software.
    </p>
    <div className="cc-hero-ctas">
      <Button href="#products" variant="primary">View products</Button>
      <Button href="#contact" variant="ghost">Start a project</Button>
    </div>

    <div className="cc-hero-metrics">
      <div className="cc-metric">
        <div className="cc-metric-value">2<em>×</em></div>
        <div className="cc-metric-label">Products</div>
      </div>
      <div className="cc-metric">
        <div className="cc-metric-value">3<em>+</em></div>
        <div className="cc-metric-label">Platforms</div>
      </div>
      <div className="cc-metric">
        <div className="cc-metric-value"><em>AI</em></div>
        <div className="cc-metric-label">Native</div>
      </div>
      <div className="cc-metric">
        <div className="cc-metric-value">∞</div>
        <div className="cc-metric-label">Iterations</div>
      </div>
    </div>
  </header>
);
window.Hero = Hero;