puffin-app/components/CalculatorClient.tsx

'use client';

import { useState } from 'react';
import { TripCalculator } from '../src/components/TripCalculator';
import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader';
import { OffsetOrder } from '../src/components/OffsetOrder';
import { StandardsLegend } from './StandardsLegend';
import { useHasQRData } from '../src/hooks/useQRDecoder';
import type { VesselData } from '../src/types';

// Sample vessel data (same as in old App.tsx)
const sampleVessel: VesselData = {
  imo: "1234567",
  vesselName: "Sample Yacht",
  type: "Yacht",
  length: 50,
  width: 9,
  estimatedEnginePower: 2250
};

export function CalculatorClient() {
  const hasQRData = useHasQRData(); // Check if URL contains QR code data
  const [showOffsetOrder, setShowOffsetOrder] = useState(false);
  const [offsetTons, setOffsetTons] = useState(0);
  const [monetaryAmount, setMonetaryAmount] = useState<number | undefined>();

  const handleOffsetClick = (tons: number, monetaryAmount?: number) => {
    setOffsetTons(tons);
    setMonetaryAmount(monetaryAmount);
    setShowOffsetOrder(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleBackFromOffset = () => {
    setShowOffsetOrder(false);
    setOffsetTons(0);
    setMonetaryAmount(undefined);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (showOffsetOrder) {
    return (
      <div className="flex justify-center px-4 sm:px-0">
        <OffsetOrder
          tons={offsetTons}
          monetaryAmount={monetaryAmount}
          onBack={handleBackFromOffset}
          calculatorType="trip"
        />
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center">
      <div className="text-center mb-12 max-w-4xl">
        <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
          Calculate & Offset Your Yacht&apos;s Carbon Footprint
        </h1>
        <p className="text-base sm:text-lg text-gray-600">
          Use the calculator below to estimate your carbon footprint and explore offsetting options through our verified projects.
        </p>
      </div>

      <div className="flex flex-col items-center w-full max-w-4xl space-y-8">
        {hasQRData ? (
          <QRCalculatorLoader
            vesselData={sampleVessel}
            onOffsetClick={handleOffsetClick}
          />
        ) : (
          <TripCalculator
            vesselData={sampleVessel}
            onOffsetClick={handleOffsetClick}
          />
        )}

        {/* Standards Legend - Learn about Wren's offset standards */}
        <div className="w-full">
          <StandardsLegend />
        </div>
      </div>
    </div>
  );
}