"use client";

import { Button } from "@/components/ui/Button";
import { FloatingHearts } from "@/components/ui/FloatingHearts";
import { HeroLogo } from "@/components/ui/HeroLogo";
import { ChevronDown } from "lucide-react";
import type { SiteContent } from "@/types/content";

interface HeroProps {
  data: SiteContent["hero"];
}

export function Hero({ data: hero }: HeroProps) {

  return (
    <section className="relative flex min-h-svh items-center justify-center overflow-hidden bg-[#050505]">
      {/* Animated gradient background */}
      <div className="hero-bg-gradient absolute inset-0" />

      {/* Glow orbs */}
      <div
        className="hero-glow-orb"
        style={{
          width: "500px",
          height: "500px",
          top: "-10%",
          left: "50%",
          transform: "translateX(-50%)",
          background: "radial-gradient(circle, rgba(201, 169, 110, 0.12), transparent 70%)",
        }}
      />
      <div
        className="hero-glow-orb"
        style={{
          width: "300px",
          height: "300px",
          bottom: "10%",
          right: "10%",
          background: "radial-gradient(circle, rgba(201, 169, 110, 0.08), transparent 70%)",
          animationDelay: "3s",
        }}
      />

      {/* Floating hearts */}
      <FloatingHearts />

      {/* Content */}
      <div className="section-container relative z-10 text-center">
        <div className="hero-logo relative mx-auto mb-10 flex items-center justify-center" style={{ width: 220, height: 181 }}>
          {/* Soft ambient glow behind heart */}
          <div className="absolute -inset-10 rounded-full blur-[80px]" style={{ background: "radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%)" }} />
          <div className="hero-logo-heartbeat relative">
            <HeroLogo
              size={220}
              className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)]"
            />
          </div>
        </div>

        <h1 className="hero-title font-display text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
          <span className="gradient-text">{hero.headline}</span>
        </h1>

        <p className="hero-subtitle mx-auto mt-6 max-w-lg text-lg text-[#b8a080] sm:text-xl">
          {hero.subheadline}
        </p>

        <div className="hero-cta mt-12">
          <Button size="lg" onClick={() => window.dispatchEvent(new Event("open-booking"))}>
            {hero.ctaText}
          </Button>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="hero-cta absolute bottom-8 left-1/2 -translate-x-1/2">
        <a
          href="#about"
          className="flex flex-col items-center gap-1 text-neutral-600 transition-colors hover:text-gold-light"
        >
          <span className="text-xs uppercase tracking-widest">Scroll</span>
          <ChevronDown size={20} className="animate-bounce" />
        </a>
      </div>
    </section>
  );
}
