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

export const MobileExperienceSection = () => {
  return (
    <section id="mobile-experience" className="py-8 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">10. Mobile Experience</h2>

      <p className="text-titanio/70 leading-relaxed mb-4">
        MotoVaultPro is fully responsive and works on both desktop and mobile devices.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Mobile Navigation</strong>
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        On mobile, the sidebar is replaced by:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>
          A <strong className="text-avus">bottom navigation bar</strong> with icons for: Dashboard, Vehicles, Stations
        </li>
        <li>
          A <strong className="text-avus">floating action button (FAB)</strong> in the center with quick actions:
          <ul className="list-disc list-inside ml-6 mt-2 space-y-1">
            <li>Log Fuel</li>
            <li>Add Vehicle</li>
            <li>Add Document</li>
            <li>Add Maintenance</li>
          </ul>
        </li>
        <li>
          A <strong className="text-avus">hamburger menu</strong> (accessed from the header) that slides up from the bottom, providing access to all sections: Dashboard, Vehicles, Log Fuel, Maintenance, Documents, Settings
        </li>
      </ul>

      <GuideScreenshot
        src="/guide/mobile-bottom-nav.png"
        alt="Mobile bottom navigation bar with FAB quick actions"
        caption="The mobile bottom navigation bar and floating action button"
        mobile
      />

      <GuideScreenshot
        src="/guide/mobile-hamburger.png"
        alt="Mobile hamburger drawer menu"
        caption="The mobile hamburger menu provides access to all sections"
        mobile
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        <strong className="text-avus">Mobile Optimizations</strong>
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Touch-friendly buttons and targets (minimum 44px)</li>
        <li>Swipe gestures for image viewing</li>
        <li>Camera integration for VIN scanning and receipt capture</li>
        <li>Full-screen forms for data entry</li>
        <li>Responsive card layouts that stack vertically on smaller screens</li>
      </ul>

      <p className="text-titanio/70 leading-relaxed mb-4">
        All features available on desktop are also available on mobile -- no functionality is lost on smaller screens.
      </p>
    </section>
  );
};