import { useTranslation } from 'react-i18next';
import { trackEvent } from '../../lib/analytics';

const HOME_SECTION_HEADING_CLASS =
  'text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100';
const HOME_BODY_CLASS = 'text-base leading-relaxed text-warm-600 dark:text-warm-400';
const HOME_PRIMARY_BUTTON_CLASS =
  'border border-[#d27a11] bg-[#f09a22] text-navy-950 rounded-lg font-semibold hover:bg-[#df8614] transition-colors text-base shadow-lg shadow-[#7a3905]/25 text-center';

export default function HomeFinalCta({
  onOpenDashboard,
  trackingLocation = 'bottom',
  className = '',
}: {
  onOpenDashboard: () => void;
  trackingLocation?: string;
  className?: string;
}) {
  const { t } = useTranslation();

  return (
    <div className={`text-center max-w-4xl mx-auto ${className}`.trim()}>
      <h2 className={`${HOME_SECTION_HEADING_CLASS} mb-4 leading-snug`}>{t('home.ctaTitle')}</h2>
      <p className={`${HOME_BODY_CLASS} mb-8 max-w-xl mx-auto`}>{t('home.ctaDescription')}</p>
      <button
        onClick={() => {
          trackEvent('CTA Click', { location: trackingLocation, label: 'explore_map' });
          onOpenDashboard();
        }}
        className={`w-full sm:w-auto px-8 py-4 ${HOME_PRIMARY_BUTTON_CLASS}`}
      >
        {t('home.exploreTheMap')}
      </button>
    </div>
  );
}
