/* Fees page — branch + programme switcher with itemized breakdown */

const FEE_DATA = {
  'bukit-jelutong': {
    label: 'Bukit Jelutong',
    color: 'orange',
    discount: 200,
    discountNote: 'Discount valid until 25th Dec 2025 / Open Day',
    playschool: {
      enrolment: [
        { name: 'Registration', sub: 'one-off, non-refundable', amt: 330 },
        { name: 'Insurance Takaful', sub: 'coverage', amt: 11 },
        { name: 'Learning Materials', sub: 'stationaries, arts & crafts', amt: 500 },
        { name: 'Activities', sub: 'monthly themed activities', amt: 680 },
        { name: 'Filing & assessments', sub: '', amt: 120 },
        { name: 'Events', sub: 'sports, t-shirt, hajj cilik, PTM', amt: 120 },
      ],
      monthly: [
        { age: '2–3 years', basic: null, midday: 700, midday_hours: '8am–2pm', fullday: 850 },
      ],
    },
    preschool: {
      enrolment: [
        { name: 'Registration', sub: 'one-off, non-refundable', amt: { nursery: 300, reception: 300, year1: 300 } },
        { name: 'Administration', sub: '', amt: { nursery: 90, reception: 90, year1: 90 } },
        { name: 'Uniform', sub: '1 set sports wear', amt: 'FOC' },
        { name: 'Insurance Takaful', sub: 'coverage', amt: { nursery: 11, reception: 11, year1: 11 } },
        { name: 'Learning Materials', sub: 'stationaries, arts & crafts, filing', amt: { nursery: 930, reception: 790, year1: 790 } },
        { name: 'Activities', sub: 'monthly activities, science', amt: { nursery: 950, reception: 900, year1: 900 } },
        { name: 'Books & worksheets', sub: '', amt: { nursery: 110, reception: 250, year1: 280 } },
        { name: 'Events', sub: 'school trip, sports, hajj cilik, PTM', amt: { nursery: 300, reception: 400, year1: 470 }, sub2: 'Nursery: minus trip' },
      ],
      monthly: [
        { age: 'Nursery (4 yo)', basic: 400, midday: 550, midday_hours: '8am–2pm', fullday: 690 },
        { age: 'Reception (5 yo)', basic: null, midday: 550, midday_hours: '8am–2.30pm', fullday: 690 },
        { age: 'Year One (6 yo)', basic: null, midday: 550, midday_hours: '8am–3pm', fullday: 690 },
      ],
    },
  },
  'cyberjaya': {
    label: 'Cyberjaya',
    color: 'mint',
    discount: 200,
    discountNote: 'Discount valid until 25th Dec 2025 / Open Day',
    playschool: {
      enrolment: [
        { name: 'Registration', sub: 'one-off, non-refundable', amt: 330 },
        { name: 'Insurance Takaful', sub: 'coverage', amt: 11 },
        { name: 'Learning Materials', sub: 'stationaries, arts & crafts', amt: 500 },
        { name: 'Activities', sub: 'monthly themed activities', amt: 680 },
        { name: 'Filing & assessments', sub: '', amt: 120 },
        { name: 'Events', sub: 'sports, t-shirt, hajj cilik, PTM', amt: 120 },
      ],
      monthly: [
        { age: '2–3 years', basic: null, midday: 700, midday_hours: '8am–2pm', fullday: 850 },
      ],
    },
    preschool: {
      enrolment: [
        { name: 'Registration', sub: 'one-off, non-refundable', amt: { nursery: 300, reception: 300, year1: 300 } },
        { name: 'Administration', sub: '', amt: { nursery: 90, reception: 90, year1: 90 } },
        { name: 'Uniform', sub: '1 set sports wear', amt: 'FOC' },
        { name: 'Insurance Takaful', sub: 'coverage', amt: { nursery: 11, reception: 11, year1: 11 } },
        { name: 'Learning Materials', sub: 'stationaries, arts & crafts, filing', amt: { nursery: 930, reception: 790, year1: 790 } },
        { name: 'Activities', sub: 'monthly activities, science', amt: { nursery: 950, reception: 900, year1: 900 } },
        { name: 'Books & worksheets', sub: '', amt: { nursery: 110, reception: 250, year1: 280 } },
        { name: 'Events', sub: 'school trip, sports, hajj cilik, PTM', amt: { nursery: 300, reception: 400, year1: 470 } },
      ],
      monthly: [
        { age: 'Nursery (4 yo)', basic: 400, midday: 550, midday_hours: '8am–2pm', fullday: 690 },
        { age: 'Reception (5 yo)', basic: null, midday: 550, midday_hours: '8am–2.30pm', fullday: 690 },
        { age: 'Year One (6 yo)', basic: null, midday: 550, midday_hours: '8am–3pm', fullday: 690 },
      ],
    },
  },
  'kota-damansara': {
    label: 'Kota Damansara',
    color: 'sky',
    discount: 500,
    discountNote: 'Discount valid during Open Day only',
    playschool: null,
    preschool: {
      enrolment: [
        { name: 'Registration', sub: 'one-off, non-refundable', amt: { nursery: 330, reception: 330, year1: 330 } },
        { name: 'Insurance Takaful', sub: 'coverage', amt: { nursery: 11, reception: 11, year1: 11 } },
        { name: 'Learning Materials', sub: 'stationaries, arts & crafts, filing', amt: { nursery: 990, reception: 850, year1: 850 } },
        { name: 'Activities', sub: 'monthly activities, science', amt: { nursery: 950, reception: 900, year1: 900 } },
        { name: 'Books & worksheets', sub: '', amt: { nursery: 110, reception: 250, year1: 280 } },
        { name: 'Events', sub: 'school trip, sports, hajj cilik, PTM', amt: { nursery: 300, reception: 400, year1: 470 } },
      ],
      monthly: [
        { age: 'Nursery (4 yo)', basic: 400, midday: 500, midday_hours: '8am–2pm', fullday: 620, fullday2: 650 },
        { age: 'Reception (5 yo)', basic: 400, midday: 500, midday_hours: '8am–2.30pm', fullday: 620, fullday2: 650 },
        { age: 'Year One (6 yo)', basic: null, midday: 500, midday_hours: '8am–3pm', fullday: 620, fullday2: 650 },
      ],
    },
  },
};

const OPTIONAL_FEES = [
  { name: 'Sports uniform', amt: 60 },
  { name: 'Formal uniform', amt: 60 },
  { name: 'Bedding', sub: 'one-off, full-day only', amt: 100 },
  { name: 'Scarf for girls', amt: 25, unit: '/pc' },
  { name: 'Potty training', sub: 'children with diapers', amt: 300 },
  { name: 'Graduation', sub: 'Year One only', amt: 150 },
];

function FeesHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 60, paddingBottom: 0, background: 'linear-gradient(180deg, #E8F5C4 0%, #FFE7C8 100%)' }}>
      <Cloud size={130} style={{ top: '15%', left: '6%' }} />
      <Cloud size={90} style={{ top: '30%', right: '12%' }} />
      <Star size={28} color="var(--yellow)" style={{ top: '20%', right: '30%' }} />
      <Pencil style={{ top: '50%', left: '6%' }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '80px 32px 100px', textAlign: 'center' }}>
        <span className="section-eyebrow"><span className="dot-marker" /> Enrolment 2026</span>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 80px)', fontWeight: 600, lineHeight: 1, letterSpacing: '-0.02em' }}>
          Transparent <span style={{ color: 'var(--orange)' }}>fees</span>,<br />no hidden surprises.
        </h1>
        <p className="section-lead" style={{ margin: '24px auto 0' }}>
          Pick a branch and programme to see the full breakdown. All amounts are in Malaysian Ringgit (MYR).
        </p>
      </div>
      <div style={{ position: 'relative', height: 80, marginTop: -20 }}>
        <svg viewBox="0 0 1440 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
          <path d="M0,100 L0,60 Q60,30 140,55 Q200,15 280,45 Q360,10 440,40 Q520,5 600,35 Q680,0 760,30 Q840,5 920,35 Q1000,15 1080,40 Q1160,10 1240,45 Q1320,20 1400,50 Q1440,55 1440,100 Z" fill="#FFF8EE" />
        </svg>
      </div>
    </section>
  );
}

function BranchSwitcher({ branch, setBranch, programme, setProgramme }) {
  const branches = [
    { key: 'bukit-jelutong', label: 'Bukit Jelutong' },
    { key: 'cyberjaya', label: 'Cyberjaya' },
    { key: 'kota-damansara', label: 'Kota Damansara' },
  ];
  const branchData = FEE_DATA[branch];
  const availablePrograms = [];
  if (branchData.playschool) availablePrograms.push({ key: 'playschool', label: 'Playschool · 2-3 yo' });
  if (branchData.preschool) availablePrograms.push({ key: 'preschool', label: 'Preschool · 4-6 yo' });

  return (
    <div className="container" style={{ marginTop: -20, position: 'relative', zIndex: 5 }}>
      <div style={{ background: '#fff', borderRadius: 28, padding: 24, boxShadow: 'var(--shadow-md)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--charcoal-soft)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>1. Pick a branch</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {branches.map(b => (
              <button key={b.key} onClick={() => {
                setBranch(b.key);
                if (!FEE_DATA[b.key].playschool && programme === 'playschool') setProgramme('preschool');
              }}
                style={{
                  padding: '12px 18px',
                  borderRadius: 14,
                  background: branch === b.key ? 'var(--charcoal)' : 'var(--cream)',
                  color: branch === b.key ? '#fff' : 'var(--charcoal)',
                  fontWeight: 700,
                  fontSize: 14,
                  flex: '1 1 auto',
                }}>{b.label}</button>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--charcoal-soft)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>2. Pick a programme</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {availablePrograms.map(p => (
              <button key={p.key} onClick={() => setProgramme(p.key)}
                style={{
                  padding: '12px 18px',
                  borderRadius: 14,
                  background: programme === p.key ? 'var(--orange)' : 'var(--cream)',
                  color: programme === p.key ? '#fff' : 'var(--charcoal)',
                  fontWeight: 700,
                  fontSize: 14,
                  flex: '1 1 auto',
                }}>{p.label}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function PreschoolFeesTable({ data, branchData }) {
  const cols = ['nursery', 'reception', 'year1'];
  const colLabels = { nursery: 'Nursery · 4 yo', reception: 'Reception · 5 yo', year1: 'Year One · 6 yo' };
  const totals = cols.reduce((acc, c) => {
    acc[c] = data.enrolment.reduce((sum, item) => {
      const a = typeof item.amt === 'object' ? item.amt[c] : (item.amt === 'FOC' ? 0 : item.amt);
      return sum + (typeof a === 'number' ? a : 0);
    }, 0);
    return acc;
  }, {});
  const afterDiscount = cols.reduce((acc, c) => { acc[c] = totals[c] - branchData.discount; return acc; }, {});

  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '20px 28px', background: 'var(--mint)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ fontFamily: 'Fredoka', fontSize: 22 }}>Enrolment fees · 2026</h3>
        <span style={{ fontSize: 13, fontWeight: 600, color: '#3a4a14' }}>One-off, paid before term starts</span>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: 'var(--cream)' }}>
              <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 700 }}>Item</th>
              {cols.map(c => <th key={c} style={{ textAlign: 'right', padding: '14px 20px', fontWeight: 700, minWidth: 130 }}>{colLabels[c]}</th>)}
            </tr>
          </thead>
          <tbody>
            {data.enrolment.map((item, i) => (
              <tr key={i} style={{ borderTop: '1px solid rgba(42,42,42,0.06)' }}>
                <td style={{ padding: '12px 20px' }}>
                  <div style={{ fontWeight: 600 }}>{item.name}</div>
                  {item.sub && <div style={{ fontSize: 12, color: 'var(--charcoal-soft)', fontStyle: 'italic' }}>{item.sub}</div>}
                </td>
                {cols.map(c => {
                  const a = typeof item.amt === 'object' ? item.amt[c] : item.amt;
                  return <td key={c} style={{ textAlign: 'right', padding: '12px 20px', fontWeight: 600, color: a === 'FOC' ? 'var(--mint)' : 'inherit' }}>{a === 'FOC' ? 'FOC' : `RM ${a}`}</td>;
                })}
              </tr>
            ))}
            <tr style={{ borderTop: '2px solid rgba(42,42,42,0.10)', background: '#fff' }}>
              <td style={{ padding: '14px 20px', fontWeight: 700 }}>Total before discount</td>
              {cols.map(c => <td key={c} style={{ textAlign: 'right', padding: '14px 20px', fontWeight: 700 }}>RM {totals[c]}</td>)}
            </tr>
            <tr style={{ background: 'var(--yellow)', borderTop: '1px solid rgba(42,42,42,0.10)' }}>
              <td style={{ padding: '16px 20px' }}>
                <div style={{ fontWeight: 800 }}>Total after discount (–RM{branchData.discount})</div>
                <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontStyle: 'italic' }}>{branchData.discountNote}</div>
              </td>
              {cols.map(c => <td key={c} style={{ textAlign: 'right', padding: '16px 20px', fontFamily: 'Fredoka', fontWeight: 700, fontSize: 18 }}>RM {afterDiscount[c]}</td>)}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

function PlayschoolFeesTable({ data, branchData }) {
  const total = data.enrolment.reduce((s, it) => s + (typeof it.amt === 'number' ? it.amt : 0), 0);
  const afterDiscount = total - branchData.discount;
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '20px 28px', background: 'var(--mint)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ fontFamily: 'Fredoka', fontSize: 22 }}>Enrolment fees · 2026</h3>
        <span style={{ fontSize: 13, fontWeight: 600, color: '#3a4a14' }}>For Playschool · 2-3 yo</span>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
        <tbody>
          {data.enrolment.map((item, i) => (
            <tr key={i} style={{ borderTop: '1px solid rgba(42,42,42,0.06)' }}>
              <td style={{ padding: '14px 28px' }}>
                <div style={{ fontWeight: 600 }}>{item.name}</div>
                {item.sub && <div style={{ fontSize: 12, color: 'var(--charcoal-soft)', fontStyle: 'italic' }}>{item.sub}</div>}
              </td>
              <td style={{ textAlign: 'right', padding: '14px 28px', fontWeight: 600, minWidth: 140 }}>RM {item.amt}</td>
            </tr>
          ))}
          <tr style={{ borderTop: '2px solid rgba(42,42,42,0.10)', background: '#fff' }}>
            <td style={{ padding: '14px 28px', fontWeight: 700 }}>Total before discount</td>
            <td style={{ textAlign: 'right', padding: '14px 28px', fontWeight: 700 }}>RM {total}</td>
          </tr>
          <tr style={{ background: 'var(--yellow)' }}>
            <td style={{ padding: '16px 28px' }}>
              <div style={{ fontWeight: 800 }}>Total after discount (–RM{branchData.discount})</div>
              <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontStyle: 'italic' }}>{branchData.discountNote}</div>
            </td>
            <td style={{ textAlign: 'right', padding: '16px 28px', fontFamily: 'Fredoka', fontWeight: 700, fontSize: 20 }}>RM {afterDiscount}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

function MonthlyTable({ data }) {
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden', marginTop: 24 }}>
      <div style={{ padding: '20px 28px', background: 'var(--orange)', color: '#fff' }}>
        <h3 style={{ fontFamily: 'Fredoka', fontSize: 22, color: '#fff' }}>Monthly fees & programme</h3>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
          <thead>
            <tr style={{ background: 'var(--cream)' }}>
              <th style={{ textAlign: 'left', padding: '14px 20px' }}>Age group</th>
              <th style={{ padding: '14px 20px' }}>Basic<br /><span style={{ fontSize: 11, fontWeight: 500, color: 'var(--charcoal-soft)' }}>Mon–Fri 8am–12pm</span></th>
              <th style={{ padding: '14px 20px' }}>Midday<br /><span style={{ fontSize: 11, fontWeight: 500, color: 'var(--charcoal-soft)' }}>incl. lunch</span></th>
              <th style={{ padding: '14px 20px' }}>Full Day<br /><span style={{ fontSize: 11, fontWeight: 500, color: 'var(--charcoal-soft)' }}>7am–6pm/6.30pm</span></th>
            </tr>
          </thead>
          <tbody>
            {data.monthly.map((row, i) => (
              <tr key={i} style={{ borderTop: '1px solid rgba(42,42,42,0.06)' }}>
                <td style={{ padding: '14px 20px', fontWeight: 700 }}>{row.age}</td>
                <td style={{ textAlign: 'center', padding: '14px 20px', color: row.basic ? 'var(--charcoal)' : 'var(--charcoal-soft)' }}>
                  {row.basic ? <strong>RM {row.basic}</strong> : <em style={{ fontSize: 12 }}>Not available</em>}
                </td>
                <td style={{ textAlign: 'center', padding: '14px 20px' }}>
                  <strong>RM {row.midday}</strong>
                  {row.midday_hours && <div style={{ fontSize: 11, color: 'var(--charcoal-soft)' }}>{row.midday_hours}</div>}
                </td>
                <td style={{ textAlign: 'center', padding: '14px 20px' }}>
                  <strong>RM {row.fullday}</strong>
                  {row.fullday2 && <div style={{ fontSize: 11, color: 'var(--charcoal-soft)' }}>or RM {row.fullday2} · 7am–6.30pm</div>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ padding: '14px 28px', fontSize: 12, color: 'var(--charcoal-soft)', borderTop: '1px solid rgba(42,42,42,0.06)', fontStyle: 'italic' }}>
        Overtime charges of RM7 every 30 minutes after 6.30pm.
      </div>
    </div>
  );
}

function OptionalFees() {
  return (
    <div className="card" style={{ padding: 28, marginTop: 24 }}>
      <h3 style={{ fontFamily: 'Fredoka', fontSize: 22, marginBottom: 14 }}>Optional add-ons</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
        {OPTIONAL_FEES.map((it, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', background: 'var(--cream)', borderRadius: 14 }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{it.name}</div>
              {it.sub && <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontStyle: 'italic' }}>{it.sub}</div>}
            </div>
            <div style={{ fontFamily: 'Fredoka', fontWeight: 600, color: 'var(--orange)' }}>RM {it.amt}{it.unit || ''}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FeesNotes({ branchData, onEnroll }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, marginTop: 24 }}>
      <div className="card" style={{ padding: 28, background: 'linear-gradient(135deg, var(--sky-soft), #fff)' }}>
        <h4 style={{ fontFamily: 'Fredoka', fontSize: 18, marginBottom: 12 }}>📌 Good to know</h4>
        <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, color: 'var(--charcoal-soft)', lineHeight: 1.9 }}>
          <li>All fees in Malaysian Ringgit (MYR).</li>
          <li>Enrolment fees are paid one-off before term begins.</li>
          <li>Sibling discount available — ask our admissions team.</li>
          <li>Discount of RM{branchData.discount} valid {branchData.discountNote.toLowerCase()}.</li>
          <li>Overtime charges apply after closing time.</li>
        </ul>
      </div>
      <div className="card" style={{ padding: 28, background: 'linear-gradient(135deg, var(--orange) 0%, var(--orange-warm) 100%)', color: '#fff' }}>
        <h4 style={{ fontFamily: 'Fredoka', fontSize: 18, marginBottom: 8, color: '#fff' }}>Ready to start?</h4>
        <p style={{ color: 'rgba(255,255,255,0.9)', fontSize: 14, marginBottom: 18 }}>Enroll now or chat with our admissions team — we'll walk you through every detail.</p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button className="btn" onClick={onEnroll} style={{ background: '#fff', color: 'var(--orange)', padding: '12px 18px' }}>Enroll →</button>
          <a className="btn" href={WA_LINK} target="_blank" rel="noreferrer" style={{ background: 'rgba(255,255,255,0.2)', color: '#fff', padding: '12px 18px' }}>WhatsApp</a>
        </div>
      </div>
    </div>
  );
}

function FeesApp() {
  const [branch, setBranch] = useState('bukit-jelutong');
  const [programme, setProgramme] = useState('preschool');
  const [enrollOpen, setEnrollOpen] = useState(false);
  const branchData = FEE_DATA[branch];
  const data = branchData[programme];

  return (
    <div className="page" data-screen-label="Fees">
      <Header active="fees" onEnroll={() => setEnrollOpen(true)} />
      <FeesHero />
      <BranchSwitcher branch={branch} setBranch={setBranch} programme={programme} setProgramme={setProgramme} />

      <section style={{ padding: '60px 0 80px' }}>
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <Pill color={branchData.color === 'orange' ? 'orange' : branchData.color}>📍 {branchData.label}</Pill>
              <h2 style={{ fontFamily: 'Fredoka', fontSize: 32, marginTop: 12 }}>
                {programme === 'playschool' ? 'Playschool · 2–3 years' : 'Preschool · 4–6 years'} fees
              </h2>
            </div>
            <span className="handwritten" style={{ fontSize: 28, color: 'var(--orange)', transform: 'rotate(-3deg)' }}>2026 enrolment open ✨</span>
          </div>

          {programme === 'playschool'
            ? <PlayschoolFeesTable data={data} branchData={branchData} />
            : <PreschoolFeesTable data={data} branchData={branchData} />}
          <MonthlyTable data={data} />
          <OptionalFees />
          <FeesNotes branchData={branchData} onEnroll={() => setEnrollOpen(true)} />
        </div>
      </section>

      <Footer />
      <FloatingCTAs />
      <EnrollmentModal open={enrollOpen} onClose={() => setEnrollOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<FeesApp />);