/* Build Core Supply — Website UI Kit · components part 2 */
const { useState: useState2, useRef: useRef2 } = React;

const PRODUCTS=[
  ["Birla Shakti Cement","Cement","birla-shakti-cement","price","320","/Bag"],
  ["Ambuja 53 Grade Cement","Cement","ambuja-cement","latest"],
  ["Rajuri TMT Steel Bars","Steel","rajuri-tmt","latest"],
  ["Shree Om TMT Steel Bar","Steel","shree-om-tmt","latest"],
  ["MS Round Pipe","Steel","ms-round-pipe","latest"],
  ["Industrial Mild Steel Plates","Steel","mild-steel-plate","latest"],
  ["4mm Gray HB Wire","Steel","hb-wire","latest"],
  ["Building MS Scaffolding","Steel","scaffolding","latest"],
  ["Cement Door Frame","Frames","cement-door-frame","latest"],
  ["Concrete Window Frame","Frames","cement-window-frame","latest"],
  ["Partition Walls AAC Block","Blocks","aac-block","latest"],
  ["Commercial Shops Rental","Rental","commercial-rental","latest"],
];
const CATS=["All","Cement","Steel","Frames","Blocks","Rental"];

function Products({onEnquire, onOpen, compact}){
  const [cat,setCat]=useState2("All");
  const list = cat==="All"?PRODUCTS:PRODUCTS.filter(p=>p[1]===cat);
  return (
    <section className="section" id="products" style={{background:'var(--cement-50)'}}>
      <div className="wrap">
        {!compact && <div className="sec-head reveal">
          <span className="idx">02</span>
          <div className="mid"><span className="eyebrow">Our Catalogue</span><h2 className="sec-title">A Complete Range of Building Materials</h2></div>
        </div>}
        <div className="filter reveal">
          {CATS.map(c=>(
            <button key={c} className={"chip"+(cat===c?" active":"")} onClick={()=>setCat(c)}>{c}</button>
          ))}
        </div>
        <div className="prod-grid">
          {list.map(([nm,c,img,kind,pr,u])=>(
            <article className="prod reveal tilt" key={nm} onClick={()=>onOpen&&onOpen(img)} style={onOpen?{cursor:'pointer'}:null}>
              <div className="top"/>
              <div className="ph"><img src={`assets/products/${img}.webp`} alt={nm}/></div>
              <div className="bd">
                <div className="cat">{c}</div>
                <div className="nm">{nm}</div>
                <div className="foot">
                  {kind==="price"
                    ? <div className="pr"><span className="cur">₹</span> {pr} <span className="u">{u}</span></div>
                    : <div className="pr latest">Get Latest Price</div>}
                  <button className="enq" onClick={(e)=>{e.stopPropagation();onEnquire(nm);}}>Enquire <Svg d={I.arrow} vb="0 0 448 512"/></button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Projects ---------------- */
const PROJECTS=[
  ["Deepak Builders","Star World","project-starworld"],
  ["Deepak Builders","Three Leaves","project-threeleaves"],
  ["India Bulls","Chimneys","capacity"],
];
function Projects({onOpen}){
  return (
    <section className="proj section" id="projects">
      <div className="wrap">
        <div className="center reveal"><span className="eyebrow c" style={{color:'var(--gold-light)'}}>About Founders</span>
          <h2 className="sec-title" style={{color:'#fff'}}>Our Latest Works</h2></div>
        <div className="proj-grid">
          {PROJECTS.map(([k,t,img],i)=>(
            <article className="proj-card reveal" key={t} onClick={()=>onOpen&&onOpen(i)} style={onOpen?{cursor:'pointer'}:null}>
              <img src={`assets/img/${img}.${img==='capacity'?'png':'webp'}`} alt={t}/>
              <div className="scrim"/>
              <div className="meta"><div className="k">{k}</div><h3>{t}</h3></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact: Quote form + FAQ ---------------- */
const FAQS=[
  ["What types of building materials do you supply?","We supply a wide range of high-quality building materials, including TMT steel, PEB shades, cement, fabrication steel and construction essentials to meet diverse project needs."],
  ["Do you provide custom steel fabrication services?","Yes, we specialise in custom steel fabrication tailored to your project requirements, ensuring precision, durability and structural integrity."],
  ["Can you assist with workforce staffing for projects?","Absolutely. We provide skilled and experienced workers — welders, fabricators, site supervisors and more — to ensure smooth execution."],
  ["Which areas do you serve?","We operate across Maharashtra with offices in Sinnar and Nashik (Gangapur Road), delivering materials with effective & timely delivery."],
];
function Faq(){
  const [open,setOpen]=useState2(0);
  return (
    <div>
      <span className="eyebrow">Learn More From</span>
      <h2 className="sec-title" style={{marginBottom:22}}>Frequently Asked Questions</h2>
      {FAQS.map(([q,a],i)=>(
        <div className={"faq-item"+(open===i?" open":"")} key={i}>
          <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
            {q}<span className="ic"><Svg d={I.plus} vb="0 0 448 512"/></span>
          </button>
          <div className="faq-a" style={{maxHeight: open===i?'200px':'0'}}><p>{a}</p></div>
        </div>
      ))}
    </div>
  );
}
function QuoteForm({prefill}){
  const [sent,setSent]=useState2(false);
  const subj=useRef2();
  React.useEffect(()=>{ if(prefill && subj.current){ subj.current.value = `Enquiry: ${prefill}`; subj.current.focus(); } },[prefill]);
  return (
    <div className="qform reveal">
      <span className="eyebrow c">Request a Quote</span>
      <h3 style={{fontSize:'1.5rem',margin:'10px 0 4px'}}>Ready to Work Together?</h3>
      <p style={{color:'var(--grey-600)',fontSize:14,marginBottom:20}}>Build a project with us — tell us what you need.</p>
      {sent
        ? <div className="ok"><Svg d={I.check} width="18" height="18" style={{fill:'#2C6B3C'}}/> Thank you! Your enquiry has been received — our team will share the latest price shortly.</div>
        : <form onSubmit={e=>{e.preventDefault();setSent(true);}}>
            <div className="two">
              <div className="field"><label>Name <span className="req">*</span></label><input required placeholder="Enter your name"/></div>
              <div className="field"><label>Email <span className="req">*</span></label><input required type="email" placeholder="Enter your email"/></div>
            </div>
            <div className="field"><label>Subject</label><input ref={subj} placeholder="Subject"/></div>
            <div className="field"><label>Message <span className="req">*</span></label><textarea required rows="3" placeholder="Message"/></div>
            <button className="btn btn-primary" style={{width:'100%',justifyContent:'center'}} type="submit">Send Message <Svg d={I.arrow} vb="0 0 448 512"/></button>
          </form>}
    </div>
  );
}
function Contact({prefill}){
  return (
    <section className="section" id="contact">
      <div className="wrap cta-grid">
        <Faq/>
        <QuoteForm prefill={prefill}/>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer({go}){
  const L=(path,label)=>(<li><a href={"#"+path} onClick={e=>{e.preventDefault();go(path);}}>{label}</a></li>);
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-grid">
          <div>
            <div className="ftr-logo"><Logo/></div>
            <p>Build Core Supply — formerly Sai Services &amp; Building Material Supply. Your trusted partner in steel and building materials for 14+ years across Maharashtra.</p>
          </div>
          <div>
            <h4>Company</h4>
            <ul>{L("/about","About Us")}{L("/services","Services")}{L("/products","Products")}{L("/projects","Projects")}</ul>
          </div>
          <div>
            <h4>Products</h4>
            <ul>{L("/products","Cement")}{L("/products","TMT Steel")}{L("/products","Cement Frames")}{L("/products","AAC Blocks")}</ul>
          </div>
          <div>
            <h4>Reach Us</h4>
            <div className="loc"><Svg d={I.pin} vb="0 0 384 512"/><span>Sai Steel Services, Sinnar, Nashik District, Maharashtra</span></div>
            <div className="loc"><Svg d={I.pin} vb="0 0 384 512"/><span>Gangapur Road, Nashik, Maharashtra</span></div>
            <div className="loc"><Svg d={I.phone}/><span>+91 98765 43210</span></div>
          </div>
        </div>
        <div className="ftr-bot">
          <span>© 2026 Build Core Supply. All rights reserved.</span>
          <span>Owner: Uday Deshmukh · CORE</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Products, Projects, Contact, Faq, QuoteForm, Footer, PRODUCTS, CATS, PROJECTS, FAQS });