import Image from "next/image";
import ScrollReveal from "@/components/ScrollReveal";

interface CtaBandProps {
  lang: string;
}

export default function CtaBand({ lang }: CtaBandProps) {
  return (
    <section className="relative py-28 overflow-hidden">
      <div
        className="absolute inset-0 animate-gradient-pan"
        style={{
          background:
            "linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
        }}
      />
      <div className="absolute inset-0 opacity-[0.04]">
        <Image
          src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
          alt=""
          fill
          sizes="100vw"
          className="object-cover"
        />
      </div>

      <div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
        <ScrollReveal>
          <span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
            {lang === "en" ? "Get Started" : "Hemen Başlayın"}
          </span>
          <h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
            {lang === "en" ? (
              <>Are you ready to plan<br />your dream vacation?</>
            ) : (
              <>Hayalindeki tatili<br />planlamaya hazır mısın?</>
            )}
          </h2>
          <p className="text-white/50 mb-10 text-base leading-relaxed">
            {lang === "en"
              ? "The wind is calling you. Book your spot now and become a part of this unique experience."
              : "Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol."}
          </p>

        </ScrollReveal>
      </div>
    </section>
  );
}