'use client';

import { Link } from '@/core/lib/navigation';
import { useTranslations } from '@/core/lib/translations';

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

  return (
    <section>
      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
      <h1>
        {t('welcomeTo')} {storeName || tc('store')}
      </h1>
      <p>{t('heroSubtitle')}</p>
      <Link href="/products">{tc('shopNow')}</Link>
    </section>
  );
}