"use client";

import Image from "next/image";
import { siteContent } from "@/data/content";
import { BRAND } from "@/lib/constants";
import { Button } from "@/components/ui/Button";
import { FloatingHearts } from "@/components/ui/FloatingHearts";
import { ChevronDown } from "lucide-react";

export function Hero() {
  const { hero } = siteContent;

  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(225, 29, 72, 0.12), transparent 70%)",
        }}
      />
      <div
        className="hero-glow-orb"
        style={{
          width: "300px",
          height: "300px",
          bottom: "10%",
          right: "10%",
          background: "radial-gradient(circle, rgba(225, 29, 72, 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 h-[220px] w-[220px]">
          {/* Outer ambient glow */}
          <div className="absolute -inset-16 rounded-full bg-rose-500/8 blur-[60px]" />
          {/* Rose disc — makes black heart visible as silhouette */}
          <div
            className="absolute inset-2 rounded-full"
            style={{
              background: "radial-gradient(circle, rgba(225,29,72,0.45) 0%, rgba(225,29,72,0.18) 45%, transparent 70%)",
            }}
          />
          <Image
            src="/images/logo.png"
            alt={BRAND.name}
            width={220}
            height={220}
            priority
            unoptimized
            className="relative"
            style={{
              filter:
                "drop-shadow(0 0 6px rgba(225,29,72,0.5)) drop-shadow(0 0 20px rgba(225,29,72,0.25))",
            }}
          />
        </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-neutral-400 sm:text-xl">
          {hero.subheadline}
        </p>

        <div className="hero-cta mt-12">
          <Button href={hero.ctaHref} size="lg">
            {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-rose-400"
        >
          <span className="text-xs uppercase tracking-widest">Scroll</span>
          <ChevronDown size={20} className="animate-bounce" />
        </a>
      </div>
    </section>
  );
}
