```react
import React, { useState, useEffect } from 'react';
import { 
  Calculator, 
  CheckSquare, 
  UserCheck, 
  Info, 
  Smartphone, 
  Monitor, 
  AlertCircle, 
  CheckCircle2,
  XCircle,
  FileText,
  CreditCard,
  Clock,
  ShieldCheck
} from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('overview');

return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 pb-12">
      {/* Header */}
      <header className="bg-red-700 text-white shadow-md">
        <div className="max-w-6xl mx-auto px-4 py-6">
          <div className="flex items-center gap-4">
            <div className="bg-white p-2 rounded-full">
              <img 
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Majlis_Amanah_Rakyat_%28MARA%29_Logo.svg/1200px-Majlis_Amanah_Rakyat_%28MARA%29_Logo.svg.png" 
                alt="MARA Logo" 
                className="w-12 h-12 object-contain"
                onError={(e) => {
                  e.target.onerror = null;
                  e.target.src = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'></circle><path d='M12 8v8'></path><path d='M8 12h8'></path></svg>";
                }}
              />
            </div>
            <div>
              <h1 className="text-2xl font-bold md:text-3xl">Papan Pemuka Skim WP 9.1</h1>
              <p className="text-red-100 text-sm md:text-base mt-1">
                Kemudahan Pembiayaan Komputer & Telefon Pintar Staf MARA
              </p>
            </div>
          </div>
        </div>
      </header>

{/* Navigation Tabs */}
      <div className="max-w-6xl mx-auto px-4 mt-6">
        <div className="flex overflow-x-auto bg-white rounded-xl shadow-sm border border-slate-200 p-1">
          <TabButton 
            active={activeTab === 'overview'} 
            onClick={() => setActiveTab('overview')} 
            icon={<Info size={18} />} 
            label="Ringkasan" 
          />
          <TabButton 
            active={activeTab === 'eligibility'} 
            onClick={() => setActiveTab('eligibility')} 
            icon={<UserCheck size={18} />} 
            label="Semak Kelayakan" 
          />
          <TabButton 
            active={activeTab === 'calculator'} 
            onClick={() => setActiveTab('calculator')} 
            icon={<Calculator size={18} />} 
            label="Kalkulator" 
          />
          <TabButton 
            active={activeTab === 'checklist'} 
            onClick={() => setActiveTab('checklist')} 
            icon={<CheckSquare size={18} />} 
            label="Senarai Semak" 
          />
        </div>
      </div>

{/* Main Content Area */}
      <main className="max-w-6xl mx-auto px-4 mt-6">
        {activeTab === 'overview' && <OverviewTab />}
        {activeTab === 'eligibility' && <EligibilityTab />}
        {activeTab === 'calculator' && <CalculatorTab />}
        {activeTab === 'checklist' && <ChecklistTab />}
      </main>
    </div>
  );
}

// --- Komponen Tab Navigasi ---
function TabButton({ active, onClick, icon, label }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-2 px-4 py-3 min-w-max rounded-lg font-medium transition-colors duration-200 flex-1 justify-center ${
        active 
          ? 'bg-red-50 text-red-700 shadow-sm' 
          : 'text-slate-500 hover:text-slate-800 hover:bg-slate-50'
      }`}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}

// --- TAB 1: RINGKASAN (OVERVIEW) ---
function OverviewTab() {
  return (
    <div className="space-y-6">
      {/* Quick Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard icon={<CreditCard className="text-blue-500" />} title="Had Pembiayaan" value="RM 7,000" sub="Maksimum" />
        <StatCard icon={<Clock className="text-orange-500" />} title="Tempoh Maksimum" value="60 Bulan" sub="Bayaran balik" />
        <StatCard icon={<ShieldCheck className="text-green-500" />} title="Kadar Keuntungan" value="2% Setahun" sub="Kadar tetap" />
        <StatCard icon={<Smartphone className="text-purple-500" />} title="Kombinasi Peranti" value="2 Peranti" sub="Maksimum (Jenis berbeza)" />
      </div>

{/* Details Sections */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
          <h3 className="text-lg font-bold flex items-center gap-2 mb-4 text-slate-800">
            <Monitor className="text-red-600" /> Peranti Yang Dibenarkan
          </h3>
          <ul className="space-y-3">
            <li className="flex items-start gap-2">
              <CheckCircle2 size={18} className="text-green-500 mt-0.5 shrink-0" />
              <span><strong>Komputer:</strong> Meja (Desktop), Riba (Laptop), Tablet.</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle2 size={18} className="text-green-500 mt-0.5 shrink-0" />
              <span><strong>Perkakasan Komputer:</strong> Pencetak, Pengimbas, Peranti storan tambahan (SSD/HDD).</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle2 size={18} className="text-green-500 mt-0.5 shrink-0" />
              <span><strong>Telefon Pintar:</strong> Terhad 1 unit baharu (Boleh gabung dgn 1 peranti lain). Termasuk pengecas asal, fon telinga, stylus.</span>
            </li>
            <li className="flex items-start gap-2 text-red-600 bg-red-50 p-2 rounded-md mt-2">
              <XCircle size={18} className="mt-0.5 shrink-0" />
              <span className="text-sm"><strong>TIDAK Dibenarkan:</strong> Aksesori estetik, tripod, gimbal, lensa kamera, dok pengecas magnetik, dll.</span>
            </li>
          </ul>
        </div>

<div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
          <h3 className="text-lg font-bold flex items-center gap-2 mb-4 text-slate-800">
            <FileText className="text-red-600" /> Syarat Am Pembelian
          </h3>
          <div className="space-y-4">
            <div className="border-l-4 border-blue-400 pl-4 py-1">
              <h4 className="font-semibold text-slate-800">Pembelian Langsung</h4>
              <p className="text-sm text-slate-600">Melalui syarikat berdaftar di negeri yang sama dengan pusat perkhidmatan/kediaman.</p>
            </div>
            <div className="border-l-4 border-orange-400 pl-4 py-1">
              <h4 className="font-semibold text-slate-800">Platform E-Dagang</h4>
              <p className="text-sm text-slate-600">Hanya Pengedar Sah (Authorized Dealer). Konsep "Pay and Claim".</p>
            </div>
            <div className="border-l-4 border-purple-400 pl-4 py-1">
              <h4 className="font-semibold text-slate-800">Pakej Jalur Lebar (Telco)</h4>
              <p className="text-sm text-slate-600">Dibenarkan jika bayaran peranti dibuat <i>lumpsum</i> (sekaligus). Tidak meliputi bil bulanan telco.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatCard({ icon, title, value, sub }) {
  return (
    <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex items-center gap-4">
      <div className="p-3 bg-slate-50 rounded-lg">
        {icon}
      </div>
      <div>
        <p className="text-sm text-slate-500 font-medium">{title}</p>
        <p className="text-xl font-bold text-slate-800">{value}</p>
        <p className="text-xs text-slate-400 mt-1">{sub}</p>
      </div>
    </div>
  );
}

// --- TAB 2: SEMAKAN KELAYAKAN (ELIGIBILITY) ---
function EligibilityTab() {
  const [answers, setAnswers] = useState({
    employmentType: '',
    contractMonths: '',
    disciplinary: '',
    yearsSinceLast: '',
  });

const [result, setResult] = useState(null);

const checkEligibility = () => {
    let isEligible = true;
    let reasons = [];

if (!answers.employmentType || !answers.disciplinary || !answers.yearsSinceLast || (answers.employmentType === 'contract' && !answers.contractMonths)) {
      setResult({ status: 'incomplete', msg: 'Sila jawab semua soalan untuk menyemak.' });
      return;
    }

if (answers.employmentType === 'contract' && parseInt(answers.contractMonths) < 12) {
      isEligible = false;
      reasons.push('Staf kontrak mesti berkhidmat sekurang-kurangnya 12 bulan.');
    }
    if (answers.disciplinary === 'yes') {
      isEligible = false;
      reasons.push('Mempunyai rekod/siasatan tatatertib atau keterhutangan tinggi.');
    }
    if (parseInt(answers.yearsSinceLast) < 3) {
      isEligible = false;
      reasons.push('Pembiayaan sebelum ini kurang dari 3 tahun lalu.');
    }

if (isEligible) {
      setResult({ status: 'pass', msg: 'Tahniah! Anda berkemungkinan besar layak memohon skim ini.', guarantor: answers.employmentType === 'contract' });
    } else {
      setResult({ status: 'fail', msg: 'Maaf, anda tidak memenuhi kriteria kerana:', reasons });
    }
  };

return (
    <div className="bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200 max-w-3xl mx-auto">
      <h2 className="text-2xl font-bold mb-6 text-slate-800 border-b pb-4">Borang Semakan Kelayakan</h2>

<div className="space-y-6">
        {/* Soalan 1 */}
        <div>
          <label className="block font-medium text-slate-700 mb-2">1. Apakah taraf perkhidmatan anda?</label>
          <div className="flex gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="empType" className="w-4 h-4 text-red-600" checked={answers.employmentType === 'tetap'} onChange={() => setAnswers({...answers, employmentType: 'tetap'})} />
              Tetap
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="empType" className="w-4 h-4 text-red-600" checked={answers.employmentType === 'contract'} onChange={() => setAnswers({...answers, employmentType: 'contract'})} />
              Kontrak
            </label>
          </div>
        </div>

{/* Soalan 1.1 (Conditional) */}
        {answers.employmentType === 'contract' && (
          <div className="ml-4 pl-4 border-l-2 border-red-200">
            <label className="block font-medium text-slate-700 mb-2">1(a). Berapa lamakah tempoh perkhidmatan anda dengan MARA?</label>
            <select className="border border-slate-300 rounded-md px-3 py-2 w-full md:w-64" value={answers.contractMonths} onChange={(e) => setAnswers({...answers, contractMonths: e.target.value})}>
              <option value="">Pilih tempoh...</option>
              <option value="6">Kurang 12 bulan</option>
              <option value="12">12 bulan atau lebih</option>
            </select>
          </div>
        )}

{/* Soalan 2 */}
        <div>
          <label className="block font-medium text-slate-700 mb-2">2. Adakah anda sedang dalam siasatan tatatertib atau keterhutangan kewangan yang tinggi?</label>
          <div className="flex gap-4">
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="disc" className="w-4 h-4 text-red-600" checked={answers.disciplinary === 'yes'} onChange={() => setAnswers({...answers, disciplinary: 'yes'})} />
              Ya
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="disc" className="w-4 h-4 text-red-600" checked={answers.disciplinary === 'no'} onChange={() => setAnswers({...answers, disciplinary: 'no'})} />
              Tidak
            </label>
          </div>
        </div>

{/* Soalan 3 */}
        <div>
          <label className="block font-medium text-slate-700 mb-2">3. Bilakah kali terakhir anda mendapat kelulusan pembiayaan komputer/telefon MARA?</label>
          <select className="border border-slate-300 rounded-md px-3 py-2 w-full md:w-64" value={answers.yearsSinceLast} onChange={(e) => setAnswers({...answers, yearsSinceLast: e.target.value})}>
            <option value="">Pilih jawapan...</option>
            <option value="5">Belum pernah / Lebih 3 tahun</option>
            <option value="2">Kurang dari 3 tahun</option>
          </select>
        </div>

<button 
          onClick={checkEligibility}
          className="bg-red-700 hover:bg-red-800 text-white font-medium py-2.5 px-6 rounded-lg transition-colors"
        >
          Semak Kelayakan
        </button>

{/* Hasil Semakan */}
        {result && (
          <div className={`mt-6 p-4 rounded-lg border flex gap-4 items-start ${
            result.status === 'pass' ? 'bg-green-50 border-green-200' : 
            result.status === 'fail' ? 'bg-red-50 border-red-200' : 
            'bg-yellow-50 border-yellow-200'
          }`}>
            {result.status === 'pass' ? <CheckCircle2 className="text-green-600 shrink-0 mt-1" /> : 
             result.status === 'fail' ? <XCircle className="text-red-600 shrink-0 mt-1" /> : 
             <AlertCircle className="text-yellow-600 shrink-0 mt-1" />}
            <div>
              <p className={`font-semibold ${
                result.status === 'pass' ? 'text-green-800' : 
                result.status === 'fail' ? 'text-red-800' : 
                'text-yellow-800'
              }`}>{result.msg}</p>

{result.reasons && (
                <ul className="list-disc ml-5 mt-2 text-red-700 text-sm">
                  {result.reasons.map((r, i) => <li key={i}>{r}</li>)}
                </ul>
              )}
              {result.guarantor && (
                <p className="mt-2 text-sm text-green-700 bg-green-100 p-2 rounded inline-block">
                  <strong>Peringatan:</strong> Sebagai staf kontrak, anda wajib menyertakan <strong>seorang penjamin</strong> (Staf MARA berjawatan tetap).
                </p>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// --- TAB 3: KALKULATOR (CALCULATOR) ---
function CalculatorTab() {
  const [inputAmount, setInputAmount] = useState(3500);
  const [tenure, setTenure] = useState(36);
  const rate = 0.02; // 2% profit rate

// Logic: Bundarkan kepada ratusan ringgit terdekat yang lebih rendah (WP 9.1 Para 11.1)
  const roundedAmount = Math.min(7000, Math.floor(inputAmount / 100) * 100);

const profit = roundedAmount * rate * (tenure / 12);
  const totalPayable = roundedAmount + profit;
  const monthlyInstallment = tenure > 0 ? (totalPayable / tenure) : 0;

return (
    <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
      {/* Input Section */}
      <div className="bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200 md:col-span-7">
        <h2 className="text-2xl font-bold mb-6 text-slate-800 border-b pb-4">Simulasi Pembiayaan</h2>

<div className="space-y-8">
          <div>
            <div className="flex justify-between mb-2">
              <label className="font-medium text-slate-700">Harga Peranti (Kos Sebenar) - RM</label>
              <span className="font-bold text-red-700">RM {inputAmount.toLocaleString()}</span>
            </div>
            <input 
              type="range" 
              min="500" 
              max="10000" 
              step="50" 
              value={inputAmount} 
              onChange={(e) => setInputAmount(Number(e.target.value))}
              className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-red-600"
            />
            <div className="flex justify-between text-xs text-slate-400 mt-2">
              <span>RM 500</span>
              <span>RM 10,000</span>
            </div>
            {inputAmount > 7000 && (
              <p className="text-xs text-orange-600 mt-2 flex items-center gap-1">
                <AlertCircle size={14}/> Had maksimum pembiayaan MARA adalah RM 7,000. Baki RM {(inputAmount - 7000).toLocaleString()} perlu ditanggung sendiri.
              </p>
            )}
          </div>

<div>
            <div className="flex justify-between mb-2">
              <label className="font-medium text-slate-700">Tempoh Bayaran Balik</label>
              <span className="font-bold text-red-700">{tenure} Bulan</span>
            </div>
            <input 
              type="range" 
              min="12" 
              max="60" 
              step="12" 
              value={tenure} 
              onChange={(e) => setTenure(Number(e.target.value))}
              className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-red-600"
            />
            <div className="flex justify-between text-xs text-slate-400 mt-2">
              <span>1 Tahun</span>
              <span>Maksimum 5 Tahun</span>
            </div>
          </div>
        </div>

<div className="mt-8 bg-blue-50 p-4 rounded-lg flex items-start gap-3">
          <Info className="text-blue-600 shrink-0 mt-0.5" />
          <p className="text-sm text-blue-800">
            <strong>Nota Peringatan (WP 9.1):</strong> Amaun pembiayaan akan dibundarkan ke ratusan ringgit terdekat yang <strong>lebih rendah</strong>. 
            Contoh: Jika sebut harga RM 6,850, pembiayaan diluluskan ialah RM 6,800.
          </p>
        </div>
      </div>

{/* Results Section */}
      <div className="bg-red-700 p-6 md:p-8 rounded-xl shadow-lg text-white md:col-span-5 flex flex-col justify-center">
        <h3 className="text-red-100 mb-6 font-medium uppercase tracking-wider text-sm">Ringkasan Pembiayaan</h3>

<div className="space-y-6">
          <div className="border-b border-red-500/50 pb-4">
            <p className="text-red-200 text-sm mb-1">Amaun Diluluskan (Bundar ke bawah)</p>
            <p className="text-3xl font-bold">RM {roundedAmount.toLocaleString()}</p>
          </div>

<div className="border-b border-red-500/50 pb-4 flex justify-between items-center">
            <div>
              <p className="text-red-200 text-sm mb-1">Kadar Keuntungan (2%)</p>
              <p className="text-xl font-semibold">RM {profit.toLocaleString()}</p>
            </div>
            <div className="text-right">
              <p className="text-red-200 text-sm mb-1">Jumlah Keseluruhan</p>
              <p className="text-xl font-semibold">RM {totalPayable.toLocaleString()}</p>
            </div>
          </div>

<div className="bg-white text-slate-800 p-4 rounded-lg mt-4 shadow-inner text-center">
            <p className="text-sm font-medium text-slate-500 mb-1">Anggaran Ansuran Bulanan</p>
            <p className="text-4xl font-extrabold text-red-600">
              RM {monthlyInstallment.toFixed(2)}
            </p>
            <p className="text-xs text-slate-400 mt-2">*Potongan tidak boleh melebihi 1/3 gaji emolumen</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- TAB 4: SENARAI SEMAK (CHECKLIST) ---
function ChecklistTab() {
  const [method, setMethod] = useState('direct');

const methods = [
    { id: 'direct', name: 'Pembelian Langsung (Kedai Fizikal)' },
    { id: 'ecommerce', name: 'Platform E-Dagang (Pay & Claim)' },
    { id: 'telco', name: 'Pakej Jalur Lebar (Telco)' },
  ];

const getChecklist = () => {
    const commonDocs = [
      "Borang Permohonan (Lampiran A) - 3 salinan asal, lengkap diisi.",
      "Satu (1) Salinan Kad Pengenalan - disahkan oleh Pegawai Mengawal Pusat.",
      "Satu (1) Salinan Penyata Gaji Terkini - disahkan oleh Pegawai Mengawal Pusat."
    ];

if (method === 'direct') {
      return [
        ...commonDocs,
        "Sebut Harga Asal (Original Quotation) berserta Cop Syarikat Pembekal (Sebut harga e-mel/fotostat TIDAK diterima)."
      ];
    } else if (method === 'ecommerce') {
      return [
        ...commonDocs,
        "Tangkapan Skrin/Cetakan Halaman Produk yang jelas menunjukkan: Nama produk, harga, nama penjual, dan status pengedar sah (Authorized Dealer).",
        "Dokumen selepas kelulusan (untuk bayaran): Invois, Resit Asal Pembelian, Akuan Penerimaan (Delivery Order), dan Salinan Penyata Bank staf."
      ];
    } else {
      return [
        ...commonDocs,
        "Flyer/Promo Rasmi dari laman web atau katalog Telco yang menunjukkan pakej pembelian peranti."
      ];
    }
  };

return (
    <div className="bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200">
      <h2 className="text-2xl font-bold mb-6 text-slate-800 border-b pb-4">Senarai Semak Dokumen Permohonan</h2>

<div className="mb-6">
        <label className="block font-medium text-slate-700 mb-2">Pilih Kaedah Pembelian:</label>
        <div className="flex flex-wrap gap-3">
          {methods.map(m => (
            <button
              key={m.id}
              onClick={() => setMethod(m.id)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors border ${
                method === m.id 
                  ? 'bg-red-50 border-red-600 text-red-700' 
                  : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
              }`}
            >
              {m.name}
            </button>
          ))}
        </div>
      </div>

<div className="bg-slate-50 p-6 rounded-lg border border-slate-200">
        <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
          <FileText className="text-red-600" /> Dokumen Yang Diperlukan
        </h3>
        <ul className="space-y-4">
          {getChecklist().map((item, index) => (
            <li key={index} className="flex items-start gap-3 bg-white p-3 rounded shadow-sm border border-slate-100">
              <input type="checkbox" className="mt-1 w-5 h-5 text-red-600 rounded border-gray-300 cursor-pointer accent-red-600" />
              <span className="text-slate-700">{item}</span>
            </li>
          ))}
        </ul>

{method === 'ecommerce' && (
          <div className="mt-6 bg-yellow-50 p-4 rounded border border-yellow-200 text-sm text-yellow-800 flex gap-2">
             <AlertCircle className="shrink-0" size={18}/>
             <p><strong>Perhatian E-Dagang:</strong> MARA akan mengeluarkan Surat Pra-Kelulusan (Lampiran D) dahulu. Anda perlu membeli menggunakan wang sendiri, kemudian tuntut (claim) bayaran dari MARA beserta resit asal dalam tempoh 2 bulan.</p>
          </div>
        )}
      </div>
    </div>
  );
}

```