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 TourismSection() {
  return (
    <>
      {/* PACKAGES */}
      <div id="packages" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎒 Travel Packages</h2>
        <p className={li}>Create and manage pilgrimage/group travel packages with tiered pricing and capacity control. Access level: Supervisor, Admin.</p>
        <div className="mt-3 flex flex-wrap gap-2 text-xs">
          {['DRAFT','ACTIVE','SOLD_OUT','EXPIRED','CANCELLED'].map(s => (
            <span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
          ))}
        </div>
      </div>
      <div id="packages-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎒 How-To: Manage Travel Packages</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create a Package">
            <ol className={ol}>
              <li>Click <strong>New Package</strong></li>
              <li>Fill: code, name, origin/destination stations, outbound/return schedules</li>
              <li>Set total capacity, validity period, included services, and optional bus transfer</li>
              <li>Save — package starts in <strong>DRAFT</strong> status</li>
            </ol>
          </HowToStep>
          <HowToStep number={2} title="Configure Price Tiers">
            <ol className={ol}>
              <li>Click <strong>Tiers</strong> on the package row</li>
              <li>Add tiers: seat type, label, price (minor units), available seats</li>
              <li>Edit or delete tiers (restricted once bookings exist)</li>
            </ol>
          </HowToStep>
          <HowToStep number={3} title="Activate / Deactivate">
            <ol className={ol}>
              <li>Click <strong>Activate</strong> on a DRAFT package to open for booking</li>
              <li>Click <strong>Deactivate</strong> to stop new bookings (existing bookings remain valid)</li>
              <li>Click <strong>Delete</strong> only if no bookings exist</li>
            </ol>
          </HowToStep>
        </div>
      </div>

      {/* PACKAGE INQUIRIES */}
      <div id="package-inquiries" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📝 Package Inquiries</h2>
        <p className={li}>Track and convert incoming package booking inquiries. Access level: Agent, Supervisor, Admin.</p>
        <div className="mt-3 flex flex-wrap gap-2 text-xs">
          {['NEW','CONTACTED','CONVERTED','CLOSED'].map(s => (
            <span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
          ))}
        </div>
      </div>
      <div id="package-inquiries-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📝 How-To: Handle Inquiries</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="View & Filter">
            <ol className={ol}>
              <li>Click <strong>Inquiries</strong> in Tourism</li>
              <li>Filter by package or status</li>
              <li>View contact details, requested tier, and traveler count</li>
            </ol>
          </HowToStep>
          <HowToStep number={2} title="Update Status">
            <ol className={ol}>
              <li>Use the status dropdown on each row — saves immediately</li>
              <li>Workflow: <strong>NEW → CONTACTED → CONVERTED / CLOSED</strong></li>
              <li>Respond to NEW inquiries within 24 hours</li>
            </ol>
          </HowToStep>
          <HowToStep number={3} title="Clean Up">
            <ol className={ol}>
              <li>Click <strong>Delete</strong> to remove spam or duplicate inquiries</li>
            </ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}