motovaultpro/frontend/src/pages/GuidePage/sections/SettingsSection.tsx

import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';

export const SettingsSection = () => {
  return (
    <section id="settings" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">8. Settings</h2>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Settings</strong> in the sidebar to manage your account, preferences, and data.
      </p>

      <h3 id="profile" className="text-xl font-semibold text-avus mb-3 mt-8">
        Profile
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        The Profile section displays your account information:
      </p>

      <GuideTable
        headers={['Field', 'Description']}
        rows={[
          ['Avatar', 'Shows your initial in a circle'],
          ['Name', 'Your display name (e.g., "Eric Gullickson")'],
          ['Email', 'Your account email address'],
          ['Account Status', 'Shows "Verified account" if email is verified'],
          ['Display Name', 'Your public-facing name'],
          ['Notification Email', 'The email address used for notifications (defaults to "Using primary email")'],
        ]}
      />

      <GuideScreenshot
        src="/guide/settings-desktop.png"
        alt="Settings page showing profile and account options"
        caption="The Settings page with profile, security, subscription, and preferences"
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click the <strong className="text-avus">Edit</strong> button to update your display name or notification email.
      </p>

      <h3 id="security-and-privacy" className="text-xl font-semibold text-avus mb-3 mt-8">
        Security and Privacy
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        The Security & Privacy row shows "Password, two-factor authentication" with a <strong className="text-avus">Manage</strong> button. Click it to:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Change your password</li>
        <li>Set up two-factor authentication</li>
        <li>Manage active sessions</li>
        <li>Log out all devices</li>
      </ul>

      <h3 id="subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
        Subscription
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Shows your current subscription plan with a <strong className="text-avus">Manage</strong> button.
      </p>

      <GuideTable
        headers={['Plan', 'Features']}
        rows={[
          ['FREE', 'Basic vehicle management, up to 2 vehicles, basic fuel tracking, document storage'],
          ['Pro', 'Up to 10 vehicles, receipt OCR scanning, maintenance schedules, email ingestion'],
          ['Enterprise', 'Unlimited vehicles, all Pro features'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        "Upgrade to Pro or Enterprise for more features and vehicle slots."
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Manage</strong> to view plan details, change your subscription, manage payment methods, and view billing history.
      </p>

      <h3 id="notifications" className="text-xl font-semibold text-avus mb-3 mt-8">
        Notifications
      </h3>

      <GuideTable
        headers={['Setting', 'Description', 'Default']}
        rows={[
          ['Push Notifications', 'Receive notifications about your vehicles (maintenance due, etc.)', 'ON'],
          ['Email Updates', 'Receive maintenance reminders and updates via email', 'OFF'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        Toggle each setting on or off.
      </p>

      <h3 id="appearance-and-units" className="text-xl font-semibold text-avus mb-3 mt-8">
        Appearance and Units
      </h3>

      <GuideTable
        headers={['Setting', 'Description', 'Options']}
        rows={[
          ['Dark Mode', 'Use dark theme for better night viewing', 'Toggle ON/OFF (default: OFF)'],
          ['Units for distance and capacity', 'Choose between measurement systems', 'Imperial: miles, gallons, MPG, USD / Metric: km, liters, L/100km, EUR'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        The unit system you select here applies throughout the entire application -- Dashboard, Fuel Logs, Maintenance, and Vehicle Details all update to reflect your preference.
      </p>

      <h3 id="data-import-and-export" className="text-xl font-semibold text-avus mb-3 mt-8">
        Data Import and Export
      </h3>

      <GuideTable
        headers={['Action', 'Description', 'Button']}
        rows={[
          ['Import Data', 'Upload and restore your vehicle data from a backup file', 'Import'],
          ['Export Data', 'Download your vehicle and fuel log data as a backup file', 'Export'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        Export creates a downloadable archive of all your data. Import accepts a previously exported backup file to restore your data.
      </p>

      <h3 id="account-actions" className="text-xl font-semibold text-avus mb-3 mt-8">
        Account Actions
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        At the bottom of the Settings page:
      </p>

      <GuideTable
        headers={['Button', 'Action']}
        rows={[
          ['Sign Out', 'Log out of your account'],
          ['DELETE ACCOUNT', 'Permanently delete your account and all data. This initiates a 30-day grace period during which you can cancel the deletion by logging back in.'],
        ]}
      />
    </section>
  );
};