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

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

      <p className="text-titanio/70 leading-relaxed mb-4">
        After logging in, you land on the Dashboard -- your fleet headquarters.
      </p>

      {/* Your Fleet Overview */}
      <div id="your-fleet-overview" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Your Fleet Overview</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          <strong className="text-avus">What You See</strong>
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The Dashboard displays a "Your Fleet" heading with all your vehicles shown as cards in a grid layout. Each vehicle card shows:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Vehicle icon</strong> -- A small colored indicator badge (varies by vehicle)
          </li>
          <li>
            <strong className="text-avus">Vehicle name</strong> -- The nickname or full name (e.g., "Beast", "MERLOT")
          </li>
          <li>
            <strong className="text-avus">Health status</strong> -- A green dot indicates "All clear" (no overdue maintenance); other colors indicate attention needed
          </li>
          <li>
            <strong className="text-avus">Status text</strong> -- "All clear" or a maintenance alert message
          </li>
          <li>
            <strong className="text-avus">Odometer reading</strong> -- Current mileage (e.g., "35,000 mi")
          </li>
        </ul>

        <GuideScreenshot
          src="/guide/dashboard-desktop.png"
          alt="Dashboard showing vehicle fleet overview with health status cards"
          caption="The Dashboard displays your vehicle fleet with health status and quick actions"
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          <strong className="text-avus">Click any vehicle card</strong> to go directly to that vehicle's detail page.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The vehicle health status system provides at-a-glance monitoring of your fleet:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Green</strong> -- All maintenance is current, no action needed
          </li>
          <li>
            <strong className="text-avus">Yellow</strong> -- Maintenance due soon (within the next 500 miles or 1 month)
          </li>
          <li>
            <strong className="text-avus">Red</strong> -- Maintenance overdue or critical attention required
          </li>
        </ul>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The Dashboard layout adapts to your screen size. On desktop, vehicle cards display in a 3-column grid. On tablets, they adjust to 2 columns. On mobile devices, cards stack vertically for easy scrolling.
        </p>
      </div>

      {/* Quick Actions */}
      <div id="quick-actions" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Quick Actions</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Two action buttons appear in the top-right corner of the Dashboard:
        </p>

        <GuideTable
          headers={['Button', 'Action']}
          rows={[
            ['+ Add Vehicle', 'Opens the Add Vehicle form on the Vehicles page'],
            ['LOG FUEL', 'Opens the fuel logging modal to quickly record a fill-up'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          These quick actions let you perform the most common tasks without navigating away from the Dashboard.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The <strong className="text-avus">LOG FUEL</strong> button opens a modal where you can quickly record a fuel fill-up for any vehicle. This is the fastest way to log fuel after visiting a gas station. The modal pre-fills with the current date and time, and calculates MPG automatically based on your odometer reading.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The <strong className="text-avus">+ Add Vehicle</strong> button takes you directly to the Vehicles page with the add form expanded, ready for you to enter your new vehicle's details.
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Navigation Sidebar</h4>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The left sidebar provides access to all sections of the app:
        </p>

        <GuideTable
          headers={['Menu Item', 'Description']}
          rows={[
            ['Dashboard', 'Fleet overview (home)'],
            ['Vehicles', 'Manage your vehicle collection'],
            ['Fuel Logs', 'Track fuel purchases and efficiency'],
            ['Maintenance', 'Record service history and set schedules'],
            ['Gas Stations', 'Find and save gas stations'],
            ['Documents', 'Store vehicle-related documents'],
            ['Settings', 'Account, preferences, and data management'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          At the bottom of the sidebar you will see your email address and a <strong className="text-avus">Sign Out</strong> button.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The header bar at the top shows a notification bell icon and a "Welcome back" greeting with your email.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          On mobile devices, the navigation experience changes:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            The left sidebar is hidden and replaced by a <strong className="text-avus">bottom navigation bar</strong> for quick access to Dashboard, Vehicles, and Stations
          </li>
          <li>
            A <strong className="text-avus">floating action button (FAB)</strong> appears in the center with quick actions for logging fuel, adding vehicles, and more
          </li>
          <li>
            The full menu is accessible via a <strong className="text-avus">hamburger menu</strong> in the header that slides up from the bottom
          </li>
        </ul>

        <GuideScreenshot
          src="/guide/dashboard-mobile.png"
          alt="Dashboard on mobile device showing responsive layout"
          caption="The Dashboard adapts to mobile screens with a responsive grid layout"
          mobile
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          The Dashboard is designed as your central hub for managing your entire fleet. From here, you can monitor vehicle health, access quick actions, and navigate to any section of the application. The responsive design ensures a consistent experience whether you are using a desktop computer, tablet, or mobile phone.
        </p>
      </div>
    </section>
  );
};
