'use client';

import { Link } from '@/core/lib/navigation';
import { useTranslations } from '@/core/lib/translations';
import { Button } from '@/components/ui/button';

/** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
export function HeroSection({ storeName }: { storeName?: string | null }) {
  const t = useTranslations('home');
  const tc = useTranslations('common');

  return (
    <section className="bg-muted">
      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
        <h1 className="text-foreground text-4xl font-bold ltr:tracking-tight sm:text-5xl">
          {t('welcomeTo')} {storeName || tc('store')}
        </h1>
        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
          {t('heroSubtitle')}
        </p>
        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
          <Link href="/products">{tc('shopNow')}</Link>
        </Button>
      </div>
    </section>
  );
}