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

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

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

  return (
    <div className="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">About Puffin Offset</h1>
        <p className="text-xl text-gray-600">
          Leading the way in maritime carbon offsetting solutions
        </p>
      </div>

      <div className="prose prose-lg text-gray-600 mb-12">
        <p className="text-justify">
          Puffin Offset was founded with a clear mission: to make carbon offsetting accessible and effective for the maritime industry. We understand the unique challenges faced by yacht owners and operators in reducing their environmental impact while maintaining the highest standards of luxury and service.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <div className="flex items-center space-x-3 mb-4">
            <Heart className="text-red-500" size={24} />
            <h2 className="text-xl font-bold text-gray-900">Our Mission</h2>
          </div>
          <p className="text-gray-600 text-justify">
            To empower the maritime industry with effective, transparent, and accessible carbon offsetting solutions that make a real difference in the fight against climate change.
          </p>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6">
          <div className="flex items-center space-x-3 mb-4">
            <Leaf className="text-green-500" size={24} />
            <h2 className="text-xl font-bold text-gray-900">Our Impact</h2>
          </div>
          <p className="text-gray-600 text-justify">
            Through our partnerships with verified carbon offset projects, we are able to help maritime businesses offset thousands of tons of CO₂ emissions and support sustainable development worldwide.
          </p>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-lg p-8 mb-12">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Our Values</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div className="flex items-start space-x-3">
            <Scale className="text-blue-500 flex-shrink-0" size={24} />
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">Transparency</h3>
              <p className="text-gray-600 text-justify">Clear, honest reporting on the impact of every offset.</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <FileCheck className="text-green-500 flex-shrink-0" size={24} />
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">Quality</h3>
              <p className="text-gray-600 text-justify">Only the highest standard of verified offset projects.</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <Handshake className="text-purple-500 flex-shrink-0" size={24} />
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">Partnership</h3>
              <p className="text-gray-600 text-justify">Working together for a sustainable future.</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <Rocket className="text-orange-500 flex-shrink-0" size={24} />
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">Future Proof</h3>
              <p className="text-gray-600 text-justify">Constantly improving our service and offsetting products.</p>
            </div>
          </div>
        </div>
      </div>

      <div className="text-center">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Ready to Make a Difference?</h2>
        <button
          onClick={handleStartOffsetting}
          className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors"
        >
          Start Offsetting Today
        </button>
      </div>
    </div>
  );
}