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

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

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Maintenance</strong> in the sidebar. This page has two tabs: <strong className="text-avus">RECORDS</strong> and <strong className="text-avus">SCHEDULES</strong>.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        At the top is a <strong className="text-avus">Vehicle</strong> dropdown to select which vehicle you are viewing or adding maintenance for.
      </p>

      {/* Maintenance Records */}
      <div id="maintenance-records" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Maintenance Records</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          The <strong className="text-avus">RECORDS</strong> tab shows your maintenance history for the selected vehicle. Below the list is the "Add Maintenance Record" form.
        </p>

        <GuideScreenshot
          src="/guide/maintenance-records-desktop.png"
          alt="Maintenance Records tab showing history and add form"
          caption="The Maintenance Records tab displays service history and an add form"
        />
      </div>

      {/* Adding a Maintenance Record */}
      <div id="adding-a-maintenance-record" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Adding a Maintenance Record</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          The form on the RECORDS tab includes:
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Receipt Upload</h4>
        <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> Maintenance receipt scanning requires a Pro or Enterprise subscription. See <a href="#maintenance-receipt-scanning" className="text-primary-400 hover:text-primary-300 underline">Maintenance Receipt Scanning (Pro)</a> for full details.
          </p>
        </div>

        <p className="text-titanio/70 leading-relaxed mb-4">
          Click the <strong className="text-avus">ADD RECEIPT</strong> button (dashed outline area) to upload or photograph a maintenance receipt. The OCR system can extract:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Category and service type</li>
          <li>Cost</li>
          <li>Date</li>
          <li>Shop name</li>
        </ul>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Form Fields</h4>
        <GuideTable
          headers={['Field', 'Required', 'Description']}
          rows={[
            ['Category', 'Yes', 'Dropdown with options: Routine Maintenance, Repair, Performance Upgrade. Each category has specific subtypes.'],
            ['Date', 'Yes', 'Pre-filled with today\'s date; click the calendar icon to change'],
            ['Odometer Reading', 'Optional', 'Vehicle mileage at time of service'],
            ['Cost', 'Optional', 'Total cost of the service (in $)'],
            ['Shop Name', 'Optional', 'Name of the service shop'],
            ['Notes', 'Optional', 'Additional details about the service (max 1,000 characters)'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Add Record</strong> to save the maintenance record.
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Maintenance Categories</h4>
        <GuideTable
          headers={['Category', 'Example Services']}
          rows={[
            ['Routine Maintenance', 'Oil change, air filter, tire rotation, battery, brakes, coolant flush, transmission fluid, spark plugs, fuel filter, cabin air filter, brake fluid, detailing'],
            ['Repair', 'Engine repair, transmission repair, brake repair, electrical, cooling system, suspension, steering, fuel system, body work, paint, glass'],
            ['Performance Upgrade', 'Engine tuning, suspension upgrade, wheels/tires, brake upgrade, exhaust, intake, lighting, audio'],
          ]}
        />

        <GuideScreenshot
          src="/guide/add-maintenance-mobile.png"
          alt="Mobile view of Add Maintenance Record form"
          caption="The Add Maintenance Record form on mobile with category selection"
          mobile
        />
      </div>

      {/* Maintenance Schedules */}
      <div id="maintenance-schedules" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Maintenance Schedules</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click the <strong className="text-avus">SCHEDULES</strong> tab to set up recurring maintenance reminders.
        </p>

        <GuideScreenshot
          src="/guide/maintenance-schedules-desktop.png"
          alt="Maintenance Schedules tab showing schedule creation form and active schedules"
          caption="The Maintenance Schedules tab for setting up recurring reminders"
        />
      </div>

      {/* Creating a Schedule */}
      <div id="creating-a-schedule" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Creating a Schedule</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          The "Create Maintenance Schedule" form includes:
        </p>

        <GuideTable
          headers={['Field', 'Required', 'Description']}
          rows={[
            ['Category', 'Yes', 'Same categories as maintenance records'],
            ['Schedule Type', 'Yes', 'Three options (radio buttons):'],
            ['', '', 'Interval-based -- Every X months or miles (e.g., oil change every 5,000 miles or 6 months)'],
            ['', '', 'Fixed date -- A specific calendar date'],
            ['', '', 'Time since last service -- Based on when service was last performed'],
            ['Interval (Months)', 'Conditional', 'Number of months between services. Optional if miles are specified.'],
            ['Interval (Miles)', 'Conditional', 'Number of miles between services. Optional if months are specified.'],
            ['Reminders', 'Optional', 'Set up to 3 reminders (Reminder 1, Reminder 2, Reminder 3) via dropdowns'],
            ['Email notifications', 'Optional', 'Toggle to receive email reminders when service is due'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Create Schedule</strong> to save.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          Below the form, the "Maintenance Schedules" section lists all active schedules for the selected vehicle, showing when each service is next due.
        </p>
      </div>
    </section>
  );
};
