// React import removed - not needed with JSX transform
import { Laptop, Leaf, Scale, CreditCard, FileCheck, Handshake } from 'lucide-react';

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

export function PuffinAdvantage({ onNavigate }: Props) {
  const advantages = [
    {
      icon: <Laptop className="text-blue-500" size={24} />,
      title: "Technology-Driven Convenience",
      description: "The Puffin platform provides instant offsetting calculations and solutions, making carbon management effortless for yacht owners, charterers and operators anywhere in the world."
    },
    {
      icon: <Leaf className="text-green-500" size={24} />,
      title: "Diverse Offset Portfolio",
      description: "Puffin offers a carefully curated selection of high-impact projects - from enhanced weathering and refrigerant destruction to marine conservation initiatives, some carrying significant tax advantages."
    },
    {
      icon: <FileCheck className="text-teal-500" size={24} />,
      title: "Verified & Certified Offsetting",
      description: "All of our offsetting projects are certified by qualified third parties to ensure their quality. Additionally, projects are insured, guaranteeing your offsetting truly makes an impact."
    },
    {
      icon: <CreditCard className="text-purple-500" size={24} />,
      title: "Subscriptions or Pay-As-You-Sail",
      description: "Puffin's flexible pricing options can be tailored for everyone, from individual yacht owners to large fleet operators. Users can also choose to customise their level of offsetting, starting from a percentage of a single trip, up to a vessel's annual emissions."
    },
    {
      icon: <Scale className="text-indigo-500" size={24} />,
      title: "Scalability for Fleet Management",
      description: "Puffin also offers purpose-built solutions designed for managing emissions across multiple vessels, perfect for fleet operators and management companies. Contact us for further information and bespoke project offerings."
    },
    {
      icon: <Handshake className="text-orange-500" size={24} />,
      title: "Partnerships and Integration",
      description: "As well as the basic offsetting services offered through the Puffin website, we also offer integration and strategic partnerships across the maritime industry, tailored to your needs."
    }
  ];

  return (
    <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-16">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          The Puffin Advantage
        </h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          Experience the future of yacht carbon offsetting with our technologically advanced platform, designed specifically for the unique needs of the maritime industry.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {advantages.map((advantage, index) => (
          <div 
            key={index}
            className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
          >
            <div className="flex items-center justify-center w-12 h-12 bg-gray-50 rounded-lg mb-4">
              {advantage.icon}
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-3">
              {advantage.title}
            </h3>
            <p className="text-gray-600">
              {advantage.description}
            </p>
          </div>
        ))}
      </div>

      <div className="mt-16 bg-gradient-to-r from-blue-50 to-green-50 rounded-xl p-8 text-center">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">
          Ready to Transform Your Environmental Impact?
        </h2>
        <p className="text-lg text-gray-600 mb-6">
          Join the growing community of environmentally conscious yacht operators making a difference with Puffin Offset.
        </p>
        <button 
          onClick={() => onNavigate('calculator')}
          className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors"
        >
          Get Started Today
        </button>
      </div>
    </div>
  );
}