// Courses page — filterable catalog

const { useState: useStateC, useMemo: useMemoC } = React;

const CoursesHead = () => (
  <section className="courses-head" data-screen-label="01 Catalog header">
    <div className="container">
      <div className="page-eyebrow"><span className="bar"></span>CATALOG · 2026–27</div>
      <h1 className="t-h1" style={{ maxWidth: 980 }}>369 courses.<br/>Every one UC A–G.</h1>
      <p className="ink-2" style={{ fontSize: 18, marginTop: 24, maxWidth: 640 }}>
        Filter by subject area, grade, level, or by whether the course is taught inside a live Marble world. Or just type what you want.
      </p>
      <div className="course-stats">
        <div className="c"><div className="n"><CountUp to={369}/></div><div className="l">Courses</div></div>
        <div className="c"><div className="n"><CountUp to={40}/></div><div className="l">UC Honors</div></div>
        <div className="c"><div className="n"><CountUp to={7}/></div><div className="l">A–G areas</div></div>
        <div className="c"><div className="n"><CountUp to={6}/></div><div className="l">Marble worlds</div></div>
      </div>
    </div>
  </section>
);

const FeaturedRow = () => (
  <section className="featured-row" data-screen-label="02 Featured · School of AI">
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div className="page-eyebrow"><span className="bar"></span>SCHOOL OF AI · FLAGSHIP</div>
          <h2 className="t-h2" style={{ maxWidth: 700, marginTop: 12 }}>AI is native.<br/>Not a unit.</h2>
        </div>
        <span className="chip chip-accent" style={{ height: 28, padding: '0 12px', fontSize: 12 }}>
          <span className="dot"></span>OPEN · GRADES 10–12
        </span>
      </div>
      <div className="featured-grid">
        {FEATURED.map((c, i) => (
          <div className="featured-card" key={i}>
            <ParticleField density={28} color="125, 255, 196" baseAlpha={0.35} speed={0.03}/>
            <div>
              <div className="area">SCHOOL OF AI · {c.level.toUpperCase()}</div>
              <h4>{c.name}</h4>
              <p className="desc">{c.desc}</p>
            </div>
            <div className="meta">
              <span>{c.grades}</span>
              <span style={{ width: 1, height: 12, background: 'var(--line-soft)' }}></span>
              <span>{c.dur}</span>
              <span style={{ width: 1, height: 12, background: 'var(--line-soft)' }}></span>
              <span style={{ color: 'var(--accent)' }}>{c.world}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CourseCatalog = () => {
  const [q, setQ] = useStateC('');
  const [areas, setAreas] = useStateC(new Set());
  const [grades, setGrades] = useStateC(new Set());
  const [levels, setLevels] = useStateC(new Set());
  const [worldsOnly, setWorldsOnly] = useStateC(false);

  const toggle = (set, setSet, v) => {
    const next = new Set(set);
    if (next.has(v)) next.delete(v); else next.add(v);
    setSet(next);
  };

  const clearAll = () => {
    setQ(''); setAreas(new Set()); setGrades(new Set()); setLevels(new Set()); setWorldsOnly(false);
  };

  const filtered = useMemoC(() => {
    return CATALOG.filter(c => {
      if (q && !`${c.name} ${c.desc} ${c.area}`.toLowerCase().includes(q.toLowerCase())) return false;
      if (areas.size && !areas.has(c.area)) return false;
      if (levels.size && !levels.has(c.level)) return false;
      if (worldsOnly && !c.world) return false;
      if (grades.size) {
        // grades on course are like "10" or "10-12"
        const [a, b] = c.grades.includes('-') ? c.grades.split('-').map(Number) : [Number(c.grades), Number(c.grades)];
        let match = false;
        for (let g = a; g <= b; g++) {
          if (grades.has(String(g))) { match = true; break; }
        }
        if (!match) return false;
      }
      return true;
    });
  }, [q, areas, grades, levels, worldsOnly]);

  return (
    <>
      <div className="course-controls" data-screen-label="03 Filters">
        <div className="container">
          <div className="search-box">
            <Icon name="grid" size={16} style={{ color: 'var(--ink-3)' }}/>
            <input
              type="text"
              placeholder='Search 369 courses. Try "calculus", "world history", "physics"…'
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
            <span className="kbd">⌘ K</span>
          </div>
          <div className="filter-row">
            <span className="filter-label">AREA</span>
            {Object.entries(AREAS).map(([key, val]) => (
              <button key={key} className={`filter-chip ${areas.has(key) ? 'active' : ''}`} onClick={() => toggle(areas, setAreas, key)}>
                <span style={{ fontFamily: 'Geist Mono', fontWeight: 600, color: areas.has(key) ? '#08080C' : val.color }}>{key}</span>
                <span>{val.name.replace(' / Social Science', '').replace('Other than English', 'Other').replace('& Performing Arts', 'Arts').replace('-Prep Elective', ' Elective')}</span>
              </button>
            ))}
          </div>
          <div className="filter-row" style={{ marginTop: 12 }}>
            <span className="filter-label">GRADE</span>
            {['6','7','8','9','10','11','12'].map(g => (
              <button key={g} className={`filter-chip ${grades.has(g) ? 'active' : ''}`} onClick={() => toggle(grades, setGrades, g)}>{g}</button>
            ))}
            <span className="filter-divider"></span>
            <span className="filter-label">LEVEL</span>
            {['Regular','Honors','AP','Dual Enrollment'].map(l => (
              <button key={l} className={`filter-chip ${levels.has(l) ? 'active' : ''}`} onClick={() => toggle(levels, setLevels, l)}>{l}</button>
            ))}
            <span className="filter-divider"></span>
            <button className={`filter-toggle ${worldsOnly ? 'on' : ''}`} onClick={() => setWorldsOnly(!worldsOnly)}>
              <span className="sw"><i></i></span>
              <span>In a Marble world</span>
            </button>
            {(q || areas.size || grades.size || levels.size || worldsOnly) ? (
              <>
                <span className="filter-divider"></span>
                <button className="filter-chip" onClick={clearAll} style={{ color: 'var(--ink-3)' }}>Clear all</button>
              </>
            ) : null}
          </div>
        </div>
      </div>
      <section data-screen-label="04 Catalog grid">
        <div className="container">
          <div className="courses-result">
            <span className="count">{filtered.length} of {CATALOG.length} courses shown · {CATALOG.length} of 369 surfaced in this prototype</span>
            <span className="mono ink-3" style={{ fontSize: 11, letterSpacing: '0.06em' }}>SORT · A–G ORDER</span>
          </div>
          {filtered.length === 0 ? (
            <div className="courses-empty">
              <div style={{ fontSize: 18 }}>No courses match those filters.</div>
              <div style={{ marginTop: 8, fontSize: 13 }}>Try removing a filter, or <button className="btn-ghost" onClick={clearAll}>clear all</button>.</div>
            </div>
          ) : (
            <div className="courses-grid">
              {filtered.map((c, i) => (
                <div className="course-card" key={i}>
                  <div className="course-card-head">
                    <span className={`area-chip ${c.area}`}>{c.area} · {c.level.toUpperCase()}</span>
                    <span className="level">{c.dur.toUpperCase()}</span>
                  </div>
                  <h5>{c.name}</h5>
                  <p className="desc">{c.desc}</p>
                  <div className="foot">
                    <span>GRADE {c.grades}</span>
                    {c.world ? (
                      <span className="world-badge"><span className="dot"></span>{c.world}</span>
                    ) : (
                      <span>NO WORLD</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </>
  );
};

const CoursesPage = () => (
  <>
    <Nav current="courses"/>
    <CoursesHead/>
    <FeaturedRow/>
    <CourseCatalog/>
    <section style={{ padding: '96px 0', borderTop: '1px solid var(--line-soft)', background: 'var(--bg-0)', textAlign: 'center' }}>
      <div className="container">
        <h2 className="t-h2" style={{ marginBottom: 12 }}>Found something?</h2>
        <p className="ink-2" style={{ marginBottom: 32 }}>Add it to a 2026–27 enrollment in one step.</p>
        <a className="btn btn-primary btn-lg" href="enroll.html">Begin enrollment <Icon name="arrowRight" size={16}/></a>
      </div>
    </section>
    <Footer/>
  </>
);

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