import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';

export const VehiclesSection = () => {
  return (
    <section id="vehicles" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">3. Vehicles</h2>

      {/* Viewing Your Vehicles */}
      <div id="viewing-your-vehicles" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Viewing Your Vehicles</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Vehicles</strong> in the sidebar to see the "My Vehicles" page. This page shows:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Search bar</strong> -- Search vehicles by name, make, model, or VIN
          </li>
          <li>
            <strong className="text-avus">+ Add Vehicle</strong> button -- Top-right corner
          </li>
          <li>
            <strong className="text-avus">Vehicle cards</strong> in a grid layout (3 columns on desktop), each displaying:
            <ul className="list-disc list-inside ml-6 mt-2 space-y-1">
              <li>Manufacturer logo (e.g., Chevrolet bowtie, GMC logo)</li>
              <li>Vehicle nickname or full name</li>
              <li>Year, Make, and Model</li>
              <li>License plate number</li>
              <li>Current odometer reading (in miles or kilometers)</li>
              <li><strong className="text-avus">Edit</strong> (pencil icon) and <strong className="text-avus">Delete</strong> (trash icon) buttons at the bottom of each card</li>
            </ul>
          </li>
        </ul>

        <GuideScreenshot
          src="/guide/vehicles-list-desktop.png"
          alt="Vehicles page showing grid of vehicle cards with details"
          caption="The Vehicles page displays all your vehicles in a searchable grid"
        />
      </div>

      {/* Adding a Vehicle */}
      <div id="adding-a-vehicle" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Adding a Vehicle</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click the <strong className="text-avus">+ Add Vehicle</strong> button to expand the "Add New Vehicle" form directly on the Vehicles page. The form has the following sections:
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Photo</h4>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Upload a photo of your vehicle. Click <strong className="text-avus">ADD PHOTO</strong> to select an image file.
        </p>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Accepted formats: JPEG or PNG</li>
          <li>Maximum file size: 5MB</li>
        </ul>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">VIN Number</h4>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Enter your vehicle's 17-character VIN (Vehicle Identification Number).
        </p>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Type the VIN manually in the text field, OR</li>
          <li>Click the <strong className="text-avus">camera icon</strong> to scan the VIN using your device camera (uses OCR technology)</li>
          <li>Click the <strong className="text-avus">Decode VIN</strong> button to automatically populate vehicle details from the VIN</li>
        </ul>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Note: VIN is optional if you provide a License Plate instead.
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Specifications</h4>
        <p className="text-titanio/70 leading-relaxed mb-4">
          These fields use cascading dropdowns -- each selection narrows the options for the next field:
        </p>

        <GuideTable
          headers={['Field', 'How It Works']}
          rows={[
            ['Year', 'Select the model year from the dropdown'],
            ['Make', 'Available after selecting Year (e.g., Chevrolet, GMC, Ford)'],
            ['Model', 'Available after selecting Make (e.g., Silverado, Camaro, Sierra)'],
            ['Trim', 'Available after selecting Model (e.g., LT Double Cab 4WD)'],
            ['Engine', 'Available after selecting Trim (e.g., 6.6L 401 HP V8)'],
            ['Transmission', 'Available after selecting Trim (e.g., 10-Speed Automatic)'],
          ]}
        />

        <GuideScreenshot
          src="/guide/add-vehicle-form-desktop.png"
          alt="Add Vehicle form showing cascading dropdowns for specifications"
          caption="The Add Vehicle form with cascading dropdowns for easy data entry"
        />

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Additional Details</h4>
        <GuideTable
          headers={['Field', 'Example', 'Notes']}
          rows={[
            ['Nickname', 'Beast, Family Car', 'A friendly name for your vehicle'],
            ['Color', 'Black, Blue, Red', 'Vehicle color'],
            ['License Plate', 'ABC-123', 'Required if VIN is not provided'],
            ['Current Odometer Reading', '50000', 'Current mileage in your selected unit'],
          ]}
        />

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Purchase Information</h4>
        <GuideTable
          headers={['Field', 'Example', 'Notes']}
          rows={[
            ['Purchase Price', '25000', 'What you paid for the vehicle'],
            ['Purchase Date', 'mm/dd/yyyy', 'When you purchased the vehicle'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Add Vehicle</strong> to save, or <strong className="text-avus">Cancel</strong> to discard.
        </p>
      </div>

      {/* VIN Decode */}
      <div id="vin-decode" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">VIN Decode</h3>
        <div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
          <p className="text-titanio/70 leading-relaxed">
            <strong className="text-avus">Pro Feature:</strong> VIN camera scanning and automatic decode require a Pro or Enterprise subscription. Free tier users can still type a VIN manually. See <a href="#vin-camera-scanning" className="text-primary-400 hover:text-primary-300 underline">VIN Camera Scanning and Decode (Pro)</a> for full details.
          </p>
        </div>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The VIN Decode feature automatically fills in vehicle details from a VIN:
        </p>

        <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Enter or scan your 17-character VIN</li>
          <li>Click the <strong className="text-avus">Decode VIN</strong> button</li>
          <li>The system looks up the VIN and auto-populates: Year, Make, Model, Engine, Transmission, and Trim</li>
          <li>Review the pre-filled fields and make any corrections</li>
          <li>Continue filling in the remaining fields (Nickname, Color, etc.)</li>
        </ol>

        <GuideScreenshot
          src="/guide/vin-decode-desktop.png"
          alt="VIN Decode feature showing auto-populated vehicle specifications"
          caption="The VIN Decode feature automatically fills in vehicle details from the vehicle database"
        />
      </div>

      {/* Vehicle Detail Page */}
      <div id="vehicle-detail-page" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Vehicle Detail Page</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click any vehicle card (from Dashboard or Vehicles list) to open the Vehicle Detail Page. This page shows everything about a single vehicle:
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Header Area</h4>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Back arrow and <strong className="text-avus">BACK</strong> link to return to the previous page</li>
          <li>Vehicle nickname as the page title (e.g., "Beast")</li>
          <li><strong className="text-avus">Edit Vehicle</strong> button (top-right)</li>
          <li>Quick action buttons: <strong className="text-avus">Add Fuel Log</strong> and <strong className="text-avus">Add Maintenance</strong></li>
        </ul>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Details Section</h4>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Manufacturer logo</li>
          <li>Full vehicle description (e.g., "2022 Chevrolet Silverado 2500HD")</li>
          <li>VIN Number</li>
          <li>Year, Make, and Model (displayed in a 3-column row)</li>
          <li>Trim, Engine, and Transmission (displayed in a 3-column row)</li>
          <li>Nickname</li>
          <li>Color and License Plate (side by side)</li>
          <li>Current Odometer Reading</li>
        </ul>

        <GuideScreenshot
          src="/guide/vehicle-detail-desktop.png"
          alt="Vehicle Detail page showing complete vehicle information and records"
          caption="The Vehicle Detail page displays all information and records for a single vehicle"
        />

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Purchase Information Section</h4>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Purchase Price</li>
          <li>Purchase Date</li>
        </ul>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Ownership Costs Section</h4>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Tracks insurance, registration, taxes, and other recurring vehicle costs</li>
          <li>Shows "No ownership costs recorded yet" until costs are added</li>
        </ul>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Records Section</h4>
        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>A table showing all records associated with this vehicle (fuel logs, maintenance records)</li>
          <li>Columns: Date, Type, Summary, Amount, Actions</li>
          <li><strong className="text-avus">Filter</strong> dropdown to filter by record type (All, Fuel, Maintenance)</li>
        </ul>
      </div>

      {/* Editing a Vehicle */}
      <div id="editing-a-vehicle" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Editing a Vehicle</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          From the Vehicle Detail Page, click the <strong className="text-avus">Edit Vehicle</strong> button. This opens the vehicle form pre-filled with the current values. Make your changes and save.
        </p>
        <p className="text-titanio/70 leading-relaxed mb-4">
          From the Vehicles list, click the <strong className="text-avus">pencil icon</strong> on any vehicle card to edit it directly.
        </p>
      </div>

      {/* Deleting a Vehicle */}
      <div id="deleting-a-vehicle" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Deleting a Vehicle</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          From the Vehicles list, click the <strong className="text-avus">trash icon</strong> on any vehicle card. You will be asked to confirm the deletion. Deleting a vehicle is permanent and removes all associated records.
        </p>
      </div>
    </section>
  );
};