"use client";

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { ChevronDown, MapPin } from 'lucide-react';

export default function Hero() {
  const t = useTranslations('Hero');

  const openWhatsApp = () => {
    const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
    window.open(`https://wa.me/${phone}`, '_blank');
  };

  return (
    <section
      id="hero"
      className="relative w-full h-screen flex items-center justify-center overflow-hidden"
      style={{ background: '#080D18' }}
    >
      {/* ── Ambient gradient blobs ───────────────────── */}
      <div className="absolute inset-0 overflow-hidden">
        <motion.div
          animate={{ x: [0, 60, -20, 0], y: [0, -50, 30, 0], scale: [1, 1.15, 0.95, 1] }}
          transition={{ duration: 28, repeat: Infinity, ease: 'easeInOut' }}
          className="absolute -top-56 -left-56 w-[700px] h-[700px] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(255,90,54,0.28) 0%, transparent 65%)' }}
        />
        <motion.div
          animate={{ x: [0, -80, 50, 0], y: [0, 70, -30, 0], scale: [1, 0.85, 1.2, 1] }}
          transition={{ duration: 32, repeat: Infinity, ease: 'easeInOut', delay: 6 }}
          className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(0,191,165,0.22) 0%, transparent 65%)' }}
        />
        <motion.div
          animate={{ x: [0, 100, -60, 0], y: [0, -80, 50, 0], scale: [1, 1.3, 0.85, 1] }}
          transition={{ duration: 22, repeat: Infinity, ease: 'easeInOut', delay: 12 }}
          className="absolute top-1/2 right-1/3 w-[400px] h-[400px] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(255,168,39,0.18) 0%, transparent 65%)' }}
        />
      </div>

      {/* Grain overlay */}
      <div
        className="absolute inset-0 z-[1] opacity-[0.035] pointer-events-none"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        }}
      />

      {/* ── Content ──────────────────────────────────── */}
      <div className="relative z-10 container mx-auto px-6 flex flex-col items-center text-center">

        {/* Location */}
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7 }}
          className="text-[11px] tracking-[0.45em] uppercase text-coral font-bold mb-10"
        >
          Akyaka &nbsp;·&nbsp; Gökova Körfezi
        </motion.p>

        {/* Brand name — static gradient, no shimmer */}
        <motion.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.15 }}
          className="font-heading font-black uppercase tracking-tight leading-none gradient-text-warm mb-4"
          style={{ fontSize: 'clamp(3rem, 8vw, 6.5rem)' }}
        >
          KOZMOS
        </motion.h1>

        {/* Thin divider */}
        <motion.div
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ duration: 0.8, delay: 0.35 }}
          className="w-16 h-px mb-5"
          style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)' }}
        />

        {/* Subtitle */}
        <motion.p
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.45 }}
          className="text-sm md:text-base tracking-[0.55em] uppercase text-white/40 font-medium mb-6"
        >
          Beach &amp; More
        </motion.p>

        {/* Tagline */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="text-white/55 text-sm md:text-base max-w-xs leading-relaxed mb-12"
        >
          {t('tagline')}
        </motion.p>

        {/* CTAs */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.75 }}
          className="flex flex-col sm:flex-row gap-3"
        >
          <button
            onClick={openWhatsApp}
            className="px-8 py-3.5 rounded-full font-bold text-sm tracking-wider text-white transition-all duration-300 hover:scale-105 hover:shadow-[0_0_32px_rgba(255,90,54,0.45)]"
            style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
          >
            {t('cta_reservation')}
          </button>

          <a
            href="#contact"
            className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-full text-sm tracking-wider font-medium text-white/70 border border-white/15 hover:border-white/35 hover:text-white transition-all duration-300"
          >
            <MapPin size={14} />
            {t('cta_location')}
          </a>
        </motion.div>
      </div>

      {/* ── Wave divider ─────────────────────────────── */}
      <div className="absolute bottom-0 left-0 w-full z-10 leading-none">
        <svg
          viewBox="0 0 1440 72"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="none"
          className="w-full h-[72px]"
        >
          <path
            d="M0,36 C240,72 480,0 720,36 C960,72 1200,0 1440,36 L1440,72 L0,72 Z"
            fill="#FFF8EE"
          />
        </svg>
      </div>

      {/* Scroll cue */}
      <motion.div
        className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 text-white/35"
        animate={{ y: [0, 7, 0] }}
        transition={{ repeat: Infinity, duration: 1.8 }}
      >
        <a href="#about" aria-label="Scroll down">
          <ChevronDown size={24} />
        </a>
      </motion.div>
    </section>
  );
}