import Navbar from "./Navbar";
import RadarBeacon from "./RadarBeacon";
import { useTranslation } from 'react-i18next';

export default function Hero({ onCtaClick, onLoginClick }) {
  const { t } = useTranslation();

  return (
      <section className="nk-hero">
        <div className="nk-grid" />
        <div className="nk-glow" />

        <RadarBeacon />
        <Navbar onLoginClick={onLoginClick || onCtaClick} />

        <div className="nk-hero-text">
          <span className="nk-eyebrow">{t('landing.eyebrow')}</span>
          <h1 className="nk-h1">
            {t('landing.heroTitle')}
            <br />
            <span className="nk-accent">{t('landing.heroAccent')}</span>
          </h1>
          <p className="nk-lead">
            {t('landing.heroLead')}
          </p>
          <div className="nk-lead-spacer" />
          <div className="nk-lead-spacer" />
          <div className="nk-cta-row">
            <button className="nk-cta-primary" onClick={onCtaClick}>
              {t('landing.startSearch')}
              <span className="nk-arrow">→</span>
            </button>
          </div>
        </div>
      </section>
  );
}