import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Sun, Waves, ArrowDown } from "lucide-react";

export default function Home() {
  const [scrollY, setScrollY] = useState(0);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    
    setLoaded(true);
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-slate-950 text-white overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        {/* Background Image with Parallax */}
        <div
          className="absolute inset-0 z-0"
          style={{ transform: `translateY(${scrollY * 0.3}px)` }}
        >
          <img
            src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=80"
            alt="Plage au coucher du soleil"
            className="w-full h-[120%] object-cover"
          />
          {/* Gradient Overlays */}
          <div className="absolute inset-0 bg-gradient-to-b from-slate-950/40 via-transparent to-slate-950" />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-950/30 via-transparent to-slate-950/30" />
        </div>

        {/* Content */}
        <div className="relative z-10 text-center px-6 max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={loaded ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 1.2, ease: "easeOut" }}
          >
            <div className="flex items-center justify-center gap-3 mb-8">
              <Sun className="w-5 h-5 text-amber-400" />
              <span className="text-black text-4xl font-light tracking-[0.3em] uppercase">
                Bienvenue chez René
              </span>
              <Sun className="w-5 h-5 text-amber-400" />
            </div>



            <div className="w-24 h-px bg-gradient-to-r from-transparent via-amber-400/60 to-transparent mx-auto my-8" />

            <p className="text-lg sm:text-xl font-extralight text-white/70 max-w-2xl mx-auto leading-relaxed">
              Là où le ciel rencontre l'océan.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={loaded ? { opacity: 1 } : {}}
            transition={{ delay: 1.5, duration: 1 }}
            className="mt-16"
          >
            <motion.div
              animate={{ y: [0, 8, 0] }}
              transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
            >
              <ArrowDown className="w-5 h-5 text-white/40 mx-auto" />
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Second Section */}
      <section className="relative z-10 bg-slate-950">
        <div className="max-w-6xl mx-auto px-6 py-32">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8 }}
            className="grid md:grid-cols-3 gap-12 md:gap-16"
          >
            <FeatureCard
              icon={<Sun className="w-6 h-6" />}
              title="Lumière"
              description="Les derniers rayons dorés qui embrasent l'horizon, peignant le ciel de teintes chaudes et envoûtantes."
              delay={0}
            />
            <FeatureCard
              icon={<Waves className="w-6 h-6" />}
              title="Sérénité"
              description="Le murmure des vagues qui caresse le rivage, un rythme apaisant qui invite à la contemplation."
              delay={0.15}
            />
            <FeatureCard
              icon={<Sun className="w-6 h-6" />}
              title="Évasion"
              description="Un moment suspendu entre le jour et la nuit, où le temps semble s'arrêter pour nous offrir la beauté."
              delay={0.3}
            />
          </motion.div>
        </div>

        {/* Second Image Section */}
        <div className="relative h-[70vh] overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1520942702018-0862200e6873?w=1920&q=80"
            alt="Coucher de soleil sur l'océan"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-transparent to-slate-950" />
          <div className="absolute inset-0 flex items-center justify-center">
            <motion.blockquote
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="text-center px-6"
            >
              <p className="text-2xl sm:text-3xl md:text-4xl font-extralight text-white/90 italic max-w-3xl leading-relaxed">
                « La mer, une fois qu'elle vous a ensorcelé, vous tient dans son filet de merveilles pour toujours. »
              </p>
              <footer className="mt-6 text-amber-300/60 text-sm tracking-widest uppercase">
                Jacques-Yves Cousteau
              </footer>
            </motion.blockquote>
          </div>
        </div>

        {/* Footer */}
        <footer className="py-20 text-center">
          <div className="w-12 h-px bg-amber-400/30 mx-auto mb-8" />
          <p className="text-white/30 text-sm font-light tracking-wider">
            © {new Date().getFullYear()} — Horizon Doré
          </p>
        </footer>
      </section>
    </div>
  );
}

function FeatureCard({ icon, title, description, delay }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay }}
      className="text-center group"
    >
      <div className="inline-flex items-center justify-center w-14 h-14 rounded-full border border-amber-400/20 text-amber-400/60 mb-6 group-hover:border-amber-400/40 group-hover:text-amber-400/80 transition-all duration-500">
        {icon}
      </div>
      <h3 className="text-xl font-light text-white/90 mb-4 tracking-wide">
        {title}
      </h3>
      <p className="text-white/40 font-light leading-relaxed text-sm">
        {description}
      </p>
    </motion.div>
  );
}