import { HelpArticle } from "@/components/help/help-article";
import { HelpSection } from "@/components/help/help-section";
import { HelpCallout } from "@/components/help/help-callout";
import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder";

export default function DocumentsHelpPage() {
  return (
    <HelpArticle
      title="Documents & Warranties"
      description="Store warranties, manuals, leases, and other important home documents organized by property."
    >
      <HelpSection id="adding" title="Adding Documents">
        <p>
          Upload any document related to your home — warranties, appliance
          manuals, insurance papers, inspection reports, or receipts.
        </p>
        <ScreenshotPlaceholder alt="Add document form with title, file upload, and document type" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Open a residence and go to the <strong>Documents</strong> tab.</li>
          <li>Tap <strong>Add Document</strong>.</li>
          <li>Enter a title and select the document type.</li>
          <li>Upload the file (PDF, image, or other supported formats).</li>
          <li>Optionally add notes or tags for easier searching.</li>
        </ol>
      </HelpSection>

      <HelpSection id="warranties" title="Warranty Tracking">
        <p>
          Mark documents as warranties and set expiration dates. honeyDue will
          help you track when warranties are about to expire so you can take
          action before coverage runs out.
        </p>
        <ScreenshotPlaceholder alt="Document card showing warranty with expiration date highlighted" />
        <HelpCallout type="tip">
          Upload a photo of the warranty card or receipt right when you purchase
          an appliance. You&apos;ll thank yourself later when you need to make a
          claim.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="viewing" title="Viewing Documents">
        <p>
          All documents for a residence are listed in one place. Tap any
          document to view its details, download the file, or see associated
          notes.
        </p>
        <ScreenshotPlaceholder alt="Documents list showing various document types with icons" />
      </HelpSection>

      <HelpSection id="activating" title="Activating & Deactivating">
        <p>
          Documents can be toggled between active and inactive states. Use this
          to archive old documents without deleting them — like an expired
          warranty you might still need for reference.
        </p>
        <HelpCallout type="note">
          Inactive documents are hidden from the default view but can be shown
          with a filter toggle.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="editing" title="Editing Documents">
        <p>
          Update document titles, notes, or warranty dates at any time. You can
          also replace the uploaded file if you have a better scan or updated
          version.
        </p>
      </HelpSection>
    </HelpArticle>
  );
}
