import { t } from '@/i18n';
import { SearchTrigger } from '@/components/layout/search-trigger';

/** Compact editorial hero: one headline, one line, the search box. The map right below is the real hero. */
export function Hero() {
  return (
    <section className="pb-4 pt-6 md:pb-6 md:pt-10">
      <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
        <div className="max-w-2xl">
          <h1 className="display text-3xl leading-tight text-ink md:text-5xl">{t('home.hero.title')}</h1>
          <p className="mt-2 max-w-xl text-base text-ink-2 md:text-lg">{t('home.hero.sub')}</p>
        </div>
        <div className="w-full md:max-w-md md:flex-1">
          <SearchTrigger variant="hero" />
        </div>
      </div>
    </section>
  );
}