// Hero.jsx — hero unit: badge, headline, sub, CTAs, stat row
// `enhanced` adds count-up stats + a live KPI tile (see Improvements.jsx)
const HERO_STATS = [
  { num: '25+', label: 'Years of experience' },
  { num: '3', label: 'Engagement tiers' },
  { num: '90', label: 'Day transformation' },
  { num: '€500k+', label: 'Ideal revenue stage' },
];

function Hero({ enhanced }) {
  const Stats = (
    <div className="hero-stats">
      {HERO_STATS.map((s) => (
        enhanced
          ? <AnimatedStat key={s.label} value={s.num} label={s.label} run={true} />
          : (
            <div className="stat-item" key={s.label}>
              <span className="stat-num">{s.num}</span>
              <span className="stat-label">{s.label}</span>
            </div>
          )
      ))}
    </div>
  );

  const Main = (
    <div className={enhanced ? 'hero-main' : ''}>
      <div className="hero-badge">⚙️ &nbsp; Fractional COO · E-commerce Operations</div>
      <h1 className="hero-title">Scale your ecom brand<br /><span className="accent">without the chaos.</span></h1>
      <p className="hero-sub">
        A senior operational excellence partner for growing e-commerce brands that need
        structure, execution discipline, and scalable operating systems.
      </p>
      <p className="hero-detail">
        Built on 25+ years of complex operational transformation — Lean Six Sigma, global
        performance systems, strategy deployment, KPI management, and leadership coaching.
      </p>
      <a className="hero-btn" href="#contact">Book Operational Diagnostic →</a>
      <a className="hero-btn-ghost" href="#scale-model">See the SCALE™ Model</a>
      {Stats}
    </div>
  );

  return (
    <header className="hero-wrap">
      {enhanced
        ? <div className="hero-grid">{Main}<HeroKpiTile /></div>
        : Main}
    </header>
  );
}

window.Hero = Hero;