/* Build Core Supply — Website UI Kit · inner pages part 2 */
const { useEffect: uE4 } = React;

/* ===================== PRODUCTS PAGE ===================== */
function ProductsPage({go, onEnquire, onOpen}){
  return (
    <main>
      <SubHero go={go} title="Our Products" crumb="Products" img="assets/img/service-material.jpg"/>
      <div className="page-intro reveal" style={{paddingTop:'56px'}}>
        <span className="eyebrow c">Catalogue</span>
        <h2>A Complete Range of Building Materials</h2>
        <p>Cement, TMT steel, MS sections, cement frames, AAC blocks and more — at wholesale rates. Tap any product for full specifications.</p>
      </div>
      <Products onEnquire={onEnquire} onOpen={onOpen} compact={true}/>
      <CtaStrip go={go}/>
    </main>
  );
}

/* ===================== PRODUCT DETAIL PAGE ===================== */
function ProductDetailPage({go, slug, onEnquire, onOpen}){
  uE4(()=>{ window.scrollTo(0,0); },[slug]);
  const row = PRODUCTS.find(p=>p[2]===slug) || PRODUCTS[0];
  const [nm, cat, img, kind, pr, u] = row;
  const det = PRODUCT_DETAILS[img] || {desc:"", specs:[]};
  const related = PRODUCTS.filter(p=>p[1]===cat && p[2]!==img).slice(0,4);
  const relList = related.length?related:PRODUCTS.filter(p=>p[2]!==img).slice(0,4);
  return (
    <main>
      <SubHero go={go} title={nm} crumb="Product" img="assets/img/service-material.jpg"/>
      <section className="section">
        <div className="wrap pd-grid">
          <div className="pd-media reveal">
            <div className="frame"><img src={`assets/products/${img}.webp`} alt={nm}/></div>
          </div>
          <div className="reveal">
            <div className="pd-cat">{cat}</div>
            <h1 className="pd-title">{nm}</h1>
            {det.moq && <div className="moq"><Svg d={I.check} width="13" height="13" style={{fill:'#9A6C1E'}}/> Minimum Order Quantity: {det.moq}</div>}
            <div className="pd-price">
              {kind==="price"
                ? <div className="p"><span className="cur">₹</span> {pr} <span className="u">{u} · wholesale</span></div>
                : <div className="p" style={{fontSize:'1.4rem'}}>Price on enquiry <span className="latest" style={{marginLeft:8}}>Get Latest Price</span></div>}
            </div>
            <p style={{margin:'20px 0 4px'}}>{det.desc}</p>
            <table className="spec-table">
              <tbody>
                {det.specs.map(([k,v])=>(<tr key={k}><td className="k">{k}</td><td className="v">{v}</td></tr>))}
              </tbody>
            </table>
            <div className="pd-actions">
              <button className="btn btn-primary" onClick={()=>onEnquire(nm)}>Get Latest Price <Svg d={I.arrow} vb="0 0 448 512"/></button>
              <button className="btn btn-ghost-dark" onClick={()=>go("/products")}>Back to Products</button>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{background:'var(--cement-50)',paddingTop:'var(--sp-8)'}}>
        <div className="wrap">
          <h2 className="sec-title" style={{marginBottom:28}}>Related Products</h2>
          <div className="prod-grid">
            {relList.map(([rnm,rc,rimg,rkind,rpr,ru])=>(
              <article className="prod reveal" key={rnm} onClick={()=>onOpen(rimg)} style={{cursor:'pointer'}}>
                <div className="top"/>
                <div className="ph"><img src={`assets/products/${rimg}.webp`} alt={rnm}/></div>
                <div className="bd">
                  <div className="cat">{rc}</div>
                  <div className="nm">{rnm}</div>
                  <div className="foot">
                    {rkind==="price"
                      ? <div className="pr"><span className="cur">₹</span> {rpr} <span className="u">{ru}</span></div>
                      : <div className="pr latest">Get Latest Price</div>}
                    <button className="enq" onClick={(e)=>{e.stopPropagation();onEnquire(rnm);}}>Enquire <Svg d={I.arrow} vb="0 0 448 512"/></button>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ===================== PROJECTS / PORTFOLIO PAGE ===================== */
function ProjectsPage({go}){
  return (
    <main>
      <SubHero go={go} title="Our Projects" crumb="Projects" img="assets/img/hero.jpg"/>
      <section className="section">
        <div className="wrap">
          <div className="page-intro reveal"><span className="eyebrow c">Portfolio</span><h2>Trusted on Landmark Builds</h2>
            <p>From high-rise towers to residential complexes, builders across Maharashtra rely on us for materials that arrive on time and on spec.</p></div>
          {PROJECT_DETAILS.map((p)=>(
            <article className="proj-feature reveal" key={p.title}>
              <div className="pf-img"><img src={`assets/img/${p.img}.${p.ext}`} alt={p.title}/></div>
              <div className="pf-body">
                <div className="k">{p.client}</div>
                <h3>{p.title}</h3>
                <div className="pf-loc"><Svg d={I.pin} vb="0 0 384 512"/> {p.loc}</div>
                <p>{p.desc}</p>
                <div className="pf-meta">
                  <div className="m"><div className="ml">Scope</div><div className="mv">{p.scope}</div></div>
                  <div className="m"><div className="ml">Segment</div><div className="mv">{p.value}</div></div>
                  <div className="m"><div className="ml">Status</div><div className="mv">{p.year}</div></div>
                </div>
                <div className="tags">{p.tags.map(t=>(<span className="tag" key={t}>{t}</span>))}</div>
              </div>
            </article>
          ))}
        </div>
      </section>
      <CtaStrip go={go}/>
    </main>
  );
}

/* ===================== CONTACT PAGE ===================== */
function ContactPage({go, prefill}){
  return (
    <main>
      <SubHero go={go} title="Contact Us" crumb="Contact" img="assets/img/about-2.jpg"/>
      <section className="section">
        <div className="wrap">
          <div className="contact-cards">
            <div className="cc reveal"><div className="ci"><Svg d={I.pin} vb="0 0 384 512"/></div><h4>Head Office — Sinnar</h4><p>Sai Steel Services, Sinnar, Nashik District, Maharashtra, India</p></div>
            <div className="cc reveal"><div className="ci"><Svg d={I.pin} vb="0 0 384 512"/></div><h4>Branch — Nashik</h4><p>Gangapur Road, Nashik, Maharashtra, India</p></div>
            <div className="cc reveal"><div className="ci"><Svg d={I.phone}/></div><h4>Talk to Us</h4><p>+91 98765 43210<br/>enquiry@buildcoresupply.in<br/><span style={{color:'var(--grey-500)',fontSize:'12.5px'}}>Mon–Sat · 9:00–19:00</span></p></div>
          </div>
        </div>
      </section>
      <Contact prefill={prefill}/>
    </main>
  );
}

/* ===================== GALLERY PAGE ===================== */
const GALLERY = [
  {src:"boardroom-01.jpg", cat:"Boardroom", t:"Conference room"},
  {src:"cabin-01.jpg",     cat:"Director's Cabin", t:"Director's cabin"},
  {src:"workspace-01.jpg", cat:"Workspace", t:"Operations desk"},
  {src:"boardroom-02.jpg", cat:"Boardroom", t:"Meeting in progress"},
  {src:"cabin-02.jpg",     cat:"Director's Cabin", t:"Cabin detail"},
  {src:"workspace-02.jpg", cat:"Workspace", t:"Work area"},
  {src:"cabin-03.jpg",     cat:"Director's Cabin", t:"Private office"},
  {src:"boardroom-03.jpg", cat:"Boardroom", t:"Around the table"},
  {src:"cabin-04.jpg",     cat:"Director's Cabin", t:"Cabin & glass partition"},
  {src:"cabin-05.jpg",     cat:"Director's Cabin", t:"Cabin view"},
];
const GAL_CATS = ["All","Boardroom","Director's Cabin","Workspace"];

function Lightbox({items, index, onClose, onNav}){
  uE4(()=>{
    const onKey=(e)=>{ if(e.key==="Escape") onClose(); if(e.key==="ArrowRight") onNav(1); if(e.key==="ArrowLeft") onNav(-1); };
    window.addEventListener('keydown', onKey); return ()=>window.removeEventListener('keydown', onKey);
  },[onClose,onNav]);
  const open = index!==null;
  const it = open ? items[index] : null;
  return (
    <div className={"lightbox"+(open?" open":"")} onClick={onClose}>
      {open && <React.Fragment>
        <div className="lb-count">{index+1} / {items.length}</div>
        <button className="lb-close" onClick={onClose}>×</button>
        <button className="lb-btn lb-prev" onClick={(e)=>{e.stopPropagation();onNav(-1);}}><Svg d={I.chevL} vb="0 0 320 512"/></button>
        <img src={`assets/office/${it.src}`} alt={it.t} onClick={(e)=>e.stopPropagation()}/>
        <button className="lb-btn lb-next" onClick={(e)=>{e.stopPropagation();onNav(1);}}><Svg d={I.chevR} vb="0 0 320 512"/></button>
        <div className="lb-cap"><div className="c">{it.cat}</div><div className="t">{it.t}</div></div>
      </React.Fragment>}
    </div>
  );
}

function GalleryPage({go}){
  const [cat,setCat]=React.useState("All");
  const [idx,setIdx]=React.useState(null);
  const list = cat==="All" ? GALLERY : GALLERY.filter(g=>g.cat===cat);
  const nav=(d)=>setIdx(i=>(i+d+list.length)%list.length);
  return (
    <main>
      <SubHero go={go} title="Office Gallery" crumb="Gallery" img="assets/office/cabin-03.jpg"/>
      <section className="section">
        <div className="wrap">
          <div className="page-intro reveal"><span className="eyebrow c">Our Workplace</span><h2>Inside Build Core Supply</h2>
            <p>A look around our offices in Sinnar &amp; Nashik — the boardroom, the director's cabin and the team workspace where every order is planned and dispatched.</p></div>
          <div className="filter reveal">
            {GAL_CATS.map(c=>(<button key={c} className={"chip"+(cat===c?" active":"")} onClick={()=>setCat(c)}>{c}</button>))}
          </div>
          <div className="gallery-masonry">
            {list.map((g,i)=>(
              <div className="gitem reveal" key={g.src} onClick={()=>setIdx(i)}>
                <img src={`assets/office/${g.src}`} alt={g.t} loading="lazy"/>
                <div className="gz"><Svg d={I.expand}/></div>
                <div className="gcap"><div className="c">{g.cat}</div><div className="t">{g.t}</div></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Lightbox items={list} index={idx} onClose={()=>setIdx(null)} onNav={nav}/>
      <CtaStrip go={go}/>
    </main>
  );
}

Object.assign(window, { ProductsPage, ProductDetailPage, ProjectsPage, ContactPage, GalleryPage, GALLERY });