/* Products index + Category detail */

function ProductsPage({ navigate, onQuote }) {
  const { CATEGORIES } = window.MOBICO_DATA;
  const [filter, setFilter] = useState("all");
  const filtered = filter==="all" ? CATEGORIES : CATEGORIES.filter(c=>{
    if(filter==="furniture") return c.group==="Office furniture";
    if(filter==="interior")  return c.group==="Interior systems";
    return true;
  });

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="01 / PRODUCTS"
        title="Fifteen categories, <em>one specification.</em>"
        intro="Office furniture across ten typologies, plus five interior-system categories. Co-ordinated through one project manager."
        breadcrumb="MOBICO · Products"
      />

      <section style={{padding:"40px 0 32px", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:16, flexWrap:"wrap"}}>
          <div style={{display:"flex", gap:6, border:"1px solid var(--line)", padding:4, background:"var(--surface)"}}>
            {[
              ["all", "All · 15"],
              ["furniture", "Office furniture · 10"],
              ["interior", "Interior systems · 5"],
            ].map(([k,l])=>(
              <button key={k} onClick={()=>setFilter(k)} style={{
                padding:"8px 14px", fontSize:13, border:"none",
                background: filter===k ? "var(--ink)" : "transparent",
                color: filter===k ? "#fff" : "var(--ink)",
                cursor:"pointer", fontWeight:500,
              }}>{l}</button>
            ))}
          </div>
          <div className="mono" style={{color:"var(--muted)"}}>SHOWING {filtered.length} OF {CATEGORIES.length}</div>
        </div>
      </section>

      <section style={{padding:"56px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:32, rowGap: 48}}>
            {filtered.map((c, i)=>(
              <ProductCard key={c.id} c={c} idx={i+1} onClick={()=>navigate({page:"category", id:c.id})} />
            ))}
          </div>
        </div>
      </section>

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

function ProductCard({ c, idx, onClick }) {
  return (
    <a onClick={onClick} style={{cursor:"pointer", display:"block"}}>
      <div style={{position:"relative", overflow:"hidden", aspectRatio:"4/3"}}>
        <img src={c.image} alt={c.alt} loading="lazy" style={{
          width:"100%", height:"100%", objectFit:"cover",
          transition:"transform 0.6s cubic-bezier(0.2,0.6,0.2,1)",
        }}
        onMouseEnter={(e)=>e.currentTarget.style.transform="scale(1.05)"}
        onMouseLeave={(e)=>e.currentTarget.style.transform="scale(1)"} />
        <div style={{
          position:"absolute", top:14, left:14,
          background:"#fff", padding:"4px 8px", fontSize:11, fontFamily:"JetBrains Mono, monospace",
          letterSpacing:"0.06em", fontWeight:500,
        }}>
          {String(idx).padStart(2,"0")}
        </div>
      </div>
      <div style={{marginTop:18}}>
        <div className="mono" style={{color:"var(--muted)"}}>{c.group.toUpperCase()}</div>
        <div style={{fontSize:22, fontWeight:600, letterSpacing:"-0.015em", marginTop:6}}
             dangerouslySetInnerHTML={{__html: c.name}} />
        <div style={{color:"var(--muted)", fontSize:14, marginTop:6}}>{c.count}</div>
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Category detail page
function CategoryPage({ id, navigate, onQuote }) {
  const { CATEGORIES, CATEGORY_DETAIL, MEDIA } = window.MOBICO_DATA;
  const c = CATEGORIES.find(x=>x.id===id);
  const d = CATEGORY_DETAIL[id];
  if(!c || !d) return <div className="wrap" style={{padding:"120px 0"}}>Category not found.</div>;
  const [activeImg, setActiveImg] = useState(0);

  const allIds = CATEGORIES.map(x=>x.id);
  const curIdx = allIds.indexOf(id);
  const prev = CATEGORIES[(curIdx - 1 + allIds.length) % allIds.length];
  const next = CATEGORIES[(curIdx + 1) % allIds.length];

  return (
    <div className="page-enter">
      <section style={{padding:"60px 0 0"}}>
        <div className="wrap">
          <div className="mono" style={{color:"var(--muted)", marginBottom:24}}>
            <a onClick={()=>navigate({page:"home"})} style={{cursor:"pointer"}}>MOBICO</a>
            <span> · </span>
            <a onClick={()=>navigate({page:"products"})} style={{cursor:"pointer"}}>PRODUCTS</a>
            <span> · </span>
            <span>{c.group.toUpperCase()}</span>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32, alignItems:"end"}}>
            <div style={{gridColumn:"span 7"}}>
              <div className="eyebrow">
                <span className="mono num">{String(curIdx+1).padStart(2,"0")} / 15</span>
                <span className="line" />
                <span className="mono">{c.group.toUpperCase()}</span>
              </div>
              <h1 className="h-display" style={{fontSize:"clamp(44px, 6vw, 88px)", margin:"24px 0 0"}}
                  dangerouslySetInnerHTML={{__html: d.title}} />
            </div>
            <div style={{gridColumn:"span 5"}}>
              <p style={{fontSize:17, color:"var(--ink-2)", lineHeight:1.55, marginBottom:8}}
                 dangerouslySetInnerHTML={{__html: d.intro}} />
            </div>
          </div>
        </div>
      </section>

      {/* Gallery + specs */}
      <section style={{padding:"56px 0"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(12, 1fr)", gap:32}}>
            <div style={{gridColumn:"span 8"}}>
              <div style={{position:"relative", overflow:"hidden", aspectRatio:"4/3", background:"var(--paper-2)"}}>
                <img src={MEDIA + d.images[activeImg]} alt={d.title}
                     style={{width:"100%", height:"100%", objectFit:"cover"}} />
                <div style={{
                  position:"absolute", left:18, top:18,
                  background:"#fff", padding:"6px 10px",
                  fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.06em",
                }}>
                  {String(activeImg+1).padStart(2,"0")} / {String(d.images.length).padStart(2,"0")}
                </div>
              </div>
              <div style={{display:"flex", gap:8, marginTop:12}}>
                {d.images.map((img, i)=>(
                  <button key={i} onClick={()=>setActiveImg(i)} style={{
                    flex:1, padding:0, border: activeImg===i ? "2px solid var(--mobico)" : "1px solid var(--line)",
                    background:"transparent", cursor:"pointer", aspectRatio:"4/3", overflow:"hidden",
                  }}>
                    <img src={MEDIA + img} alt="" style={{width:"100%", height:"100%", objectFit:"cover"}} />
                  </button>
                ))}
              </div>
            </div>

            <div style={{gridColumn:"span 4"}}>
              <div className="mono" style={{color:"var(--mobico)"}}>SPECIFICATION</div>
              <h3 style={{fontSize:24, fontWeight:600, letterSpacing:"-0.02em", margin:"10px 0 24px"}}>At a glance</h3>
              <table style={{width:"100%", borderCollapse:"collapse", fontSize:14}}>
                <tbody>
                  {d.specs.map(([k,v], i)=>(
                    <tr key={i} style={{borderTop:"1px solid var(--line)"}}>
                      <td style={{padding:"12px 0", color:"var(--muted)", verticalAlign:"top", width:120,
                                  fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.04em", textTransform:"uppercase"}}>
                        {k}
                      </td>
                      <td style={{padding:"12px 0", color:"var(--ink)"}}
                          dangerouslySetInnerHTML={{__html: v}} />
                    </tr>
                  ))}
                </tbody>
              </table>

              <div style={{marginTop:32, padding:"18px 18px", background:"var(--ink)", color:"#fff"}}>
                <div className="mono" style={{color:"#9b97ff", marginBottom:8}}>FOR THIS RANGE</div>
                <div style={{fontSize:18, fontWeight:600, letterSpacing:"-0.01em", marginBottom:16}}>
                  Request a specification with finishes, sizes &amp; CAD blocks.
                </div>
                <button onClick={onQuote} className="btn" style={{background:"#fff", color:"var(--ink)", borderColor:"#fff", width:"100%", justifyContent:"center"}}>
                  Request a quote <span className="arrow">→</span>
                </button>
              </div>

              <div style={{marginTop:18, padding:"14px 16px", border:"1px solid var(--line)", background:"var(--paper-2)",
                           fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.04em", color:"var(--muted)"}}>
                Specs are indicative. Final specification per project &amp; finish schedule.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Cross-link nav */}
      <section style={{padding:"32px 0 96px", borderTop:"1px solid var(--line)"}}>
        <div className="wrap" style={{display:"flex", justifyContent:"space-between", alignItems:"stretch", gap:16, flexWrap:"wrap"}}>
          <a onClick={()=>navigate({page:"category", id: prev.id})} style={{cursor:"pointer", display:"flex", gap:18, alignItems:"center"}}>
            <span className="mono" style={{color:"var(--muted)"}}>← PREV</span>
            <span>
              <div className="mono" style={{color:"var(--muted)"}}>{prev.group.toUpperCase()}</div>
              <div style={{fontSize:18, fontWeight:600, letterSpacing:"-0.01em"}} dangerouslySetInnerHTML={{__html: prev.name}} />
            </span>
          </a>
          <a onClick={()=>navigate({page:"products"})} className="btn ghost">All categories</a>
          <a onClick={()=>navigate({page:"category", id: next.id})} style={{cursor:"pointer", display:"flex", gap:18, alignItems:"center"}}>
            <span style={{textAlign:"right"}}>
              <div className="mono" style={{color:"var(--muted)"}}>{next.group.toUpperCase()}</div>
              <div style={{fontSize:18, fontWeight:600, letterSpacing:"-0.01em"}} dangerouslySetInnerHTML={{__html: next.name}} />
            </span>
            <span className="mono" style={{color:"var(--muted)"}}>NEXT →</span>
          </a>
        </div>
      </section>
    </div>
  );
}

window.ProductsPage = ProductsPage;
window.CategoryPage = CategoryPage;