import React from 'react';

export const HowToStep = ({ number, title, children }: { number: number; title: string; children: React.ReactNode }) => (
  <div className="bg-blue-50 dark:bg-blue-900/20 p-5 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-9 h-9 rounded-full bg-blue-600 text-white font-bold flex-shrink-0 text-sm">{number}</div>
      <div className="flex-1">
        <h4 className="text-base font-semibold text-slate-900 dark:text-white mb-2">{title}</h4>
        {children}
      </div>
    </div>
  </div>
);

export const navSections = [
  {
    id: 'overview', title: '📋 Overview',
    items: [
      { id: 'about', label: 'Application Overview' },
      { id: 'features', label: 'Key Features' },
    ],
  },
  {
    id: 'operations', title: '📊 Operations',
    items: [
      { id: 'bookings', label: 'Bookings' }, { id: 'bookings-how', label: '→ How-To' },
      { id: 'passengers', label: 'Passengers' }, { id: 'passengers-how', label: '→ How-To' },
      { id: 'tickets', label: 'Tickets' }, { id: 'tickets-how', label: '→ How-To' },
      { id: 'boarding', label: 'Boarding' }, { id: 'boarding-how', label: '→ How-To' },
      { id: 'excess-baggage', label: 'Luggage (Excess)' }, { id: 'excess-baggage-how', label: '→ How-To' },
    ],
  },
  {
    id: 'tourism', title: '🎒 Tourism',
    items: [
      { id: 'packages', label: 'Travel Packages' }, { id: 'packages-how', label: '→ How-To' },
      { id: 'package-inquiries', label: 'Inquiries' }, { id: 'package-inquiries-how', label: '→ How-To' },
    ],
  },
  {
    id: 'masterdata', title: '🏢 Master Data',
    items: [
      { id: 'stations', label: 'Stations' }, { id: 'stations-how', label: '→ How-To' },
      { id: 'trains', label: 'Trains' }, { id: 'trains-how', label: '→ How-To' },
      { id: 'coaches', label: 'Coaches' }, { id: 'coaches-how', label: '→ How-To' },
      { id: 'seats', label: 'Seats' }, { id: 'seats-how', label: '→ How-To' },
      { id: 'classes', label: 'Seat Classes' }, { id: 'classes-how', label: '→ How-To' },
      { id: 'routes', label: 'Routes' }, { id: 'routes-how', label: '→ How-To' },
      { id: 'schedules', label: 'Schedules' }, { id: 'schedules-how', label: '→ How-To' },
    ],
  },
  {
    id: 'financial', title: '💰 Financial',
    items: [
      { id: 'pricing', label: 'Pricing & Fares' }, { id: 'pricing-how', label: '→ How-To' },
      { id: 'tariff-rates', label: 'Tariff Rates' }, { id: 'tariff-rates-how', label: '→ How-To' },
      { id: 'fare-rules', label: 'Fare Rules' }, { id: 'fare-rules-how', label: '→ How-To' },
      { id: 'payments', label: 'Payments' }, { id: 'payments-how', label: '→ How-To' },
      { id: 'currencies', label: 'Currencies' }, { id: 'currencies-how', label: '→ How-To' },
      { id: 'promos', label: 'Promo Codes' }, { id: 'promos-how', label: '→ How-To' },
      { id: 'payment-methods', label: 'Payment Methods' }, { id: 'payment-methods-how', label: '→ How-To' },
      { id: 'wallet-accounts', label: 'Wallet Accounts' }, { id: 'wallet-accounts-how', label: '→ How-To' },
    ],
  },
  {
    id: 'services', title: '🎁 Customer Services',
    items: [
      { id: 'loyalty', label: 'Loyalty Program' }, { id: 'loyalty-how', label: '→ How-To' },
      { id: 'notifications', label: 'Notifications' }, { id: 'notifications-how', label: '→ How-To' },
    ],
  },
  {
    id: 'security', title: '🔒 Security',
    items: [
      { id: 'audit', label: 'Audit Logs' }, { id: 'audit-how', label: '→ How-To' },
      { id: 'fraud', label: 'Fraud Detection' }, { id: 'fraud-how', label: '→ How-To' },
    ],
  },
  {
    id: 'analytics', title: '📈 Analytics',
    items: [
      { id: 'reports', label: 'Reports' }, { id: 'reports-how', label: '→ How-To' },
    ],
  },
  {
    id: 'system', title: '⚙️ System',
    items: [
      { id: 'agents', label: 'Agents' }, { id: 'agents-how', label: '→ How-To' },
      { id: 'users', label: 'Users' }, { id: 'users-how', label: '→ How-To' },
      { id: 'settings', label: 'Settings' }, { id: 'settings-how', label: '→ How-To' },
      { id: 'health', label: 'Health' }, { id: 'health-how', label: '→ How-To' },
      { id: 'app-releases', label: 'App Releases' }, { id: 'app-releases-how', label: '→ How-To' },
    ],
  },
];
