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 GettingStartedHelpPage() {
  return (
    <HelpArticle
      title="Getting Started"
      description="Create your account, add your first home, and start tracking maintenance in minutes."
    >
      <HelpSection id="create-account" title="Create Your Account">
        <p>
          Sign up for honeyDue with your email address or use Sign in with Apple
          for a faster setup. Your account is free to create and includes
          everything you need to manage one property.
        </p>
        <ScreenshotPlaceholder alt="Registration page with email and Apple Sign In options" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Visit the <strong>Create Account</strong> page.</li>
          <li>Enter your name, email, and a password (or use Apple Sign In).</li>
          <li>Verify your email address via the confirmation link.</li>
          <li>You&apos;re in! The onboarding flow will guide you through next steps.</li>
        </ol>
      </HelpSection>

      <HelpSection id="add-home" title="Add Your First Home">
        <p>
          After signing up, you&apos;ll be prompted to add your first residence.
          This is the property you want to track maintenance for.
        </p>
        <ScreenshotPlaceholder alt="Add residence form with name, address, and property type" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Tap <strong>Add Residence</strong>.</li>
          <li>Enter a name (e.g., &quot;Our House&quot;) and optionally an address.</li>
          <li>Select the property type (house, apartment, condo, etc.).</li>
          <li>Your residence is created and ready for tasks.</li>
        </ol>
        <HelpCallout type="tip">
          You can manage multiple properties by upgrading to Pro. The free plan
          includes one residence.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="first-task" title="Create Your First Task">
        <p>
          Tasks are the heart of honeyDue. Add anything from &quot;Change HVAC
          filter&quot; to &quot;Schedule annual inspection.&quot;
        </p>
        <ScreenshotPlaceholder alt="Create task form with title, category, priority, and due date" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Open your residence and tap <strong>Add Task</strong>.</li>
          <li>Give it a title and optionally set a category, priority, and due date.</li>
          <li>For recurring tasks, set a frequency (weekly, monthly, etc.).</li>
          <li>The task appears on your kanban board, organized by status.</li>
        </ol>
      </HelpSection>

      <HelpSection id="invite-household" title="Invite Household Members">
        <p>
          Home maintenance is a team effort. Invite your partner, roommates, or
          family members so everyone can see and manage tasks together.
        </p>
        <ScreenshotPlaceholder alt="Share code dialog for inviting household members" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Open your residence settings.</li>
          <li>Generate a <strong>share code</strong>.</li>
          <li>Send the code to your household member.</li>
          <li>They enter the code on their device to join your residence.</li>
        </ol>
        <HelpCallout type="note">
          See the <a href="/help/sharing" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Sharing guide</a> for
          more details on household sharing and contractor exports.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="explore" title="What to Explore Next">
        <p>Now that you&apos;re set up, here are some features to try:</p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li><a href="/help/tasks" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Kanban boards</a> — Visualize tasks by status (overdue, due soon, in progress, etc.)</li>
          <li><a href="/help/contractors" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Contractors</a> — Build your rolodex of trusted service providers</li>
          <li><a href="/help/documents" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Documents</a> — Upload warranties, manuals, and important files</li>
          <li><a href="/help/notifications" className="text-[#6B8F71] underline underline-offset-2 hover:text-[#5A7A60]">Notifications</a> — Set up push reminders so you never miss a due date</li>
        </ul>
      </HelpSection>
    </HelpArticle>
  );
}
