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 CustomerServicesSection() {
  return (
    <>
      <div id="loyalty" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏆 Loyalty Program</h2>
        <p className={li}>View and manage passenger loyalty accounts, tiers, points, and rewards. Access level: Agent, Supervisor, Admin.</p>
        <div className="mt-3 overflow-x-auto">
          <table className="text-xs w-full border-collapse">
            <thead><tr className="bg-slate-100 dark:bg-slate-700">{['Tier','Points','Bonus'].map(h => <th key={h} className="text-left px-3 py-2 text-slate-700 dark:text-slate-300">{h}</th>)}</tr></thead>
            <tbody className="text-slate-600 dark:text-slate-400">
              <tr><td className="px-3 py-1">BRONZE</td><td>0–999</td><td>Standard</td></tr>
              <tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">SILVER</td><td>1,000–2,999</td><td>+5%</td></tr>
              <tr><td className="px-3 py-1">GOLD</td><td>3,000–4,999</td><td>+10%</td></tr>
              <tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">PLATINUM</td><td>5,000+</td><td>+15% + Priority</td></tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="loyalty-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏆 How-To: Manage Loyalty</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="View Accounts">
            <ol className={ol}><li>Click <strong>Loyalty Program</strong> in Customer Services</li><li>Search by name/email; filter by tier</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Adjust Points (Admin)">
            <ol className={ol}><li>Click <strong>Adjust Points</strong> on an account</li><li>Enter amount, select reason (Bonus / Correction / Promotion), click <strong>Apply</strong></li></ol>
          </HowToStep>
          <HowToStep number={3} title="Grant Rewards">
            <ol className={ol}><li>Click <strong>Grant Reward</strong>, select from catalog, specify quantity</li><li>Confirmation email sent to passenger automatically</li></ol>
          </HowToStep>
        </div>
      </div>

      <div id="notifications" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🔔 Notifications</h2>
        <p className={li}>View logs, manage templates, and send manual notifications via Email, SMS, or Push. Access level: Supervisor, Admin.</p>
      </div>
      <div id="notifications-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🔔 How-To: Manage Notifications</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="View Log">
            <ol className={ol}><li>Click <strong>Notifications</strong> in Customer Services</li><li>Filter by recipient, channel, status, or date; click <strong>Retry</strong> on failures (max 3)</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Send Manual Notification">
            <ol className={ol}><li>Click <strong>Send Notification</strong></li><li>Select recipients, choose template or custom message, pick channels</li><li>Preview then <strong>Send</strong></li></ol>
          </HowToStep>
          <HowToStep number={3} title="Manage Templates">
            <ol className={ol}><li>Open <strong>Templates</strong> tab; click a template to edit</li><li>Use placeholders: <code>{'{{name}}'}</code> <code>{'{{bookingRef}}'}</code></li><li>Click <strong>Add Template</strong> to create new ones</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}
