export default function OverviewSection() {
  return (
    <>
      <div id="about">
        <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Welcome to EDR Passenger Backoffice</h2>
        <p className="text-slate-600 dark:text-slate-300 mb-4">
          Comprehensive management system for the Ethio-Djibouti Railway passenger platform. Covers bookings, fleet, financials, security, and analytics for agents, supervisors, and admins.
        </p>
        <div className="bg-emerald-50 dark:bg-emerald-900/20 p-5 rounded-lg border border-emerald-200 dark:border-emerald-800">
          <h3 className="text-base font-semibold text-emerald-900 dark:text-emerald-100 mb-2">✅ Version 1.0.0 — Complete Platform</h3>
          <ul className="text-emerald-800 dark:text-emerald-200 space-y-1 text-sm">
            <li>• <strong>Roles:</strong> AGENT · SUPERVISOR · ADMIN · STAFF</li>
            <li>• <strong>Auth:</strong> Corporate IAM (back-office) + JWT (passenger-facing)</li>
            <li>• <strong>Currencies:</strong> ETB (transaction) · DJF · USD (display)</li>
            <li>• <strong>Age pricing:</strong> ADULT ≥5 yrs full fare · CHILD &lt;5 yrs first free</li>
            <li>• <strong>ID verification:</strong> Verifayda 2.0 for Ethiopian nationals</li>
          </ul>
        </div>
      </div>

      <div id="features" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🌟 Key Features</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-700 dark:text-slate-300">
          {[
            ['📊 Operations', 'Bookings, passengers, tickets, boarding, excess baggage'],
            ['🎒 Tourism', 'Travel packages with tiered pricing and inquiry management'],
            ['🏢 Master Data', 'Stations, trains, coaches, seats, classes, routes, schedules'],
            ['💰 Financial', 'Fares, tariffs, payments, currencies, promos, wallets'],
            ['🎁 Customer Services', 'Loyalty program and notification management'],
            ['🔒 Security', 'Audit logs and fraud detection'],
            ['📈 Analytics', 'Revenue, occupancy, and agent performance reports'],
            ['⚙️ System', 'Agents, users, settings, health monitoring, app releases'],
          ].map(([title, desc]) => (
            <div key={title} className="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-3 border border-slate-200 dark:border-slate-600">
              <div className="font-semibold mb-1">{title}</div>
              <div className="text-slate-500 dark:text-slate-400">{desc}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}
