const COURSES_DATA = {
  'Postgraduate': [
    { cat: 'Management', level: 'PG · UGC', name: 'MBA in Business Analytics', dur: '24 months', eligibility: 'Graduation 50%+', mode: 'Online', outcomes: ['Analyst','Product','Consulting'], fee: '₹1.2L', per: '/ year' },
    { cat: 'Technology', level: 'PG · UGC', name: 'MCA in Data Science & AI', dur: '24 months', eligibility: 'BCA / BSc IT', mode: 'Online', outcomes: ['Data Sci','ML Eng','Backend'], fee: '₹84K', per: '/ year' },
    { cat: 'Commerce', level: 'PG · UGC', name: 'M.Com in Finance & Accounting', dur: '24 months', eligibility: 'B.Com / BBA', mode: 'Online', outcomes: ['CA track','Fintech','Audit'], fee: '₹64K', per: '/ year' },
  ],
  'Undergraduate': [
    { cat: 'Management', level: 'UG · UGC', name: 'BBA in Digital Marketing', dur: '36 months', eligibility: '10+2 (any stream)', mode: 'Online', outcomes: ['Growth','Content','Brand'], fee: '₹72K', per: '/ year' },
    { cat: 'Technology', level: 'UG · UGC', name: 'BCA in Cloud Computing', dur: '36 months', eligibility: '10+2 (any stream)', mode: 'Online', outcomes: ['Devops','Cloud','Full-stack'], fee: '₹80K', per: '/ year' },
    { cat: 'Commerce', level: 'UG · UGC', name: 'B.Com (Hons.) — Professional', dur: '36 months', eligibility: '10+2 Commerce', mode: 'Online', outcomes: ['Accounts','Audit','Tax'], fee: '₹52K', per: '/ year' },
  ],
  'Diploma': [
    { cat: 'Technology', level: 'PGDip', name: 'PG Diploma — Product Management', dur: '11 months', eligibility: 'Graduate', mode: 'Online', outcomes: ['APM','PM','Ops'], fee: '₹68K', per: 'total' },
    { cat: 'Healthcare', level: 'Diploma', name: 'Diploma — Healthcare Admin', dur: '12 months', eligibility: 'Graduate', mode: 'Online', outcomes: ['Hospital Ops','Insurance'], fee: '₹54K', per: 'total' },
    { cat: 'Arts', level: 'Diploma', name: 'Diploma — UX & Interaction Design', dur: '10 months', eligibility: '10+2', mode: 'Online', outcomes: ['UX','UI','Research'], fee: '₹62K', per: 'total' },
  ],
  'Professional': [
    { cat: 'Technology', level: 'Cert · Pro', name: 'Certificate — GenAI for Business', dur: '4 months', eligibility: 'Working pro', mode: 'Online', outcomes: ['GenAI','Ops'], fee: '₹38K', per: 'total' },
    { cat: 'Management', level: 'Cert · Pro', name: 'Executive Cert — Strategy & Leadership', dur: '6 months', eligibility: '3+ yrs exp', mode: 'Online', outcomes: ['Lead','Strategy'], fee: '₹52K', per: 'total' },
    { cat: 'Commerce', level: 'Cert · Pro', name: 'Certificate — FP&A Mastery', dur: '5 months', eligibility: 'Finance grad', mode: 'Online', outcomes: ['FP&A','Fintech'], fee: '₹44K', per: 'total' },
  ],
};

const FILTERS = ['All', 'Business', 'Technology', 'Commerce', 'Arts', 'Healthcare', 'Management'];

function Courses() {
  const [tab, setTab] = useState('Postgraduate');
  const [filter, setFilter] = useState('All');
  const rows = COURSES_DATA[tab].filter(c => filter === 'All' || c.cat.toLowerCase() === filter.toLowerCase() || c.cat === filter);
  const fallback = rows.length ? rows : COURSES_DATA[tab];
  return (
    <section className="section courses-section" id="courses">
      <div className="container">
        <FadeUp>
          <div className="section-head">
            <div className="section-eyebrow">Programs</div>
            <h2 className="section-title">
              Find the program that <span className="serif">actually fits.</span>
            </h2>
            <p className="section-sub">
              Shortlist by level, field and outcome. Every card is filterable, comparable, and counselor-vetted.
            </p>
          </div>
        </FadeUp>
        <FadeUp>
          <div className="courses-tabs">
            {Object.keys(COURSES_DATA).map(k => (
              <button key={k} className={`courses-tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{k}</button>
            ))}
          </div>
        </FadeUp>
        <FadeUp>
          <div className="courses-filters">
            {FILTERS.map(f => (
              <button key={f} className={`courses-chip ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</button>
            ))}
          </div>
        </FadeUp>
        <div className="courses-grid">
          {fallback.map((c, i) => (
            <FadeUp key={c.name + i} delay={(i % 3) + 1}>
              <div className="course-card">
                <div className="course-card-head">
                  <div className="course-card-cat">{c.cat}</div>
                  <div className="course-card-level">{c.level}</div>
                </div>
                <h3>{c.name}</h3>
                <div className="duration">{c.dur}</div>
                <div className="course-card-meta">
                  <div className="course-meta-item">
                    <div className="course-meta-label">Eligibility</div>
                    <div className="course-meta-val">{c.eligibility}</div>
                  </div>
                  <div className="course-meta-item">
                    <div className="course-meta-label">Mode</div>
                    <div className="course-meta-val">{c.mode}</div>
                  </div>
                </div>
                <div className="course-card-outcomes">
                  {c.outcomes.map(o => <span key={o} className="tag">{o}</span>)}
                </div>
                <div className="course-card-foot">
                  <div className="course-card-fee">{c.fee}<small> {c.per}</small></div>
                  <div className="course-card-arrow">
                    <ArrowIcon size={14} />
                  </div>
                </div>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Courses = Courses;