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 DashboardHelpPage() {
  return (
    <HelpArticle
      title="Dashboard"
      description="Get a quick overview of your home maintenance status, upcoming tasks, and recent activity."
    >
      <HelpSection id="overview" title="Dashboard Overview">
        <p>
          The dashboard is your home screen after logging in. It gives you a
          bird&apos;s-eye view of everything that needs your attention across all
          your residences.
        </p>
        <ScreenshotPlaceholder alt="Dashboard showing task summary cards, activity feed, and quick actions" />
      </HelpSection>

      <HelpSection id="task-summary" title="Task Summary">
        <p>
          The task summary section shows counts for each status category:
        </p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li><strong>Overdue</strong> — Tasks that have passed their due date</li>
          <li><strong>Due Soon</strong> — Tasks coming up in the next 30 days</li>
          <li><strong>In Progress</strong> — Tasks you&apos;re actively working on</li>
          <li><strong>Completed</strong> — Tasks finished this month</li>
        </ul>
        <p>
          Tap any summary card to jump directly to those tasks on the kanban
          board.
        </p>
      </HelpSection>

      <HelpSection id="needs-attention" title="Needs Attention">
        <p>
          The &quot;Needs Attention&quot; section highlights items that require
          immediate action — overdue tasks, expiring warranties, and tasks
          without due dates that may have been forgotten.
        </p>
        <ScreenshotPlaceholder alt="Needs attention section highlighting overdue and urgent items" />
        <HelpCallout type="tip">
          Check the dashboard daily — it takes just a few seconds to see if
          anything needs your attention.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="quick-actions" title="Quick Actions">
        <p>
          Quick action buttons let you jump to common tasks without navigating
          through menus:
        </p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li>Add a new task</li>
          <li>Add a new contractor</li>
          <li>Upload a document</li>
          <li>View your residences</li>
        </ul>
      </HelpSection>

      <HelpSection id="template-suggestions" title="Task Suggestions">
        <p>
          The dashboard may suggest common maintenance tasks based on the time
          of year and your property type. These suggestions come from our
          template library and can be added to your residence with one tap.
        </p>
        <HelpCallout type="note">
          Suggestions are just that — suggestions. You can dismiss them or add
          them to your task list as you see fit.
        </HelpCallout>
      </HelpSection>
    </HelpArticle>
  );
}
