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

export const GasStationsSection = () => {
  return (
    <section id="gas-stations" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">6. Gas Stations</h2>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click <strong className="text-avus">Gas Stations</strong> in the sidebar. This page helps you find gas stations near you and save your favorites.
      </p>

      <p className="text-titanio/70 leading-relaxed mb-4">
        The page is split into two sections:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li><strong className="text-avus">Left:</strong> An interactive Google Map showing station locations as markers</li>
        <li><strong className="text-avus">Right:</strong> Search controls</li>
      </ul>

      <h3 id="finding-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
        Finding Stations
      </h3>

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

      <GuideTable
        headers={['Control', 'Description']}
        rows={[
          ['Use Current Location', 'Large red button -- uses your device\'s GPS to center the search on your current location'],
          ['Street', 'Enter a street address (e.g., 123 Main St)'],
          ['City', 'Enter a city name'],
          ['State', 'Select from dropdown'],
          ['ZIP', 'Enter a ZIP code'],
          ['Search Radius', 'Slider from 1 mi to 25 mi (default: 5 mi)'],
          ['Search Stations', 'Click to execute the search'],
        ]}
      />

      <GuideScreenshot
        src="/guide/gas-stations-desktop.png"
        alt="Gas Stations page showing map and search controls"
        caption="The Gas Stations page with interactive map and search options"
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        You can either use your current location OR manually enter an address. Search results appear below the map.
      </p>

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

      <p className="text-titanio/70 leading-relaxed mb-4">
        Below the map, there are three tabs:
      </p>

      <GuideTable
        headers={['Tab', 'Description']}
        rows={[
          ['RESULTS (n)', 'Stations found by your search, showing count'],
          ['SAVED (n)', 'Your saved/favorite stations'],
          ['PREMIUM 93', 'Stations verified to carry true 93-octane fuel'],
        ]}
      />

      <p className="text-titanio/70 leading-relaxed mb-4">
        Each station result shows:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>Station name (e.g., "Costco Gas Station", "Mobil")</li>
        <li>Street address and city</li>
        <li>Star rating (community-verified)</li>
        <li>Fuel grade badges (e.g., "93 Octane - w/ Ethanol")</li>
        <li>Save/unsave button</li>
      </ul>

      <h3 id="saved-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
        Saved Stations
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click the <strong className="text-avus">SAVED</strong> tab to see your favorite stations. Saved stations also appear as yellow star markers on the map. You can:
      </p>

      <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
        <li>View station details</li>
        <li>Remove a station from your saved list</li>
        <li>Navigate on the map by clicking a station card</li>
      </ul>

      <h3 id="premium-93-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
        Premium 93 Stations
      </h3>

      <p className="text-titanio/70 leading-relaxed mb-4">
        Click the <strong className="text-avus">PREMIUM 93</strong> tab to see your "Your Premium 93 Stations" -- stations that have been community-verified to carry genuine 93-octane fuel. This is especially useful for performance vehicles that require premium fuel.
      </p>
    </section>
  );
};