import { useEffect, useRef } from 'react';
import { Anchor, Globe, BarChart } from 'lucide-react';
import { motion } from 'framer-motion';

interface Props {
  onNavigate: (page: 'home' | 'calculator' | 'how-it-works' | 'about' | 'contact') => void;
}

export function Home({ onNavigate }: Props) {
  const handleCalculateClick = () => {
    onNavigate('calculator');
    setTimeout(() => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }, 0);
  };

  const handleLearnMoreClick = () => {
    onNavigate('about');
    setTimeout(() => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }, 0);
  };

  // Animation variants
  const fadeInUp = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: {
        duration: 0.6,
        ease: [0.22, 1, 0.36, 1]
      }
    }
  };
  
  const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3
      }
    }
  };
  
  const scaleOnHover = {
    rest: { scale: 1 },
    hover: { 
      scale: 1.05,
      transition: {
        type: "spring",
        stiffness: 400,
        damping: 17
      }
    }
  };

  return (
    <div className="max-w-7xl mx-auto">
      <motion.div 
        className="relative mb-16"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.8 }}
      >
        <div className="relative h-[500px]">
          <motion.img
            initial={{ scale: 1.1, opacity: 0.8 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 2.5, ease: "easeOut" }}
            src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80"
            alt="Luxury yacht on calm waters"
            className="absolute inset-0 w-full h-full object-cover"
          />
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1.5, delay: 0.5 }}
            className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-transparent to-green-500/20" 
          />
        </div>
        <div className="absolute inset-0 flex items-end pb-16">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <motion.h1 
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ 
                duration: 0.8, 
                delay: 0.2,
                ease: [0.22, 1, 0.36, 1]
              }}
              className="text-5xl font-bold text-white mb-8 drop-shadow-lg"
            >
              Set Sail Sustainably with Carbon Offsetting for Superyachts
            </motion.h1>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ 
                duration: 0.6, 
                delay: 0.6,
                ease: [0.22, 1, 0.36, 1]
              }}
              className="text-xl text-white max-w-3xl mx-auto leading-relaxed drop-shadow-lg"
            >
              Luxury and environmental responsibility can go hand in hand when you choose to offset the carbon footprint of your superyacht adventures.
            </motion.p>
          </div>
        </div>
      </motion.div>

      <motion.div 
        className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"
        variants={staggerContainer}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.3 }}
      >
        <motion.div 
          className="bg-white rounded-xl shadow-lg p-8"
          variants={fadeInUp}
          initial="rest"
          whileInView="rest"
          viewport={{ once: true }}
          whileHover="hover"
        >
          <motion.div variants={scaleOnHover} className="h-full">
            <div className="flex items-center space-x-4 mb-6">
              <motion.div
                initial={{ rotate: -10, opacity: 0 }}
                whileInView={{ rotate: 0, opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                viewport={{ once: true }}
              >
                <Globe className="text-blue-600" size={32} />
              </motion.div>
              <h2 className="text-2xl font-bold text-gray-900">Flexible Offsetting Solutions</h2>
            </div>
            <p className="text-gray-600 leading-relaxed text-justify">
              With Puffin's carbon offsetting program, it's simple to mitigate the environmental impact of a yacht's use by supporting impactful international projects. Whether you want to offset a portion of a single trip, a season, or a yacht's full annual emissions, Puffin gives you the flexibility to offset as much or as little as you like.
            </p>
          </motion.div>
        </motion.div>

        <motion.div 
          className="bg-white rounded-xl shadow-lg p-8"
          variants={fadeInUp}
          initial="rest"
          whileInView="rest"
          viewport={{ once: true }}
          whileHover="hover"
        >
          <motion.div variants={scaleOnHover} className="h-full">
            <div className="flex items-center space-x-4 mb-6">
              <motion.div
                initial={{ rotate: 10, opacity: 0 }}
                whileInView={{ rotate: 0, opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.3 }}
                viewport={{ once: true }}
              >
                <BarChart className="text-green-600" size={32} />
              </motion.div>
              <h2 className="text-2xl font-bold text-gray-900">Your Values, Your Choice</h2>
            </div>
            <p className="text-gray-600 leading-relaxed text-justify">
              Our portfolios are designed to resonate with the values of our most environmentally-conscious clients, ensuring contributions align with their passion for a better planet. Our science-based, verified carbon offsetting projects have a real and ongoing impact in the fight against climate change.
            </p>
          </motion.div>
        </motion.div>
      </motion.div>

      <motion.div 
        className="bg-white rounded-xl shadow-lg p-12 mb-16 text-center"
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
        viewport={{ once: true, amount: 0.3 }}
      >
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center justify-center space-x-4 mb-6">
            <motion.div
              initial={{ y: -20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              transition={{ 
                type: "spring",
                stiffness: 300,
                damping: 15,
                delay: 0.2
              }}
              viewport={{ once: true }}
            >
              <Anchor className="text-blue-600" size={32} />
            </motion.div>
            <motion.h2 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              viewport={{ once: true }}
              className="text-3xl font-bold text-gray-900"
            >
              Empower Your Yacht Business with In-House Offsetting
            </motion.h2>
          </div>
          <motion.p 
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            viewport={{ once: true }}
            className="text-lg text-gray-600 leading-relaxed text-justify"
          >
            Our offsetting tool is not only perfect for charter guests and yacht owners, it can also be used by yacht management companies and brokerage firms seeking to integrate sustainability into the entirety of their operations. Use Puffin to offer clients carbon-neutral charter options or manage the environmental footprint of your fleet. Showcase your commitment to eco-conscious luxury while adding value to your services and elevating your brand.
          </motion.p>
        </div>
      </motion.div>

      <motion.div 
        className="text-center bg-white rounded-xl shadow-lg p-12 mb-16"
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
        viewport={{ once: true, amount: 0.3 }}
      >
        <motion.h2 
          initial={{ opacity: 0, y: -10 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          viewport={{ once: true }}
          className="text-3xl font-bold text-gray-900 mb-6"
        >
          Ready to Make a Difference?
        </motion.h2>
        <motion.p 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          viewport={{ once: true }}
          className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto"
        >
          Join the growing community of environmentally conscious yacht owners and operators who are leading the way in maritime sustainability.
        </motion.p>
        <motion.div 
          className="flex justify-center space-x-4"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          viewport={{ once: true }}
        >
          <motion.button 
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.98 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            onClick={handleCalculateClick}
            className="bg-blue-600 text-white px-8 py-3 rounded-lg"
          >
            Calculate Your Impact
          </motion.button>
          <motion.button 
            whileHover={{ scale: 1.05, backgroundColor: "rgba(219, 234, 254, 1)" }}
            whileTap={{ scale: 0.98 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            onClick={handleLearnMoreClick}
            className="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg"
          >
            Learn More
          </motion.button>
        </motion.div>
      </motion.div>
    </div>
  );
}
