/* Franchise Kosovo — Directory / Browse page */
const { useState: useStateD } = React;

function Directory({ openFranchise }) {
  const [industry, setIndustry] = useStateD('All');
  const [q, setQ] = useStateD('');
  const [sort, setSort] = useStateD('featured');

  let list = window.FK_FRANCHISES.filter(f =>
    (industry === 'All' || f.industry === industry) &&
    (q === '' || f.name.toLowerCase().includes(q.toLowerCase()) || f.desc.toLowerCase().includes(q.toLowerCase()))
  );
  if (sort === 'low') list = [...list].sort((a,b) => a.fromNum - b.fromNum);
  if (sort === 'high') list = [...list].sort((a,b) => b.fromNum - a.fromNum);

  return (
    <main>
      <section className="page-head on-dark">
        <div className="container">
          <Eyebrow>40+ vetted opportunities</Eyebrow>
          <h1>Browse franchise opportunities.</h1>
          <p>Every brand here is vetted for unit economics, territory fit, and demand in the Kosovo market. Filter by industry and investment to find your match.</p>
        </div>
      </section>

      <div className="filter-bar">
        <div className="container-wide" style={{ display:'flex', gap:12, alignItems:'center', flexWrap:'wrap', width:'100%' }}>
          {window.FK_INDUSTRIES.map(ind => (
            <button key={ind} className={`chip ${industry === ind ? 'on' : ''}`} onClick={() => setIndustry(ind)}>{ind}</button>
          ))}
          <div className="search-box">
            <Icon name="search" />
            <input placeholder="Search brands…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
        </div>
      </div>

      <section className="section" style={{ paddingTop: 8 }}>
        <div className="container-wide">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12 }}>
            <div className="result-count">{list.length} {list.length === 1 ? 'opportunity' : 'opportunities'}{industry !== 'All' ? ` in ${industry}` : ''}</div>
            <select className="chip" style={{ paddingRight: 14 }} value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="featured">Sort: Featured</option>
              <option value="low">Investment: Low to high</option>
              <option value="high">Investment: High to low</option>
            </select>
          </div>
          {list.length ? (
            <div className="fr-grid cols4" style={{ marginTop: 8 }}>
              {list.map((f, i) => (
                <Reveal key={f.id} delay={Math.min(i, 6) * 60}><FranchiseCard f={f} onOpen={openFranchise} /></Reveal>
              ))}
            </div>
          ) : (
            <div style={{ textAlign:'center', padding:'80px 0', color:'var(--ink-3)' }}>
              <Icon name="search-x" /><p style={{ marginTop: 12 }}>No opportunities match your filters yet.</p>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { Directory });