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 ContractorsHelpPage() {
  return (
    <HelpArticle
      title="Contractors"
      description="Build your rolodex of trusted service providers. Store contact details, specialties, and share them with household members."
    >
      <HelpSection id="adding" title="Adding a Contractor">
        <p>
          Keep track of every plumber, electrician, landscaper, and handyman
          you work with. Each contractor record stores their contact details and
          specialty.
        </p>
        <ScreenshotPlaceholder alt="Add contractor form with name, phone, email, specialty, and notes" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to your <strong>Contractors</strong> list.</li>
          <li>Tap <strong>Add Contractor</strong>.</li>
          <li>Enter their name, phone number, and optionally email.</li>
          <li>Select their specialty (plumbing, electrical, HVAC, etc.).</li>
          <li>Add any notes about your experience with them.</li>
        </ol>
      </HelpSection>

      <HelpSection id="specialties" title="Specialties">
        <p>
          Specialties help you quickly filter and find the right contractor for a
          job. honeyDue comes with common home service categories:
        </p>
        <ul className="list-disc list-inside space-y-1 ml-1">
          <li>Plumbing</li>
          <li>Electrical</li>
          <li>HVAC</li>
          <li>Roofing</li>
          <li>Landscaping</li>
          <li>General Handyman</li>
          <li>Pest Control</li>
          <li>Cleaning</li>
          <li>And more...</li>
        </ul>
        <ScreenshotPlaceholder alt="Contractor list filtered by specialty" />
      </HelpSection>

      <HelpSection id="favorites" title="Favorites">
        <p>
          Mark your go-to contractors as favorites for quick access. Favorited
          contractors appear at the top of your list and are highlighted when
          linking contractors to tasks.
        </p>
        <HelpCallout type="tip">
          Tap the star icon on any contractor card to toggle their favorite status.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="sharing" title="Sharing & Importing">
        <p>
          Share your trusted contractors with friends, family, or new household
          members using the <strong>.honeydue file format</strong>.
        </p>
        <ScreenshotPlaceholder alt="Contractor import dialog with file picker and preview" />
        <p>
          Export your contractors as a .honeydue file and send it to anyone.
          They can import it into their own honeyDue account to instantly add
          your recommended pros.
        </p>
        <p>
          See the <a href="/help/sharing" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Sharing guide</a> for
          detailed export and import instructions.
        </p>
      </HelpSection>

      <HelpSection id="linking" title="Linking to Tasks">
        <p>
          When creating or editing a task, you can link a contractor to it. This
          creates a handy reference so you know who to call for that specific
          maintenance item.
        </p>
        <p>
          Contractors linked to tasks also appear in residence reports, giving
          you a complete maintenance history with contact information.
        </p>
      </HelpSection>
    </HelpArticle>
  );
}