/* Build Core Supply — Website UI Kit · components
   Faithful recreation of the marketing site. Exports components to window. */
const { useState, useEffect, useRef } = React;

/* ---------------- Icons (Font Awesome solid paths — the brand's native set) ---------------- */
const I = {
  arrow: "M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z",
  phone: "M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z",
  pin: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z",
  check: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
  plus: "M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
  clock: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 0 1-22.49 2.5h0l-67-49.72a40 40 0 0 1-15-31.23V112a16 16 0 0 1 16-16h32a16 16 0 0 1 16 16v144l58 42.5A16 16 0 0 1 348.49 321z",
  leaf: "M546.2 9.7c-5.6-12.5-21.6-13-28.3-1.2C486.9 62.4 431.4 96 368 96h-80C182 96 96 182 96 288c0 7 .8 13.7 1.5 20.5C161.3 262.8 253.4 224 384 224c8.8 0 16 7.2 16 16s-7.2 16-16 16C132.6 256 26 410.1 2.4 468c-6.6 16.3 1.2 34.9 17.5 41.6 16.4 6.8 35-1.1 41.8-17.3 1.5-3.6 20.9-47.9 71.9-90.6 32.4 43.9 94 85.8 174.9 77.2C465.5 467.5 576 326.7 576 154.3c0-50.2-10.8-102.2-29.8-144.6z",
  desktop: "M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z",
  ruler: "M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69.3 39.7c-1.9 1.1-3.2 2.9-3.7 5-.5 2.1-.1 4.4 1.1 6.2l24.4 41.5-22.5 12.9-24.5-41.6c-2.4-4-7.6-5.4-11.6-3l-22 12.6c-4 2.4-5.4 7.6-3 11.6l24.5 41.6-22.5 12.9-24.5-41.6c-2.4-4-7.6-5.4-11.6-3l-22 12.6c-4 2.4-5.4 7.6-3 11.6l24.5 41.6-22.5 12.9-24.5-41.6c-2.4-4-7.6-5.4-11.6-3l-22 12.6c-4 2.4-5.4 7.6-3 11.6l24.4 41.5-22.5 12.9-24.4-41.5c-2.4-4-7.6-5.4-11.6-3l-22 12.6c-4 2.4-5.4 7.6-3 11.6l24.4 41.5-22.5 12.9-24.4-41.5c-1.2-1.9-2.9-3.2-5-3.7-2.1-.5-4.4-.1-6.2 1.1l-69.3 39.7c-15.2 8.7-20.3 28.1-11.5 43.2l79.6 135.5c8.8 15 28.3 20.1 43.5 11.5L624 254.4c15.2-8.7 20.3-28.1 11.7-43.2z",
  mail: "M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 36 0 57.5 0 84v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z",
  building: "M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm84 160h-72v-72c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v72zm48-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z",
  truck: "M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z",
  award: "M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 4.78 25.04-6.52l34.05-128.39c-25.66 6.95-52.07.14-71.53-19.46z",
  expand: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z",
  chevL: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z",
  chevR: "M285.48 272.97L91.13 467.31c-9.37 9.37-24.57 9.37-33.94 0l-22.67-22.67c-9.36-9.36-9.37-24.52-.04-33.9L188.51 256 34.48 101.25c-9.34-9.38-9.32-24.54.04-33.9l22.67-22.67c9.37-9.37 24.57-9.37 33.94 0l194.35 194.34c9.37 9.37 9.37 24.57 0 33.95z",
};
const Svg = ({d, vb="0 0 512 512", ...p}) => <svg viewBox={vb} {...p}><path d={d}/></svg>;
const Logo = ({src="assets/logo-gold.png", className}) => <img src={src} alt="Build Core Supply — CORE" className={className}/>;

/* ---------------- Header ---------------- */
const NAV = [["Home","/"],["About","/about"],["Services","/services"],["Products","/products"],["Projects","/projects"],["Gallery","/gallery"],["Contact","/contact"]];
function Header({go, route, dark}){
  const [sc, setSc] = useState(false);
  useEffect(()=>{ const f=()=>setSc(window.scrollY>40); window.addEventListener('scroll',f); f(); return ()=>window.removeEventListener('scroll',f); },[]);
  const solid = sc || dark;
  return (
    <header className={"hdr"+(solid?" scrolled":"")}>
      <div className="wrap hdr-inner">
        <a className="hdr-logo" href="#/" onClick={e=>{e.preventDefault();go("/");}}><Logo/></a>
        <nav className="nav">
          {NAV.map(([l,p])=>(
            <a key={l} href={"#"+p} className={route===p?"active":""} onClick={e=>{e.preventDefault();go(p);}}>{l}</a>
          ))}
        </nav>
        <div style={{display:'flex',alignItems:'center',gap:'22px'}}>
          <span className="topcall"><Svg d={I.phone} width="14" height="14" style={{fill:'var(--gold-light)'}}/> +91 98765 43210</span>
          <button className="btn btn-primary magnetic" style={{padding:'11px 20px'}} onClick={()=>go("/contact")}>Get a Quote <Svg d={I.arrow} vb="0 0 448 512"/></button>
        </div>
      </div>
      <div className="hdr-progress"/>
    </header>
  );
}

/* ---------------- Sub-page banner + breadcrumb ---------------- */
function SubHero({title, crumb, img="assets/img/about-2.jpg", go}){
  return (
    <section className="subhero">
      <div className="subhero-bg"><img src={img} alt=""/></div>
      <div className="subhero-scrim"/>
      <div className="wrap subhero-inner">
        <h1>{title}</h1>
        <nav className="breadcrumb">
          <a href="#/" onClick={e=>{e.preventDefault();go("/");}}>Home</a>
          <span>/</span><span className="cur">{crumb||title}</span>
        </nav>
      </div>
    </section>
  );
}

/* ---------------- Hero ---------------- */
function Hero({go}){
  return (
    <section className="hero" id="home">
      <div className="hero-bg"><img src="assets/img/hero.jpg" alt="Construction site"/></div>
      <div className="hero-scrim"/>
      <div className="hero-fx">
        <span className="grid"/><span className="orb orb-1"/><span className="orb orb-2"/><span className="scan"/>
      </div>
      <span className="hero-side">Build Core Supply — Steel Experts</span>
      <span className="hud hud-tl"/><span className="hud hud-br"/>
      <div className="wrap hero-inner">
        <span className="kicker"><b>Est. 2010</b><i/>Sinnar · Nashik, Maharashtra</span>
        <h1 className="hero-title">Trusted partner in <span className="grad">steel</span> &amp; building materials.</h1>
        <p>14 years supplying the steel industry — quality products, precision fabrication and on-time delivery for builders across Maharashtra.</p>
        <div className="hero-cta">
          <button className="btn btn-primary magnetic" onClick={()=>go("/products")}>Explore Products <Svg d={I.arrow} vb="0 0 448 512"/></button>
          <button className="btn btn-ghost" onClick={()=>go("/contact")}>Request a Quote</button>
        </div>
        <div className="hero-spec">
          <div className="sp"><span className="n">14<i>+</i></span><span className="t">Years of trust</span></div>
          <div className="sp"><span className="n">2000<i>+</i></span><span className="t">Projects supplied</span></div>
          <div className="sp"><span className="n">1000<i>+</i></span><span className="t">Tons delivered</span></div>
          <div className="sp"><span className="n">100<i>+</i></span><span className="t">Team members</span></div>
        </div>
      </div>
      <div className="hero-scroll"><span>Scroll</span><span className="mouse"/></div>
    </section>
  );
}

/* ---------------- Brand marquee ---------------- */
function Marquee(){
  const items=["Birla Shakti","Ambuja Cement","Rajuri Steel","Shree Om Steel","Jindal Roofing","Sika Waterproofing","TMT Steel Bars","AAC Blocks","PEB Sheds","Cement Frames","MS Sections","Fabrication"];
  const row=[...items,...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t,i)=>(<span className="marquee-item" key={i}><span className="dot"/>{t}</span>))}
      </div>
    </div>
  );
}

/* ---------------- Stats ---------------- */
function Counter({to, suffix="+"}){
  const [n,setN]=useState(0); const ref=useRef(); const done=useRef(false);
  useEffect(()=>{
    const run=()=>{ if(done.current) return; done.current=true;
      const dur=1400, t0=performance.now();
      const tick=t=>{ const p=Math.min(1,(t-t0)/dur); setN(Math.floor((1-Math.pow(1-p,3))*to)); if(p<1) requestAnimationFrame(tick); };
      requestAnimationFrame(tick);
    };
    const io=new IntersectionObserver(es=>{ es.forEach(e=>{ if(e.isIntersecting) run(); });},{threshold:.4});
    if(ref.current) io.observe(ref.current);
    const fb=setTimeout(run, 1200); // fallback if IO never fires
    return ()=>{ io.disconnect(); clearTimeout(fb); };
  },[to]);
  return <span ref={ref}>{n.toLocaleString('en-IN')}{suffix}</span>;
}
function Stats(){
  const data=[[2000,"Projects Finished"],[14,"Years of Experience"],[1000,"Tons of Material Supplied"],[100,"Members of Team"]];
  return (
    <section className="stats">
      <div className="wrap stats-grid">
        {data.map(([n,c])=>(
          <div className="stat" key={c}><div className="num"><Counter to={n}/></div><div className="cap">{c}</div></div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
const SERVICES=[
  ["TMT Steel","Fe-500D grade TMT steel bars from leading mills for strong, lasting structures.","service-tmt-steel"],
  ["PEB Shades","Durable, efficient Pre-Engineered Building shades for any application.","service-peb"],
  ["Material Supply","Reliable sourcing and delivery of top-grade construction materials.","service-material"],
  ["Consultancy","Expert guidance for optimized construction and material solutions.","service-consultancy"],
  ["Fabrication Steel","Precision-engineered steel fabrication for strong, lasting structures.","service-fabrication"],
  ["Scaffolding","Safe access scaffolding supply and erection for sites of every scale.","service-scaffolding"],
];
function Services({go, onCard}){
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="idx">01</span>
          <div className="mid"><span className="eyebrow">Build Your Dream</span><h2 className="sec-title">Quality Services</h2></div>
          <button className="btn btn-ghost-dark" onClick={()=>go("/services")}>View All <Svg d={I.arrow} vb="0 0 448 512"/></button>
        </div>
        <div className="svc-grid">
          {SERVICES.map(([t,d,img])=>(
            <article className="svc reveal" key={t} onClick={()=>onCard&&onCard()} style={onCard?{cursor:'pointer'}:null}>
              <img src={`assets/img/${img}.jpg`} alt={t}/>
              <div className="scrim"/>
              <div className="body"><h3>{t}</h3><p>{d}</p></div>
              <span className="tick"/>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- About / Sustainability ---------------- */
function About({go}){
  const pts=["Sustainability","Project On Time","Modern Technology","Latest Designs"];
  return (
    <section className="about section" id="about">
      <div className="wrap about-grid">
        <div className="about-imgs reveal">
          <img className="big" src="assets/img/about-1.jpg" alt="On site"/>
          <div className="badge"><div className="b-num">14+</div><div className="b-cap">Years building across Maharashtra</div></div>
        </div>
        <div className="reveal">
          <span className="eyebrow">Sustainability</span>
          <h2 className="sec-title">Committed to Building a Safer &amp; Healthier Future</h2>
          <p className="lead" style={{marginTop:16}}>At Build Core Supply, we prioritise sustainable practices for safety, durability and environmental responsibility in every project — backed by quality materials and expert craftsmanship.</p>
          <ul className="checks">
            {pts.map(p=>(<li key={p}><Svg d={I.check} style={{fill:'var(--gold)'}}/> {p}</li>))}
          </ul>
          <button className="btn btn-primary" style={{marginTop:28}} onClick={()=>go("/contact")}>Get In Touch <Svg d={I.arrow} vb="0 0 448 512"/></button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { React_BCS:true, I, Svg, Logo, Header, SubHero, Hero, Stats, Services, About, Counter, SERVICES, NAV, Marquee });