/* Projects index + Sectors index + Project detail (case study) */

function ProjectsIndex({ go, sectorFilter, setSectorFilter, showCredit }) {
  const filtered = sectorFilter === "all"
    ? window.PROJECTS
    : window.PROJECTS.filter(p => p.sector === sectorFilter);

  return (
    <div className="page" data-screen-label="02 Projects">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 02 / Projects</div>
            <div className="kicker">{filtered.length} of {window.PROJECTS.length} shown</div>
            <div className="kicker">Filterable · 10 sectors</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>A working portfolio</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>
              Projects, by sector.
            </h1>
            <p className="lede" style={{marginTop:18}}>
              Built only from client-confirmed work; every image is photographer-credited and rights-cleared before it ships. This is the showcase the previous site was missing.
            </p>
          </div>

          <div className="filters">
            <button className={`filter-btn ${sectorFilter==="all" ? "on" : ""}`} onClick={()=>setSectorFilter("all")}>All</button>
            {window.SECTORS.map(s => {
              const n = window.PROJECTS.filter(p => p.sector === s.id).length;
              return (
                <button key={s.id}
                        className={`filter-btn ${sectorFilter===s.id ? "on" : ""}`}
                        onClick={()=>setSectorFilter(s.id)}>
                  {s.label} <span style={{opacity:0.5, marginLeft:6, fontFamily:"var(--mono)", fontSize:10}}>{String(n).padStart(2,"0")}</span>
                </button>
              );
            })}
            <span className="filter-count">{filtered.length} {filtered.length===1?"project":"projects"}</span>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          {filtered.length === 0 ? (
            <div style={{padding:"80px 0", textAlign:"center", color:"var(--graphite)"}}>
              <div className="display-s">No projects in this sector yet.</div>
              <p className="lede" style={{margin:"14px auto 0"}}>We deliver here, but the case studies aren't cleared for publication. Get in touch and we'll share work under NDA.</p>
              <a className="btn" style={{marginTop:24}} href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Request a private portfolio <ArrowRight /></a>
            </div>
          ) : (
            <div className="project-grid">
              {filtered.map((p, i) => {
                /* deliberate visual rhythm by index */
                const span = [6,6,4,4,4,8,4,6,6,4,4,8][i % 12] || 4;
                const frame = span >= 6 ? "wide" : "tall";
                return (
                  <div key={p.id} style={{gridColumn:`span ${span}`}}>
                    <ProjectCard p={p} go={go} showCredit={showCredit} frame={frame} index={i} />
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function SectorsIndex({ go }) {
  return (
    <div className="page" data-screen-label="02b Sectors">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 02b / Sectors</div>
            <div className="kicker">10 sector hubs</div>
            <div className="kicker">Filter projects by sector</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>Sector portfolio hubs</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>Ten sectors.<br/>One delivery model.</h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:32}}>
            {window.SECTORS.map((s, i) => {
              const count = window.PROJECTS.filter(p => p.sector === s.id).length;
              const hero = window.SECTOR_HERO[s.id];
              return (
                <button key={s.id}
                  className="p-card"
                  onClick={()=>go(`projects?sector=${s.id}`)}
                  style={{textAlign:"start"}}>
                  <div className="frame wide" style={{aspectRatio:"16/9"}}>
                    <img src={hero} alt={s.label} loading="lazy" />
                  </div>
                  <div className="meta">
                    <div>
                      <div className="kicker">№ {String(i+1).padStart(2,"0")}</div>
                      <h4 className="display-s" style={{margin:"8px 0 0"}}>{s.label}</h4>
                    </div>
                    <div className="yr">{count} {count===1?"project":"projects"}  →</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

function ProjectDetail({ id, go, showCredit }) {
  const p = window.PROJECTS.find(x => x.id === id);
  if (!p) {
    return (
      <div className="page" style={{padding:"160px 0", textAlign:"center"}}>
        <div className="display-m">Project not found.</div>
        <a className="btn" style={{marginTop:24}} href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>All projects <ArrowRight /></a>
      </div>
    );
  }
  const sector = (window.SECTORS.find(s => s.id === p.sector) || {}).label;
  const all = window.PROJECTS;
  const idx = all.findIndex(x => x.id === p.id);
  const prev = all[(idx - 1 + all.length) % all.length];
  const next = all[(idx + 1) % all.length];

  return (
    <div className="page" data-screen-label={`03 Project — ${p.name}`}>
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ {String(idx+1).padStart(2,"0")} · Case study</div>
            <div className="kicker">{sector} · {p.location}</div>
            <a className="kicker text-link" href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>← All projects</a>
          </div>
          <div className="hero-headline" style={{paddingBottom:32}}>
            <Eyebrow>{sector} · {p.year}</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>{p.name}</h1>
            <p className="lede" style={{marginTop:18}}>{p.summary}</p>
          </div>
        </div>

        <div className="hero-image">
          <img src={p.hero} alt={p.name} />
          {showCredit && !p.rightsCleared && <div className="credit-overlay">{p.photographer}</div>}
        </div>
        <div className="wrap">
          <div className="hero-caption">
            <span>Hero / {p.name}</span>
            <span>{p.divisions.join(" · ")}</span>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <dl className="case-meta">
            <div><dt>Sector</dt><dd>{sector}</dd></div>
            <div><dt>Location</dt><dd>{p.location}</dd></div>
            <div><dt>Scope</dt><dd>{p.scope}</dd></div>
            <div><dt>Year completed</dt><dd>{p.year}</dd></div>
            <div style={{borderRight:0}}><dt>Divisions used</dt><dd className="divs">{p.divisions.join(" · ")}</dd></div>
          </dl>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:48}}>
            <Eyebrow>Brief → outcome</Eyebrow>
            <div className="body-lg">
              {p.body.map((para, i) => (
                <p key={i} style={{margin: i===0 ? "0 0 16px" : "0 0 16px"}}>{para}</p>
              ))}
              <div style={{marginTop:24, display:"flex", gap:24, color:"var(--graphite)", fontSize:12, letterSpacing:"0.04em", textTransform:"uppercase", fontFamily:"var(--mono)", borderTop:"1px solid var(--line)", paddingTop:18}}>
                <span>Photographer</span>
                <span style={{color:"var(--ink)"}}>{p.photographer}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="gallery-grid">
            {p.gallery.map((src, i) => {
              const span = i === 0 ? 12 : 6;
              return (
                <div key={i} style={{gridColumn:`span ${span}`, aspectRatio: i===0 ? "16/8" : "4/3", overflow:"hidden", background:"var(--mist)", position:"relative"}}>
                  <img src={src} alt={`${p.name} — ${i+1}`} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                  {showCredit && !p.rightsCleared && <div className="credit-overlay">{p.photographer}</div>}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div style={{padding:"32px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)", display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:24, alignItems:"center"}}>
            <a className="link-arrow" href={`#/project/${prev.id}`} onClick={(e)=>{e.preventDefault(); go(`project/${prev.id}`);}}>← {prev.name}</a>
            <a className="btn" style={{justifySelf:"center"}} href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Start a similar project <ArrowRight /></a>
            <a className="link-arrow" style={{justifySelf:"end"}} href={`#/project/${next.id}`} onClick={(e)=>{e.preventDefault(); go(`project/${next.id}`);}}>{next.name} →</a>
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { ProjectsIndex, SectorsIndex, ProjectDetail });