import { HowToStep } from './_shared';

const li = 'text-sm text-slate-700 dark:text-slate-300';
const ol = 'list-decimal pl-5 space-y-1 ' + li;

export default function AnalyticsSection() {
  return (
    <>
      <div id="reports" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📈 Reports</h2>
        <p className={li}>Generate revenue, occupancy, agent performance, and passenger analytics reports with custom date ranges. Access level: Supervisor, Admin.</p>
        <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-slate-600 dark:text-slate-400">
          {[
            ['Revenue', 'Total, by route, by class, by payment method'],
            ['Occupancy', 'Seat utilisation %, peak/off-peak analysis'],
            ['Agent Performance', 'Counter bookings, commission, ranking'],
            ['Passenger Analytics', 'New vs repeat, loyalty stats, regional split'],
          ].map(([t, d]) => (
            <div key={t} className="bg-slate-50 dark:bg-slate-700/50 rounded p-2 border border-slate-200 dark:border-slate-600">
              <div className="font-semibold text-slate-700 dark:text-slate-300">{t}</div>
              <div>{d}</div>
            </div>
          ))}
        </div>
      </div>
      <div id="reports-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📈 How-To: Generate Reports</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Configure & Generate">
            <ol className={ol}><li>Click <strong>Reports</strong> in Analytics &amp; Reports</li><li>Select report type, set date range, apply optional route/agent filters</li><li>Choose group-by: Day / Week / Month / Year</li><li>Click <strong>Generate Report</strong></li></ol>
          </HowToStep>
          <HowToStep number={2} title="Export">
            <ol className={ol}><li>Download as PDF, Excel, or CSV</li><li>Click <strong>Save Report</strong> to store config for one-click re-runs</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}