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 AccountHelpPage() {
  return (
    <HelpArticle
      title="Account Settings"
      description="Manage your profile, password, theme preferences, and account."
    >
      <HelpSection id="profile" title="Profile">
        <p>
          Update your display name and email address from your profile settings.
          Your name appears to other household members when collaborating on
          shared residences.
        </p>
        <ScreenshotPlaceholder alt="Profile settings page with name and email fields" />
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to <strong>Settings</strong> → <strong>Profile</strong>.</li>
          <li>Edit your name or email.</li>
          <li>Tap <strong>Save</strong> to apply changes.</li>
        </ol>
      </HelpSection>

      <HelpSection id="password" title="Changing Your Password">
        <p>
          Change your password at any time from the profile settings. You&apos;ll
          need to enter your current password for verification.
        </p>
        <HelpCallout type="note">
          If you signed up with Apple Sign In, you don&apos;t have a password to
          change — authentication is handled by Apple.
        </HelpCallout>
      </HelpSection>

      <HelpSection id="theme" title="Theme Preferences">
        <p>
          honeyDue supports light, dark, and system-matched themes. Choose the
          one that&apos;s most comfortable for you.
        </p>
        <ScreenshotPlaceholder alt="Theme picker showing light, dark, and system options" />
        <p>
          The theme affects the app&apos;s appearance across all screens. Your
          preference syncs across devices when you&apos;re logged in.
        </p>
      </HelpSection>

      <HelpSection id="delete" title="Deleting Your Account">
        <p>
          You can permanently delete your account and all associated data from
          the profile settings.
        </p>
        <HelpCallout type="warning">
          Account deletion is permanent and cannot be undone. All your
          residences, tasks, contractors, documents, and subscription data will
          be permanently removed. Household members will lose access to any
          residences you own.
        </HelpCallout>
        <ol className="list-decimal list-inside space-y-2 ml-1">
          <li>Go to <strong>Settings</strong> → <strong>Profile</strong>.</li>
          <li>Scroll to the bottom and tap <strong>Delete Account</strong>.</li>
          <li>Confirm the deletion by typing your email address.</li>
          <li>Your account and all data will be permanently removed.</li>
        </ol>
      </HelpSection>
    </HelpArticle>
  );
}