puffinOffsetCalculator/src/components/Home.tsx

import React from 'react';
import { Anchor, Globe, BarChart } from 'lucide-react';

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);
  };

  return (
    <div className="max-w-7xl mx-auto">
      <div className="relative mb-16">
        <div className="relative h-[500px]">
          <img
            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"
          />
          <div 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">
            <h1 className="text-5xl font-bold text-white mb-8 drop-shadow-lg">
              Set Sail Sustainably with Carbon Offsetting for Superyachts
            </h1>
            <p 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.
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
        <div className="bg-white rounded-xl shadow-lg p-8 transform hover:scale-105 transition-transform duration-300">
          <div className="flex items-center space-x-4 mb-6">
            <Globe className="text-blue-600" size={32} />
            <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>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-8 transform hover:scale-105 transition-transform duration-300">
          <div className="flex items-center space-x-4 mb-6">
            <BarChart className="text-green-600" size={32} />
            <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>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-lg p-12 mb-16 text-center">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center justify-center space-x-4 mb-6">
            <Anchor className="text-blue-600" size={32} />
            <h2 className="text-3xl font-bold text-gray-900">
              Empower Your Yacht Business with In-House Offsetting
            </h2>
          </div>
          <p 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.
          </p>
        </div>
      </div>

      <div className="text-center bg-white rounded-xl shadow-lg p-12 mb-16">
        <h2 className="text-3xl font-bold text-gray-900 mb-6">
          Ready to Make a Difference?
        </h2>
        <p 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.
        </p>
        <div className="flex justify-center space-x-4">
          <button 
            onClick={handleCalculateClick}
            className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            Calculate Your Impact
          </button>
          <button 
            onClick={handleLearnMoreClick}
            className="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors"
          >
            Learn More
          </button>
        </div>
      </div>
    </div>
  );
}