// Projects filterable grid + sector hub
function PageProjects({ go, initialSector }) {
  const [filter, setFilter] = useState(initialSector || 'all');
  const all = window.ATG.PROJECTS;
  const list = filter === 'all' ? all : all.filter(p => p.sector === filter);

  const counts = useMemo(() => {
    const c = { all: all.length };
    window.ATG.SECTORS.forEach(s => { c[s.id] = all.filter(p => p.sector === s.id).length; });
    return c;
  }, [all]);

  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">Projects</div>
          <div className="row row-12 mt-3" style={{ alignItems: 'baseline' }}>
            <div className="col-span-8">
              <h1 style={{ fontSize: 'clamp(36px, 5.4vw, 76px)' }}>
                A selected portfolio of <span className="editorial">interior fit-out</span> &amp; design-and-build work.
              </h1>
            </div>
            <div className="col-span-4">
              <p className="lead muted">
                Filter by sector. Each project is a structured case study with metadata, materials and the joinery / MEP process narrated.
              </p>
            </div>
          </div>

          <div className="chips mt-6">
            <button className={"chip" + (filter==='all' ? ' on' : '')} onClick={() => setFilter('all')}>
              All <span className="ct tnum">{counts.all}</span>
            </button>
            {window.ATG.SECTORS.map(s => (
              <button key={s.id} className={"chip" + (filter===s.id ? ' on' : '')} onClick={() => setFilter(s.id)}>
                {s.name} <span className="ct tnum">{counts[s.id]}</span>
              </button>
            ))}
            <span style={{ flex: 1 }}></span>
            <span className="muted" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              Showing <span className="tnum" style={{ color: 'var(--ink)' }}>{list.length}</span> of {all.length}
            </span>
          </div>
        </div>
      </section>

      <section className="section--sm" style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="wrap">
          <div className="row row-3" style={{ rowGap: 56 }}>
            {list.map((p, i) => <ProjectCard key={p.id} p={p} go={go} index={i+1} />)}
          </div>
          {list.length === 0 && (
            <p className="muted mt-4">No published projects in this sector yet. <button className="linkmore" onClick={()=>setFilter('all')}>Show all →</button></p>
          )}
        </div>
      </section>

      <CtaBand go={go} />
    </main>
  );
}

function PageSectorHub({ go }) {
  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">Sectors</div>
          <h1 className="mt-3" style={{ fontSize: 'clamp(36px, 5vw, 72px)' }}>
            Four practice areas, <span className="editorial">one delivery model</span>.
          </h1>
          <p className="lead muted mt-3" style={{ maxWidth: '40em' }}>
            Each sector has its own portfolio and its own sector-qualified enquiry route. Underneath, the same in-house design, joinery and MEP team carries the work.
          </p>
        </div>
      </section>
      <section className="section--sm" style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="row row-2" style={{ rowGap: 32 }}>
            {window.ATG.SECTORS.map((s, i) => {
              const ct = window.ATG.PROJECTS.filter(p => p.sector === s.id).length;
              return (
                <a key={s.id} className="sector-tile" href={"#sectors/"+s.id} onClick={(e)=>{e.preventDefault(); go('sector:'+s.id);}}
                   style={{ aspectRatio: '16/10' }}>
                  <img src={s.img} alt={s.name} loading="lazy" />
                  <div className="st-text" style={{ left: 32, right: 32, bottom: 32 }}>
                    <div>
                      <div className="st-ct">0{i+1} &middot; {ct} published</div>
                      <div className="st-name mt-1" style={{ fontSize: 28 }}>{s.name}</div>
                      <div className="mt-1" style={{ color: 'rgba(255,255,255,.85)', fontSize: 14, maxWidth: '28em' }}>{s.blurb}</div>
                    </div>
                    <span style={{ fontSize: 22, color: 'rgba(255,255,255,.85)' }}>→</span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
      <CtaBand go={go} />
    </main>
  );
}

function PageSectorDetail({ go, id }) {
  const sector = window.ATG.SECTORS.find(s => s.id === id);
  if (!sector) return <PageProjects go={go} />;
  const list = window.ATG.PROJECTS.filter(p => p.sector === id);
  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">
            <a href="#sectors" onClick={(e)=>{e.preventDefault(); go('sectors');}} style={{ borderBottom: '1px solid currentColor' }}>Sectors</a>
            <span style={{ color: 'var(--graphite)' }}> · {sector.name}</span>
          </div>
          <div className="row row-12 mt-3" style={{ alignItems: 'baseline' }}>
            <div className="col-span-7">
              <h1 style={{ fontSize: 'clamp(36px, 5.4vw, 76px)' }}>
                {sector.name} <span className="editorial">fit-out &amp; build</span>
              </h1>
            </div>
            <div className="col-span-5">
              <p className="lead muted">{sector.blurb}</p>
              <p className="mt-3 muted" style={{ fontSize: 13 }}>
                Selected published projects below &mdash; full sector workload is larger. Talk to the {sector.name.toLowerCase()} lead via the enquiry form for case studies on request.
              </p>
            </div>
          </div>

          <div className="media-card mt-8" style={{ aspectRatio: '21/9' }}>
            <img src={sector.img} alt={sector.name} loading="lazy" className="img-fill" />
          </div>
        </div>
      </section>

      <section className="section--sm" style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="between mb-6">
            <h3>Published projects <span className="muted tnum" style={{ fontSize: 14, marginLeft: 8 }}>({list.length})</span></h3>
            <button className="linkmore" onClick={() => go('projects')}>All projects <span className="arr">→</span></button>
          </div>
          <div className="row row-3" style={{ rowGap: 56 }}>
            {list.map((p, i) => <ProjectCard key={p.id} p={p} go={go} index={i+1} />)}
          </div>
        </div>
      </section>

      <CtaBand go={go} />
    </main>
  );
}

Object.assign(window, { PageProjects, PageSectorHub, PageSectorDetail });