/* Projects page */

function ProjectsPage({ navigate, onQuote }) {
  const { PROJECTS } = window.MOBICO_DATA;
  const sectors = ["All", ...Array.from(new Set(PROJECTS.map(p=>p.sector)))];
  const [filter, setFilter] = useState("All");
  const filtered = filter==="All" ? PROJECTS : PROJECTS.filter(p=>p.sector===filter);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="03 / PROJECTS"
        title="Selected <em>installations.</em>"
        intro="Reference works across council chambers, executive suites, branch interiors and public areas. Named clients shown only with permission — listings below describe scope, not client identity."
        breadcrumb="MOBICO · Projects"
      />

      <section style={{padding:"32px 0", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{display:"flex", gap:16, alignItems:"center", flexWrap:"wrap"}}>
          <div className="mono" style={{color:"var(--muted)"}}>FILTER BY SECTOR</div>
          <div style={{display:"flex", gap:6, flexWrap:"wrap"}}>
            {sectors.map(s=>(
              <button key={s} onClick={()=>setFilter(s)} style={{
                padding:"6px 12px", fontSize:13,
                border:"1px solid " + (filter===s ? "var(--ink)" : "var(--line)"),
                background: filter===s ? "var(--ink)" : "transparent",
                color: filter===s ? "#fff" : "var(--ink)",
                cursor:"pointer", borderRadius:999,
              }} dangerouslySetInnerHTML={{__html: s}} />
            ))}
          </div>
          <div style={{flex:1}} />
          <div className="mono" style={{color:"var(--muted)"}}>SHOWING {filtered.length} OF {PROJECTS.length}</div>
        </div>
      </section>

      <section style={{padding:"56px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:24}}>
            {filtered.map((p, i)=>{
              // Bento sizing pattern
              const sizes = [6,6,4,4,4,6,3,3,4,4];
              const span = sizes[i % sizes.length];
              return (
                <a key={p.id} style={{gridColumn:`span ${span}`, cursor:"pointer"}}>
                  <Photo src={p.image} alt={p.title} ratio={span>=6 ? "16/9" : span>=4 ? "4/3" : "3/4"} hover />
                  <div style={{
                    display:"flex", justifyContent:"space-between", alignItems:"flex-end",
                    marginTop:14, gap:12,
                  }}>
                    <div>
                      <div className="mono" style={{color:"var(--mobico)"}}>{String(i+1).padStart(2,"0")} · {p.sector.toUpperCase()}</div>
                      <div style={{fontSize: span>=6 ? 24 : 18, fontWeight:600, letterSpacing:"-0.015em", marginTop:6}}
                           dangerouslySetInnerHTML={{__html: p.title}} />
                      <div style={{color:"var(--muted)", fontSize:13, marginTop:6}}>{p.scope}</div>
                    </div>
                    <div className="mono" style={{color:"var(--muted)"}}>{p.year}</div>
                  </div>
                </a>
              );
            })}
          </div>

          <div style={{
            marginTop:80, padding:"24px 28px", background:"var(--paper-2)",
            border:"1px solid var(--line)",
            display:"flex", justifyContent:"space-between", gap:24, alignItems:"center", flexWrap:"wrap",
          }}>
            <div style={{maxWidth:600}}>
              <div className="mono" style={{color:"var(--mobico)", marginBottom:8}}>NOTE · PERMISSIONED CASE STUDIES</div>
              <div style={{fontSize:15, color:"var(--ink-2)"}}>
                The MOBICA group's legacy navigation lists named projects across banks, telecoms, government and hospitality. We publish project names &amp; logos only with client permission — talk to us if you'd like to see scope, dates and detailed case-study material privately.
              </div>
            </div>
            <button onClick={onQuote} className="btn navy">Request case studies <span className="arrow">→</span></button>
          </div>
        </div>
      </section>

      <CTABand onQuote={onQuote} onShowroom={()=>navigate({page:"showroom"})} />
    </div>
  );
}

window.ProjectsPage = ProjectsPage;