src/components/Hero.tsx

import type { BenchmarkStats } from '@/lib/types'

export default function Hero({ stats, guardrailCount }: { stats: BenchmarkStats; guardrailCount: number }) {
  return (
    <div className="page-intro">
      <div className="page-intro-inner">
        <h1 id="hero-title" style={{
          fontFamily: 'var(--font-lato), sans-serif',
          fontSize: 'clamp(1.6rem, 3.2vw, 2.4rem)',
          fontWeight: 900,
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          color: 'var(--text-0)',
          margin: 0,
        }}>
          Responsible AI Bench
        </h1>
        <div className="page-intro-row">
          <p className="page-intro-desc">
            Independent evaluation of large language models and safety guardrails on localised safety,
            RAG knowledge robustness, and demographic fairness —
            benchmarked for Singapore deployment contexts.
          </p>
          <div className="page-intro-stats">
            <div className="pi-stat">
              <span className="pi-num">{stats.totalModels}</span>
              <span className="pi-label">Models</span>
            </div>
            <div className="pi-stat">
              <span className="pi-num">{guardrailCount}</span>
              <span className="pi-label">Guardrails</span>
            </div>
            <div className="pi-stat">
              <span className="pi-num">{stats.lastUpdated}</span>
              <span className="pi-label">Last Run</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}