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

export const SubscriptionSection = () => {
  return (
    <section id="subscription-tiers" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">9. Subscription Tiers and Pro Features</h2>

      <p className="text-titanio/70 leading-relaxed mb-4">
        MotoVaultPro offers three subscription tiers. Higher tiers automatically include all features from lower tiers.
      </p>

      <h3 id="tier-comparison" className="text-xl font-semibold text-avus mb-3 mt-8">
        Tier Comparison
      </h3>

      <GuideTable
        headers={['Feature', 'Free', 'Pro', 'Enterprise']}
        rows={[
          ['Vehicle Slots', '2', '5', 'Unlimited'],
          ['Vehicle management', 'Yes', 'Yes', 'Yes'],
          ['Fuel log tracking', 'Yes', 'Yes', 'Yes'],
          ['Document storage', 'Yes', 'Yes', 'Yes'],
          ['Gas station finder', 'Yes', 'Yes', 'Yes'],
          ['Maintenance records', 'Yes', 'Yes', 'Yes'],
          ['Maintenance schedules', 'Yes', 'Yes', 'Yes'],
          ['Data import/export', 'Yes', 'Yes', 'Yes'],
          ['VIN camera scan and decode', '--', 'Yes', 'Yes'],
          ['Fuel receipt OCR scanning', '--', 'Yes', 'Yes'],
          ['Maintenance receipt OCR scanning', '--', 'Yes', 'Yes'],
          ['Maintenance manual PDF extraction', '--', 'Yes', 'Yes'],
          ['Email ingestion (forward receipts)', '--', 'Yes', 'Yes'],
          ['Shared vehicle documents', '--', 'Yes', 'Yes'],
          ['Community station submissions', '--', 'Yes', 'Yes'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        When you attempt to use a Pro feature on the Free tier, an <strong className="text-avus">Upgrade Required</strong> dialog appears explaining the feature and offering a direct link to upgrade.
      </p>

      <h3 id="vin-camera-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
        VIN Camera Scanning and Decode (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Use your device camera to photograph your vehicle's VIN plate, and the system automatically reads the VIN using OCR (Optical Character Recognition) and decodes it from the NHTSA database.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Go to <strong className="text-avus">Vehicles</strong> and click <strong className="text-avus">+ Add Vehicle</strong></li>
        <li>In the VIN Number field, click the <strong className="text-avus">camera icon</strong></li>
        <li>Point your camera at the VIN plate on your vehicle (typically on the driver-side dashboard or door jamb)</li>
        <li>The OCR system reads the 17-character VIN from the image</li>
        <li>A <strong className="text-avus">VIN OCR Review modal</strong> appears showing the detected VIN with confidence indicators</li>
        <li>Confirm or correct the VIN, then click <strong className="text-avus">Accept</strong></li>
        <li>Click the <strong className="text-avus">Decode VIN</strong> button</li>
        <li>The system queries the NHTSA database and auto-populates: Year, Make, Model, Engine, Transmission, and Trim</li>
        <li>Review the pre-filled fields and complete the remaining details</li>
      </ol>

      <p className="text-titanio/70 leading-relaxed mb-4">
        This eliminates manual data entry errors and ensures accurate vehicle specifications.
      </p>

      <h3 id="fuel-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
        Fuel Receipt Scanning (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Photograph a fuel receipt and the OCR system extracts all relevant data, automatically filling in your fuel log entry.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Open the <strong className="text-avus">Log Fuel</strong> modal (from Dashboard or Fuel Logs page)</li>
        <li>Click the <strong className="text-avus">SCAN RECEIPT</strong> button at the top of the form</li>
        <li>Use your camera to photograph the fuel receipt</li>
        <li>The system processes the image and extracts relevant data</li>
      </ol>

      <GuideTable
        headers={['Extracted Field', 'Description']}
        rows={[
          ['Fuel Amount', 'Gallons or liters purchased'],
          ['Cost Per Unit', 'Price per gallon/liter'],
          ['Total Cost', 'Total transaction amount'],
          ['Date & Time', 'Transaction timestamp'],
          ['Fuel Grade', 'Regular, Midgrade, Premium, etc.'],
          ['Station Name', 'Merchant name matched to known stations'],
        ]}
      />

      <ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>A <strong className="text-avus">Receipt OCR Review modal</strong> appears showing all extracted values with confidence scores</li>
        <li>Each field can be edited inline if the OCR got something wrong</li>
        <li>The station name is automatically matched against known gas stations in the system</li>
        <li>Click <strong className="text-avus">Accept</strong> to auto-fill the Log Fuel form with the extracted values</li>
        <li>Click <strong className="text-avus">Reject</strong> to discard the scan and enter data manually</li>
        <li>Review the pre-filled form and click <strong className="text-avus">Add Fuel Log</strong></li>
      </ol>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Tips for best results:</strong>
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Photograph the receipt on a flat, well-lit surface</li>
        <li>Ensure the entire receipt is visible in the frame</li>
        <li>Avoid wrinkled or faded receipts when possible</li>
      </ul>

      <h3 id="maintenance-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
        Maintenance Receipt Scanning (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Photograph a maintenance or service receipt to automatically extract service details into a maintenance record.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Go to <strong className="text-avus">Maintenance</strong> and select a vehicle</li>
        <li>On the <strong className="text-avus">RECORDS</strong> tab, click the <strong className="text-avus">ADD RECEIPT</strong> button (dashed outline area)</li>
        <li>Use your camera to photograph the service receipt</li>
        <li>The system processes the image and extracts relevant data</li>
      </ol>

      <GuideTable
        headers={['Extracted Field', 'Description']}
        rows={[
          ['Category', 'Service type (Routine, Repair, Performance)'],
          ['Subtypes', 'Specific services performed (e.g., Oil Change, Tire Rotation)'],
          ['Cost', 'Total service cost'],
          ['Date', 'Service date'],
          ['Shop Name', 'Name of the service shop'],
        ]}
      />

      <ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>A <strong className="text-avus">Maintenance Receipt Review modal</strong> shows extracted values with confidence indicators</li>
        <li>Edit any incorrect values inline</li>
        <li>Click <strong className="text-avus">Accept</strong> to auto-fill the maintenance record form</li>
        <li>Review and click <strong className="text-avus">Add Record</strong></li>
      </ol>

      <h3 id="maintenance-manual-pdf" className="text-xl font-semibold text-avus mb-3 mt-8">
        Maintenance Manual PDF Extraction (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Upload your vehicle's owner's manual or maintenance manual as a PDF, and the system automatically extracts the recommended maintenance schedule -- creating maintenance schedules with the correct intervals for your specific vehicle.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Go to <strong className="text-avus">Documents</strong> and click <strong className="text-avus">Add Document</strong></li>
        <li>Select your vehicle and choose <strong className="text-avus">Maintenance Manual</strong> as the document type</li>
        <li>Upload the PDF file</li>
        <li>Check the <strong className="text-avus">Scan for Maintenance Schedule</strong> checkbox (Pro feature -- indicated by a lock icon for Free tier users)</li>
        <li>Click <strong className="text-avus">Create Document</strong></li>
        <li>The system submits the PDF for asynchronous processing</li>
        <li>A progress indicator shows while the document is being analyzed</li>
        <li>When processing completes, the <strong className="text-avus">Maintenance Schedule Review</strong> screen appears</li>
      </ol>

      <GuideTable
        headers={['Column', 'Description']}
        rows={[
          ['Checkbox', 'Select which items to create as schedules'],
          ['Service Name', 'Extracted maintenance service (e.g., "Engine Oil and Filter Change")'],
          ['Interval', 'Recommended interval in months and/or miles'],
          ['Details', 'Additional notes or specifications'],
          ['Confidence', 'How confident the system is in the extraction (High/Medium/Low)'],
        ]}
      />

      <ol start={9} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Check the boxes next to the maintenance items you want to create</li>
        <li>Edit any service names, intervals, or details inline</li>
        <li>Click <strong className="text-avus">Create Selected Schedules</strong> to batch-create all selected items as maintenance schedules for your vehicle</li>
      </ol>

      <p className="text-titanio/70 leading-relaxed mb-4">
        This turns a 50-page owner's manual into a complete set of maintenance reminders in minutes.
      </p>

      <h3 id="email-ingestion" className="text-xl font-semibold text-avus mb-3 mt-8">
        Email Ingestion (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Forward vehicle-related emails (service receipts, insurance documents, registration notices) to a dedicated email address, and they automatically appear in your MotoVaultPro account ready to be associated with a vehicle.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Forward any vehicle-related email to your dedicated MotoVaultPro ingestion address</li>
        <li>The system processes the email and any attachments</li>
        <li>On your <strong className="text-avus">Dashboard</strong>, a <strong className="text-avus">Pending Associations</strong> banner appears showing how many items are waiting</li>
        <li>Click the banner to open the <strong className="text-avus">Pending Association List</strong></li>
        <li>For each pending item, you see a preview of the document or receipt and a vehicle selector dropdown</li>
        <li>Select the correct vehicle for each item and click <strong className="text-avus">Associate</strong></li>
        <li>Or click <strong className="text-avus">Discard</strong> to remove items you do not want</li>
      </ol>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Bulk actions</strong> are available to discard all pending items at once.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        This is especially useful for:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Forwarding digital receipts from auto parts stores</li>
        <li>Forwarding service confirmation emails from your mechanic</li>
        <li>Forwarding insurance policy documents from your provider</li>
        <li>Forwarding registration renewal notices</li>
      </ul>

      <h3 id="shared-vehicle-documents" className="text-xl font-semibold text-avus mb-3 mt-8">
        Shared Vehicle Documents (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Associate a single document with multiple vehicles. Useful for fleet insurance policies, multi-vehicle service agreements, or shared maintenance contracts.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Open an existing document's detail page</li>
        <li>In the <strong className="text-avus">Shared Vehicles</strong> section, click <strong className="text-avus">Add Vehicle</strong></li>
        <li>Select additional vehicles from the dropdown</li>
        <li>The document now appears in the Documents section for each associated vehicle</li>
        <li>To remove a vehicle association, click the <strong className="text-avus">Remove</strong> button next to that vehicle</li>
      </ol>

      <h3 id="community-station-submissions" className="text-xl font-semibold text-avus mb-3 mt-8">
        Community Station Submissions (Pro)
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">What it does:</strong> Submit new gas stations to the MotoVaultPro community database, helping other enthusiasts find quality fuel locations -- especially stations carrying true 93-octane premium fuel.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">How to use it:</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Go to <strong className="text-avus">Gas Stations</strong></li>
        <li>Look for the option to submit a new community station</li>
        <li>Fill in the submission form</li>
      </ol>

      <GuideTable
        headers={['Field', 'Description']}
        rows={[
          ['Station Name', 'Name of the gas station'],
          ['Location', 'Address or location'],
          ['Fuel Types', 'Available fuel types and grades'],
          ['Amenities', 'Available amenities (bathrooms, ATM, convenience store, etc.)'],
          ['Notes', 'Any additional information'],
          ['Photo', 'Optional photo of the station'],
        ]}
      />

      <ol start={4} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Submit for community review</li>
        <li>An admin reviews and approves or rejects the submission</li>
        <li>Approved stations appear in the <strong className="text-avus">PREMIUM 93</strong> tab and search results with a community-verified badge</li>
      </ol>

      <h3 id="managing-your-subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
        Managing Your Subscription
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Viewing Your Plan</strong>
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Go to <strong className="text-avus">Settings</strong> and find the <strong className="text-avus">Subscription</strong> section. It shows your current plan (FREE, Pro, or Enterprise) with a <strong className="text-avus">Manage</strong> button.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Upgrading</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Click <strong className="text-avus">Manage</strong> in the Subscription section</li>
        <li>The Subscription page shows tier comparison cards with pricing</li>
        <li>Toggle between <strong className="text-avus">Monthly</strong> and <strong className="text-avus">Annual</strong> billing (annual saves money)</li>
        <li>Click <strong className="text-avus">Upgrade</strong> on the plan you want</li>
        <li>Enter your payment details using the secure Stripe payment form</li>
        <li>Your new features are available immediately</li>
      </ol>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Payment Methods</strong>
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Payment is processed through Stripe (credit/debit cards)</li>
        <li>You can save a card for recurring billing</li>
        <li>Update or remove your payment method at any time</li>
        <li>View billing history and download invoices as PDFs</li>
      </ul>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Billing History</strong>
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        The billing history table shows all past invoices with:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Date</li>
        <li>Description</li>
        <li>Amount</li>
        <li>Status (Paid, Pending, Failed)</li>
        <li>Download PDF button for each invoice</li>
      </ul>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Downgrading</strong>
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        If you downgrade from a higher tier, you may need to reduce your vehicles to fit within the lower tier's limit:
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Click <strong className="text-avus">Downgrade</strong> on the lower plan</li>
        <li>A <strong className="text-avus">Vehicle Selection dialog</strong> appears if you exceed the new tier's vehicle limit</li>
        <li>Select which vehicles to keep (e.g., keep 2 for Free tier)</li>
        <li>A warning explains that removed vehicles and their data will be deleted</li>
        <li>Confirm the downgrade</li>
      </ol>

      <GuideTable
        headers={['Tier', 'Vehicle Limit']}
        rows={[
          ['Free', '2'],
          ['Pro', '5'],
          ['Enterprise', 'Unlimited'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Cancelling</strong>
      </p>

      <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>On the Subscription page, click <strong className="text-avus">Cancel Subscription</strong></li>
        <li>A confirmation dialog appears with retention options</li>
        <li>Confirm cancellation</li>
        <li>Your subscription remains active until the end of the current billing period</li>
        <li>After expiration, your account reverts to the Free tier</li>
        <li>Click <strong className="text-avus">Reactivate</strong> at any time before expiration to keep your plan</li>
      </ol>
    </section>
  );
};