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 ResidencesHelpPage() {
  return (
    <HelpArticle
      title="Residences"
      description="Add and manage your properties, invite household members, and keep each home organized."
    >
      <HelpSection id="adding" title="Adding a Residence">
        <p>
          A residence represents a property you want to manage. It could be your
          house, apartment, rental property, or vacation home.
        </p>
        <ScreenshotPlaceholder alt="Add residence form with property name, address, and type fields" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to your <strong>Residences</strong> list.</li>
          <li>Tap <strong>Add Residence</strong>.</li>
          <li>Enter a name and optionally an address.</li>
          <li>Select the property type.</li>
        </ol>
        <HelpCallout type="note">
          The free plan includes one residence. Upgrade to Pro for unlimited
          properties.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="editing" title="Editing a Residence">
        <p>
          Update your residence details at any time — change the name, address,
          or property type from the residence settings.
        </p>
        <ScreenshotPlaceholder alt="Residence edit form with updated fields" />
      </HelpSection>

      <HelpSection id="details" title="Residence Details">
        <p>
          Each residence has its own dashboard showing tasks, documents, and
          contractors associated with that property. The kanban board gives you a
          visual overview of all task statuses.
        </p>
        <ScreenshotPlaceholder alt="Residence detail page with kanban board and task summary" />
      </HelpSection>

      <HelpSection id="sharing" title="Sharing a Residence">
        <p>
          Invite household members by generating a share code. Anyone with the
          code can join and collaborate on that property&apos;s maintenance.
        </p>
        <p>
          See the <a href="/help/sharing" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Sharing guide</a> for
          step-by-step instructions on inviting members and managing access.
        </p>
      </HelpSection>

      <HelpSection id="reports" title="Residence Reports">
        <p>
          Generate a PDF report summarizing your residence&apos;s maintenance
          history — completed tasks, upcoming items, and contractor information.
          Great for insurance claims or when selling your home.
        </p>
        <ScreenshotPlaceholder alt="Download residence report button and PDF preview" />
      </HelpSection>

      <HelpSection id="deleting" title="Deleting a Residence">
        <p>
          Only the residence owner can delete a property. Deleting a residence
          removes all associated tasks, documents, and contractor links.
        </p>
        <HelpCallout type="warning">
          Deleting a residence is permanent and cannot be undone. Make sure to
          download any reports or documents you need before deleting.
        </HelpCallout>
      </HelpSection>
    </HelpArticle>
  );
}
