puffin-app/components/HowItWorksClient.tsx

'use client';

import { Leaf, Anchor, Calculator, Globe, BarChart} from 'lucide-react';
import { useRouter } from 'next/navigation';

export function HowItWorksClient() {
  const router = useRouter();

  const handleOffsetClick = () => {
    router.push('/calculator');
  };

  return (
    <div className="max-w-4xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-12">
        <div className="flex justify-center items-center space-x-3 mb-6">
          <Leaf className="text-green-500" size={32} />
          <Anchor className="text-blue-500" size={32} />
        </div>
        <h1 className="text-4xl font-bold text-gray-900 mb-4">How It Works</h1>
      </div>

      <div className="space-y-12">
        <section className="bg-white rounded-lg shadow-lg p-8">
          <div className="flex items-center space-x-4 mb-6">
            <Calculator className="text-blue-500" size={28} />
            <h2 className="text-2xl font-bold text-gray-900">1. Calculate Your Impact</h2>
          </div>
          <div className="prose prose-lg text-gray-600">
            <p className="text-justify mb-4">
              Enter your vessel&apos;s fuel usage or nautical miles travelled to calculate how many tons of CO2 have been produced.
              Choose between calculating emissions for specific trips or annual operations to get a precise understanding of your environmental impact.
            </p>
          </div>
        </section>

        <section className="bg-white rounded-lg shadow-lg p-8">
          <div className="flex items-center space-x-4 mb-6">
            <Globe className="text-green-500" size={28} />
            <h2 className="text-2xl font-bold text-gray-900">2. Select Your Offset Project</h2>
          </div>
          <div className="prose prose-lg text-gray-600">
            <p className="text-justify mb-4">
              Choose the percentage of CO2 production you would like to offset via our curated carbon offset portfolio. Each project is thoroughly vetted and monitored to ensure your contribution creates real, measurable impact in reducing global carbon emissions. Alternatively, contact us direct to design a bespoke offsetting product specifically tailored to your needs, including tax-deductible offsets for US customers.
            </p>
          </div>
        </section>

        <section className="bg-white rounded-lg shadow-lg p-8">
          <div className="flex items-center space-x-4 mb-6">
            <BarChart className="text-blue-500" size={28} />
            <h2 className="text-2xl font-bold text-gray-900">3. Track Your Impact</h2>
          </div>
          <div className="prose prose-lg text-gray-600">
            <p className="text-justify mb-4">
              Sign up to stay connected to your environmental impact through:
            </p>
            <ul className="list-disc pl-6 space-y-2">
              <li>Regular project updates and progress reports</li>
              <li>Detailed emissions reduction tracking</li>
              <li>Impact certificates for your offset contributions</li>
              <li>Transparent project performance metrics</li>
            </ul>
            <p className="text-justify mt-4">
              Monitor your contribution to global sustainability efforts and share your commitment to environmental stewardship with others in the yachting community.
            </p>
          </div>
        </section>

        <section className="bg-gradient-to-r from-blue-50 to-green-50 rounded-lg shadow-lg p-8 text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">Ready to Make a Difference?</h2>
          <div className="prose prose-lg text-gray-600 mb-8">
            <p>
              Start your carbon offsetting journey today and join the growing community of environmentally conscious yacht owners who are leading the way in maritime sustainability.
            </p>
          </div>
          <button
            onClick={handleOffsetClick}
            className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            Offset Your Impact
          </button>
        </section>
      </div>
    </div>
  );
}