moybeach-main/components/Hero.tsx

"use client";

import { motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import Image from "next/image";

export default function Hero({ dict, dbHeroMedia }: { dict: any, dbHeroMedia?: any }) {
  const words = ["MOY", "BEACH"];

  return (
    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">

      {/* Background Media */}
      <div className="absolute inset-0">
        {dbHeroMedia?.type === 'video' ? (
          <video
            src={dbHeroMedia.url}
            autoPlay
            loop
            muted
            playsInline
            className="w-full h-full object-cover object-center"
          />
        ) : (
          <Image
            src={dbHeroMedia?.url || "https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=85&w=2400"}
            alt="Moy Beach Akyaka"
            fill
            className="object-cover object-center"
            priority
            sizes="100vw"
          />
        )}
      </div>

      {/* Multi-layer gradient for depth */}
      <div className="absolute inset-0 bg-gradient-to-b from-sea-dark/55 via-black/15 to-sea-dark/70 z-10" />
      <div className="absolute inset-0 bg-gradient-to-r from-sea-dark/20 via-transparent to-sea-dark/20 z-10" />

      {/* Main Content */}
      <div className="relative z-20 text-center px-4 max-w-5xl mx-auto">

        {/* Location badge */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.4, delay: 0.1 }}
          className="text-sand/60 text-[11px] md:text-xs uppercase tracking-[0.45em] mb-6 font-light"
        >
          Akyaka · Muğla · Türkiye
        </motion.p>

        {/* Decorative line */}
        <motion.div
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ duration: 0.7, delay: 0.25 }}
          className="w-12 h-px bg-coral mx-auto mb-8 origin-center"
        />

        {/* Main Title — word-by-word reveal */}
        <h1 className="text-[4.5rem] md:text-[6rem] lg:text-[10rem] font-serif text-white leading-none tracking-tight mb-6">
          {words.map((word, i) => (
            <span key={word} className="inline-block overflow-hidden">
              <motion.span
                initial={{ y: 110, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{
                  duration: 0.9,
                  delay: 0.4 + i * 0.2,
                  ease: [0.22, 1, 0.36, 1],
                }}
                className="inline-block"
              >
                {word}
              </motion.span>
              {i === 0 && (
                <span className="inline-block w-4 md:w-8 lg:w-12" />
              )}
            </span>
          ))}
        </h1>

        {/* Subtitle */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 1.0 }}
          className="text-lg md:text-2xl text-sand-light font-light tracking-wide mb-12 drop-shadow-md"
        >
          {dict.hero.subtitle}
        </motion.p>

        {/* CTA Buttons */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1.35 }}
          className="flex flex-wrap items-center justify-center gap-4"
        >
          <a
            href="#about"
            className="border border-white/50 hover:border-white text-white px-8 py-3.5 rounded-full text-sm tracking-widest uppercase font-medium transition-all hover:bg-white/10 backdrop-blur-sm"
          >
            {dict.hero.explore}
          </a>
        </motion.div>
      </div>

      {/* Scroll Indicator — direct child of section, correctly positioned */}
      <motion.a
        href="#about"
        className="absolute bottom-20 left-1/2 -translate-x-1/2 z-20 text-white flex flex-col items-center gap-2 cursor-pointer"
        initial={{ opacity: 0 }}
        animate={{ opacity: 0.65 }}
        transition={{ duration: 1, delay: 2.2 }}
        whileHover={{ opacity: 1 }}
        aria-label="Aşağı kaydır"
      >
        <span className="text-[9px] uppercase tracking-[0.35em] font-light">Kaydır</span>
        <motion.div
          animate={{ y: [0, 7, 0] }}
          transition={{
            duration: 1.6,
            repeat: Infinity,
            repeatType: "loop",
            ease: "easeInOut",
            delay: 2.6,
          }}
        >
          <ChevronDown size={18} />
        </motion.div>
      </motion.a>

      {/* Wave divider into About section */}
      <div className="absolute bottom-0 left-0 right-0 z-20 leading-none pointer-events-none">
        <svg
          viewBox="0 0 1440 56"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="none"
          className="w-full h-14 block"
        >
          <path
            d="M0,28 C360,56 720,0 1080,28 C1260,42 1380,14 1440,28 L1440,56 L0,56 Z"
            fill="#F4EFEB"
          />
        </svg>
      </div>
    </section>
  );
}