import Image from 'next/image';
import { Button } from '@/components/ui/Button';
import { Container } from '@/components/ui/Container';
import { useMessages } from '@/i18n/client';

interface CtaBannerProps {
  onGetStarted: () => void;
  onViewPricing?: () => void;
}

export function CtaBanner({ onGetStarted, onViewPricing }: CtaBannerProps) {
  const t = useMessages().home.cta;
  return (
    <section id="pricing" className="relative isolate overflow-hidden bg-night-950 text-white">
      <div className="absolute inset-0 -z-10">
        <Image
          src="/images/cta_portal.jpg"
          alt=""
          fill
          sizes="100vw"
          className="object-cover object-[70%_50%] opacity-60 md:opacity-100"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-night-950 via-night-950/70 to-transparent" />
      </div>

      <Container className="flex min-h-[440px] items-center py-20 sm:min-h-[480px]">
        <div className="max-w-[480px]">
          <p className="eyebrow text-white/60">{t.eyebrow}</p>
          <h2 className="mt-5 text-[34px] leading-[1.1] font-semibold tracking-[-0.025em] sm:text-[44px]">
            {t.title[0]}
            <br />
            {t.title[1]}
          </h2>
          <p className="mt-5 max-w-[380px] text-[15px] leading-relaxed text-white/70">
            {t.text}
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-x-8 gap-y-4">
            <Button variant="light" withArrow onClick={onGetStarted}>
              {t.start}
            </Button>
            {onViewPricing && (
              <button
                type="button"
                onClick={onViewPricing}
                className="text-sm font-medium text-white underline decoration-white/40 underline-offset-[6px] transition-colors hover:decoration-white"
              >
                {t.pricing}
              </button>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}