'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';

const HowToPage = () => {
  const scrollToSection = (id: string) => {
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        const headerOffset = 120;
        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
        const offsetPosition = elementPosition - headerOffset;
        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
      }
    }, 0);
  };

  const guides = [
    { id: 'bookings', title: 'How to Manage Bookings', icon: '📋' },
    { id: 'passengers', title: 'How to Manage Passengers', icon: '👥' },
    { id: 'pricing', title: 'How to Configure Pricing', icon: '💰' },
    { id: 'schedules', title: 'How to Create Schedules', icon: '📅' },
    { id: 'seats', title: 'How to Manage Seats', icon: '💺' },
    { id: 'loyalty', title: 'How to Manage Loyalty', icon: '🏆' },
  ];

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <FileText className="h-8 w-8 text-emerald-600" />
            <div>
              <h1 className="text-2xl font-bold text-slate-900 dark:text-white">How-To Guides</h1>
              <p className="text-sm text-slate-600 dark:text-slate-400">Step-by-step instructions for common tasks</p>
            </div>
          </div>
          <Link href="/docs" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition">
            <FileText className="h-4 w-4" />
            Back to Docs
          </Link>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          <div className="lg:col-span-1">
            <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 sticky top-24 h-fit">
              <nav className="p-4 space-y-2">
                {guides.map(guide => (
                  <button
                    key={guide.id}
                    onClick={() => scrollToSection(guide.id)}
                    className="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-50 dark:hover:bg-slate-700 transition"
                  >
                    {guide.icon} {guide.title}
                  </button>
                ))}
              </nav>
            </div>
          </div>

          <div className="lg:col-span-3">
            <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 space-y-12">

              {/* Bookings How-To */}
              <div id="bookings" className="pt-4">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">📋 How to Manage Bookings</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to search, view, modify, and cancel passenger bookings in the system.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access the Bookings Page</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on <strong>"Bookings"</strong> in the Operations section of the sidebar</li>
                          <li>The page loads showing a table with all bookings</li>
                          <li>You&apos;ll see columns: Reference, Passenger, Status, Amount, Payment, Created date</li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-blue-600">
                          <p className="text-sm font-mono text-slate-600 dark:text-slate-400">📍 Path: Sidebar → Operations → Bookings</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Search for a Booking</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Find the search box at the top of the booking table</li>
                          <li>Type in: booking reference (e.g., "BK123"), email, or phone number</li>
                          <li>Results update in real-time as you type</li>
                          <li>Optional: Use the Status dropdown to filter (All, Pending Payment, Confirmed, Cancelled, Completed)</li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
                          <p className="text-sm"><strong>💡 Tip:</strong> Search is case-insensitive and supports partial matches</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Booking Details</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Find the booking in the table</li>
                          <li>Click the <strong>"View Details"</strong> button on the right side</li>
                          <li>Modal window opens showing complete information:
                            <ul className="list-disc pl-8 mt-2 space-y-1">
                              <li>Booking reference and status</li>
                              <li>Passenger name and contact details</li>
                              <li>Journey information (schedule, adults, children)</li>
                              <li>Payment details and amount</li>
                              <li>All metadata and timestamps</li>
                            </ul>
                          </li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-orange-50 dark:bg-orange-900/20 p-6 rounded-lg border border-orange-200 dark:border-orange-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-orange-600 text-white font-bold flex-shrink-0">4</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Cancel a Booking with Refund</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Find the booking in the table</li>
                          <li>Click the <strong>"Cancel Booking"</strong> button (red)</li>
                          <li>Confirmation dialog appears</li>
                          <li>Click <strong>"Confirm"</strong> to proceed</li>
                          <li>System calculates and processes refund:
                            <ul className="list-disc pl-8 mt-2 text-sm">
                              <li>Confirmed bookings: 80% refund</li>
                              <li>Pending bookings: 0% refund</li>
                            </ul>
                          </li>
                          <li>Status changes to <strong>&quot;CANCELLED&quot;</strong></li>
                          <li>Success message appears</li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-orange-600">
                          <p className="text-sm"><strong>⚠️ Important:</strong> Cannot be undone. Seats are automatically released.</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-red-50 dark:bg-red-900/20 p-6 rounded-lg border border-red-200 dark:border-red-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-red-600 text-white font-bold flex-shrink-0">5</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Export Bookings</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click the <strong>"Export"</strong> button (top-right)</li>
                          <li>CSV file downloads automatically</li>
                          <li>Includes all current filters applied</li>
                          <li>Use for external analysis or backup</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Passengers How-To */}
              <div id="passengers" className="border-t pt-8">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">👥 How to Manage Passengers</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to search, filter, and view passenger profiles with loyalty and verification data.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access Passengers Page</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click <strong>"Passengers"</strong> in the Operations section</li>
                          <li>Page displays all passenger profiles</li>
                          <li>Default view shows 20 passengers per page</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Search & Filter</h3>
                        <div className="space-y-3 text-slate-700 dark:text-slate-300">
                          <div>
                            <p className="font-semibold mb-2">Search by:</p>
                            <ul className="list-disc pl-5 space-y-1 text-sm">
                              <li>Full name</li>
                              <li>Email address</li>
                              <li>Phone number</li>
                              <li>National ID</li>
                            </ul>
                          </div>
                          <div>
                            <p className="font-semibold mb-2">Filter by:</p>
                            <ul className="list-disc pl-5 space-y-1 text-sm">
                              <li><strong>Nationality:</strong> Ethiopian, Djiboutian, Other</li>
                              <li><strong>Verifayda Status:</strong> Verified, Unverified, Pending</li>
                              <li><strong>Loyalty Tier:</strong> Bronze, Silver, Gold, Platinum</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Complete Profile</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on any passenger row</li>
                          <li>Detailed profile modal opens showing:
                            <ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
                              <li>Account info (email, phone, nationality)</li>
                              <li>Verifayda verification status</li>
                              <li>Loyalty tier and points</li>
                              <li>Wallet balance</li>
                              <li>Booking history with links</li>
                            </ul>
                          </li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
                          <p className="text-sm"><strong>ℹ️ Note:</strong> Read-only view. Updates via passenger portal.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Pricing How-To */}
              <div id="pricing" className="border-t pt-8">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">💰 How to Configure Pricing</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to set up dynamic fares with segment pricing and nationality overrides.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access Pricing Page</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click <strong>"Pricing & Fares"</strong> in Financial section</li>
                          <li>Two tabs: <strong>Schedule Fares</strong> and <strong>Segment Fares</strong></li>
                          <li>Default tab shows Schedule Fares</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Schedule Fare Rule</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click <strong>"Add Fare Rule"</strong></li>
                          <li>Fill in form:
                            <ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
                              <li><strong>Schedule (optional):</strong> Leave empty for global</li>
                              <li><strong>Route Code (optional):</strong> e.g., "ADD-DJI"</li>
                              <li><strong>Seat Class (required):</strong> Economy Regular, VIP Bed, etc.</li>
                              <li><strong>Fare in ETB (required):</strong> e.g., 350.00</li>
                              <li><strong>Passenger Type (optional):</strong> ADULT or CHILD</li>
                              <li><strong>Nationality (optional):</strong> Ethiopian, Djiboutian, Other</li>
                              <li><strong>Valid From & Until:</strong> Set date range</li>
                            </ul>
                          </li>
                          <li>Click <strong>"Save Fare Rule"</strong></li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Segment Fare Rule</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click <strong>"Add Fare Rule"</strong></li>
                          <li>Switch to <strong>"Segment Fares"</strong> tab</li>
                          <li>Select route from dropdown</li>
                          <li>Fill in form:
                            <ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
                              <li><strong>Origin Station (required):</strong> Starting point</li>
                              <li><strong>Destination Station (required):</strong> Must be after origin</li>
                              <li><strong>Seat Class (required):</strong> Class type</li>
                              <li><strong>Fare in ETB (required):</strong> Segment price</li>
                            </ul>
                          </li>
                          <li>Click <strong>"Save Segment Fare Rule"</strong></li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
                          <p className="text-sm"><strong>Example:</strong> ADD (Stop 1) to DDA (Stop 4) at 250 ETB</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Schedules How-To */}
              <div id="schedules" className="border-t pt-8">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">📅 How to Create Schedules</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to create schedules manually or in bulk with recurring patterns.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Single Schedule</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Go to <strong>Schedules</strong> page (Master Data)</li>
                          <li>Click <strong>"Create Schedule"</strong></li>
                          <li>Fill in required fields:
                            <ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
                              <li><strong>Train:</strong> Select from dropdown</li>
                              <li><strong>Route:</strong> Select from dropdown</li>
                              <li><strong>Departure Date & Time:</strong> Pick from date/time picker</li>
                              <li><strong>Arrival Date & Time:</strong> Must be after departure</li>
                            </ul>
                          </li>
                          <li>Select coaches to assign</li>
                          <li>Click <strong>"Create Schedule"</strong></li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Bulk Generate Recurring Schedules</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click <strong>"Bulk Generate"</strong> button</li>
                          <li>Fill in generation form:
                            <ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
                              <li><strong>Train (required):</strong> Select train</li>
                              <li><strong>Route (required):</strong> Select route</li>
                              <li><strong>Start Date & Time (required):</strong> First departure</li>
                              <li><strong>Duration (Hours):</strong> Trip length</li>
                              <li><strong>Repeat Every (Days):</strong> Daily or custom</li>
                              <li><strong>For Next (Days):</strong> How many days</li>
                            </ul>
                          </li>
                          <li>Review preview showing number of schedules</li>
                          <li>Click <strong>"Generate Schedules"</strong></li>
                        </ol>
                        <div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-green-600">
                          <p className="text-sm"><strong>Example:</strong> 30 days ÷ 1 day = ~30 daily schedules</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Seats How-To */}
              <div id="seats" className="border-t pt-8">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">💺 How to Manage Seats</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to view, block, and manage seat inventory using visual seat maps.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Seat Map</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Go to <strong>Seats</strong> page (Master Data)</li>
                          <li>Select a coach from dropdown</li>
                          <li>Visual seat map displays</li>
                          <li>Color-coded by status:
                            <ul className="list-disc pl-8 mt-2 text-sm">
                              <li>🟢 Green: Available</li>
                              <li>🟡 Yellow: Held</li>
                              <li>🔵 Blue: Booked</li>
                              <li>🔴 Red: Blocked</li>
                            </ul>
                          </li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Block a Seat</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on an available (green) seat</li>
                          <li>Click <strong>"Block"</strong> button</li>
                          <li>Select reason:
                            <ul className="list-disc pl-8 mt-2 text-sm">
                              <li>Maintenance</li>
                              <li>Reserved</li>
                              <li>Damaged</li>
                            </ul>
                          </li>
                          <li>Set until date (optional)</li>
                          <li>Add notes</li>
                          <li>Click <strong>"Block Seat"</strong></li>
                          <li>Seat turns red</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Unblock a Seat</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on a blocked (red) seat</li>
                          <li>Click <strong>"Unblock"</strong> button</li>
                          <li>Confirm action</li>
                          <li>Seat becomes available (green)</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Loyalty How-To */}
              <div id="loyalty" className="border-t pt-8">
                <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">🏆 How to Manage Loyalty Program</h2>
                <p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to view loyalty accounts, manage points, and administer rewards.</p>

                <div className="space-y-8">
                  <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">1</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Loyalty Accounts</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Go to <strong>Loyalty Program</strong> (Customer Services)</li>
                          <li>Table displays all loyalty accounts</li>
                          <li>Columns: Name, Tier, Points Balance, Lifetime Points</li>
                          <li>Search by name or filter by tier</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Adjust Points</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on a loyalty account</li>
                          <li>Click <strong>"Adjust Points"</strong> button</li>
                          <li>Enter points to add/subtract</li>
                          <li>Select reason: Bonus, Correction, Promotion, etc.</li>
                          <li>Add optional notes</li>
                          <li>Click <strong>"Apply"</strong></li>
                          <li>Balance updates immediately</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
                    <div className="flex items-start gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
                      <div>
                        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Award Rewards</h3>
                        <ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
                          <li>Click on a loyalty account</li>
                          <li>Click <strong>"Grant Reward"</strong> button</li>
                          <li>Select reward from list</li>
                          <li>Specify quantity if applicable</li>
                          <li>Click <strong>"Award"</strong></li>
                          <li>Confirmation email sent to passenger</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Common Tips */}
              <div className="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 p-6 rounded-lg border border-emerald-200 dark:border-emerald-800 border-t pt-8">
                <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-200 mb-4">💡 Common Tips & Tricks</h3>
                <ul className="list-disc pl-6 space-y-2 text-emerald-800 dark:text-emerald-300 text-sm">
                  <li><strong>Keyboard Shortcuts:</strong> Tab to navigate, Enter to submit</li>
                  <li><strong>Pagination:</strong> Change page size or jump to specific page</li>
                  <li><strong>Sidebar Collapse:</strong> Use chevron to minimize sidebar</li>
                  <li><strong>Dark Mode:</strong> Toggle with sun/moon icon in header</li>
                  <li><strong>Error Messages:</strong> Red text above forms if validation fails</li>
                  <li><strong>Success Notifications:</strong> Green banner appears for 3 seconds</li>
                  <li><strong>Undo Not Available:</strong> Most actions cannot be undone</li>
                  <li><strong>Real-time Updates:</strong> Refresh page to see changes by other users</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-12 bg-slate-900 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 text-center text-slate-400">
          <p>© 2026 Ethio-Djibouti Railway | How-To Guides v1.0</p>
          <p className="text-sm mt-2">Last Updated: January 15, 2026</p>
        </div>
      </div>
    </div>
  );
};

export default HowToPage;
