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

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

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Documents</strong> in the sidebar. This page stores all your vehicle-related paperwork digitally.
      </p>

      <h3 id="documents-overview" className="text-xl font-semibold text-avus mb-3 mt-8">
        Documents Overview
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        The page shows the title "Documents" with an <strong className="text-avus">Add Document</strong> button in the top-right corner.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        If you have no documents yet, you will see an empty state:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>A document icon</li>
        <li>"No Documents Yet"</li>
        <li>"You haven't added any documents yet. Documents will appear here once you create them."</li>
        <li>A <strong className="text-avus">Go to Vehicles</strong> button (since documents are associated with vehicles)</li>
      </ul>

      <GuideScreenshot
        src="/guide/documents-desktop.png"
        alt="Documents page showing document storage"
        caption="The Documents page for managing vehicle-related paperwork"
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        When documents exist, they appear in a list/grid with preview thumbnails, titles, document types, and associated vehicles.
      </p>

      <h3 id="adding-a-document" className="text-xl font-semibold text-avus mb-3 mt-8">
        Adding a Document
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Add Document</strong> to open the "Add Document" modal with these fields:
      </p>

      <GuideTable
        headers={['Field', 'Required', 'Description']}
        rows={[
          ['Vehicle', 'Yes', 'Select which vehicle this document belongs to (dropdown of your vehicles)'],
          ['Document Type', 'Yes', 'Select the type (see Document Types below)'],
          ['Title', 'Yes', 'A descriptive title (e.g., "Honda CBR600RR Service Manual")'],
          ['Notes', 'Optional', 'Any additional notes about this document'],
          ['Upload image/PDF', 'Yes', 'Click Choose File to upload an image or PDF file'],
        ]}
      />

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

      <h3 id="document-types" className="text-xl font-semibold text-avus mb-3 mt-8">
        Document Types
      </h3>

      <GuideTable
        headers={['Type', 'What to Store']}
        rows={[
          ['Insurance', 'Insurance policies, cards, declarations pages'],
          ['Registration', 'Vehicle registration documents'],
          ['Maintenance Manual', 'Owner\'s manuals and service manuals'],
          ['Service Records', 'Service history documentation from dealers/shops'],
          ['Recall Notices', 'Vehicle recall notifications'],
          ['Inspection Reports', 'State inspection or emissions test reports'],
          ['Receipts', 'Purchase receipts for parts, accessories, services'],
          ['Other', 'Any other vehicle-related document'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Insurance documents</strong> have additional fields: Insurance Company, Policy Number, Effective Date, Expiration Date, Coverage amounts (Bodily Injury, Property Damage), and Premium.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Registration documents</strong> have additional fields: License Plate, Expiration Date, and Registration Cost.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Documents with expiration dates will show countdown badges so you know when renewals are coming up.
      </p>

      <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> When uploading a Maintenance Manual PDF, Pro and Enterprise users can check <strong className="text-avus">Scan for Maintenance Schedule</strong> to automatically extract a complete maintenance schedule from the document. See Maintenance Manual PDF Extraction (Pro) for the full workflow.
        </p>
      </div>
    </section>
  );
};