import Link from "next/link";
import ComingSoonPanel from "@/components/ComingSoonPanel";
import type { HomeContent, HomeVariantContent } from "@/content/types";
import type { Locale } from "@/lib/i18n";
import { getEmailHref, getModeValue, isComingSoonMode } from "@/lib/site";

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

export default function HeroSection({ locale, home }: HeroSectionProps) {
  const activeHome: HomeVariantContent = getModeValue(home);
  const comingSoon = isComingSoonMode();
  const emailHref = getEmailHref();

  if (comingSoon) {
    return <ComingSoonPanel content={activeHome} />;
  }

  return (
    <section className="hero panel">
      <p className="availability-badge">{activeHome.badge}</p>
      <p className="eyebrow">{activeHome.kicker}</p>
      <h1>{activeHome.title}</h1>
      <p className="lead">{activeHome.description}</p>

      <div className="cta-row">
        {emailHref ? (
          <a href={emailHref} className="cta-btn">
            {activeHome.primaryCta}
          </a>
        ) : (
          <span className="cta-btn is-disabled" aria-disabled="true">
            {activeHome.primaryCta}
          </span>
        )}
        <Link href={`/${locale}/about`} className="ghost-btn">
          {activeHome.secondaryCta}
        </Link>
      </div>

      <div className="stat-grid">
        {activeHome.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>
  );
}