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 NotificationsHelpPage() {
  return (
    <HelpArticle
      title="Notifications"
      description="Configure push notifications and reminders to stay on top of your home maintenance schedule."
    >
      <HelpSection id="types" title="Notification Types">
        <p>honeyDue sends notifications for important events:</p>
        <ul className="list-disc list-inside space-y-2 ml-1">
          <li><strong>Task due reminders</strong> — Before a task&apos;s due date</li>
          <li><strong>Overdue alerts</strong> — When a task passes its due date</li>
          <li><strong>Household activity</strong> — When a member completes a task or joins your residence</li>
          <li><strong>Warranty expiration</strong> — Before a tracked warranty expires</li>
        </ul>
        <ScreenshotPlaceholder alt="Notification list showing various notification types" />
      </HelpSection>

      <HelpSection id="preferences" title="Notification Preferences">
        <p>
          Customize which notifications you receive from your account settings.
          You can enable or disable each notification type independently.
        </p>
        <ScreenshotPlaceholder alt="Notification preferences toggles for each notification type" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to <strong>Settings</strong> → <strong>Notifications</strong>.</li>
          <li>Toggle each notification type on or off.</li>
          <li>Changes take effect immediately.</li>
        </ol>
      </HelpSection>

      <HelpSection id="push" title="Push Notifications">
        <p>
          Push notifications are delivered directly to your device — even when
          the app isn&apos;t open. On the mobile app, you&apos;ll be prompted to allow
          notifications on first launch.
        </p>
        <HelpCallout type="tip">
          Make sure notifications are enabled in your device&apos;s system settings.
          If you&apos;re not receiving notifications, check Settings → honeyDue →
          Notifications on your phone.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="email" title="Email Notifications">
        <p>
          Important notifications (like overdue tasks) can also be sent to your
          registered email address. Email notifications use the same preferences
          — disable a category and it&apos;s disabled everywhere.
        </p>
        <HelpCallout type="note">
          Check your spam folder if you&apos;re not seeing honeyDue emails. Adding
          our email to your contacts helps ensure delivery.
        </HelpCallout>
      </HelpSection>
    </HelpArticle>
  );
}
