import Link from "next/link";
import type { CommonContent, HomeContent } from "@/content/types";
import type { Locale } from "@/lib/i18n";

type HeroSectionProps = {
  locale: Locale;
  home: HomeContent;
  common: CommonContent;
};

export default function HeroSection({ locale, home, common }: HeroSectionProps) {
  return (
    <section className="hero panel">
      <p className="eyebrow">{home.kicker}</p>
      <h1>{home.title}</h1>
      <p className="lead">{home.description}</p>

      <div className="cta-row">
        <Link href={`/${locale}/contact`} className="cta-btn">
          {home.primaryCta}
        </Link>
        <Link href={`/${locale}/about`} className="ghost-btn">
          {common.nav.about}
        </Link>
      </div>

      <div className="stat-grid">
        {home.highlights.map((item) => (
          <article key={item.label} className="stat-card">
            <span className="stat-value">{item.value}</span>
            <span className="stat-label">{item.label}</span>
          </article>
        ))}
      </div>
    </section>
  );
}