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

export default function Hero({ onCtaClick, onLoginClick }) {
  const { t } = useTranslation();
  const [hover, setHover] = useState(false);

  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-cta-row">
          <button
            className="nk-cta-primary"
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
            onClick={onCtaClick}
          >
            {t('landing.startSearch')}
            <span
              style={{
                marginLeft: 8,
                display: "inline-block",
                transform: hover ? "translateX(3px)" : "none",
                transition: "transform .2s",
              }}
            >
              →
            </span>
          </button>
        </div>
      </div>
    </section>
  );
}