/* Home — capability-led with factory + projects teaser + sectors */

function Home({ go, t, heroVariant, showCredit }) {
  return (
    <div className="page" data-screen-label="01 Home">

      {/* HERO */}
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 001 / Home</div>
            <div className="kicker">Dubai · Saih Shuaib 3 · 25.04°N 55.18°E (TBC)</div>
            <div className="kicker">Issue 2026.1</div>
          </div>

          {heroVariant === "editorial" && (
            <div className="hero-headline rise">
              <Eyebrow>Since 1986 · Everything in-house</Eyebrow>
              <h1 className="display-xl" style={{marginTop:24}}>
                Interior fit&#8209;out<br/>
                &amp; joinery, made<br/>
                <span style={{color:"var(--bronze)"}}>in&#8209;house</span> in Dubai.
              </h1>
              <p className="lede" style={{marginTop:28, maxWidth:"56ch"}}>
                Design, manufacture and install under one roof — a 550,000 sq ft factory and nine in-house divisions, from joinery to civil works. Built for tender, built to programme.
              </p>
              <div style={{display:"flex", gap:14, marginTop:36, flexWrap:"wrap"}}>
                <a className="btn" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>{t("Start a project")} <ArrowRight /></a>
                <a className="btn btn-ghost" href="#/factory" onClick={(e)=>{e.preventDefault(); go("factory");}}>Tour the factory <ArrowRight /></a>
              </div>
            </div>
          )}

          {heroVariant === "image" && (
            <div className="hero-headline rise" style={{paddingBottom:32}}>
              <h1 className="display-l">
                Interior fit-out & joinery,<br/>
                <span style={{color:"var(--bronze)"}}>made in-house</span> in Dubai since 1986.
              </h1>
            </div>
          )}

          {heroVariant === "split" && (
            <div className="rise" style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:48, alignItems:"end", paddingBottom:48}}>
              <h1 className="display-l">
                Interior fit-out<br/>&amp; joinery, made<br/>
                <span style={{color:"var(--bronze)"}}>in-house</span> in Dubai.
              </h1>
              <div>
                <Eyebrow>Turnkey contractor · since 1986</Eyebrow>
                <p className="lede" style={{marginTop:16}}>
                  Design, manufacture and install under one roof — a 550,000 sq ft factory and nine in-house divisions, from joinery to civil works.
                </p>
                <div style={{display:"flex", gap:14, marginTop:24, flexWrap:"wrap"}}>
                  <a className="btn" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Start a project <ArrowRight /></a>
                  <a className="btn btn-ghost" href="#/factory" onClick={(e)=>{e.preventDefault(); go("factory");}}>Tour the factory <ArrowRight /></a>
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="hero-image rise rise-2">
          <img src="media/project-hospitality-1.webp" alt="Hospitality interior built by Bond Interiors" />
          {showCredit && (
            <div className="credit-overlay">
              Project & photographer credit pending client sign-off — hospitality interior, Dubai
            </div>
          )}
        </div>
        <div className="wrap">
          <div className="hero-caption">
            <span>Hero / Hospitality fit-out · Dubai · 2024</span>
            <span>Joinery · Metal Works · Glass Works · Stone &amp; Marble</span>
          </div>
        </div>
      </section>

      {/* CAPABILITY STRIP — the differentiator */}
      <section className="cap-strip" data-screen-label="01a Capability strip">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48, alignItems:"end", marginBottom:48, color:"var(--paper)"}}>
            <div>
              <Eyebrow>№ 02 — Everything in-house</Eyebrow>
              <div className="display-l" style={{marginTop:18, color:"var(--paper)"}}>
                Nine divisions,<br/>one roof,<br/>one programme.
              </div>
            </div>
            <p className="lede" style={{color:"rgba(250,250,247,0.7)", maxWidth:"56ch", marginBottom:6}}>
              Fit-out firms typically subcontract the trades. We don't. Joinery, metal, glass, stone, MEP and civil all run out of the same 550,000 sq ft factory in Dubai Industrial City — and meet on the same drawings.
            </p>
          </div>

          <div className="cap-grid">
            {window.DIVISIONS.map(d => (
              <button key={d.id} className="cap-cell" onClick={()=>go("factory")}>
                <div className="num">{d.n}</div>
                <div className="name">
                  {d.name}
                  {d.since && <b>{d.since}</b>}
                </div>
              </button>
            ))}
          </div>

          <div style={{marginTop:48, display:"flex", justifyContent:"space-between", alignItems:"baseline", flexWrap:"wrap", gap:24, color:"rgba(250,250,247,0.6)"}}>
            <div className="kicker" style={{color:"rgba(250,250,247,0.5)"}}>Saih Shuaib 3 · Dubai Industrial City · est. 2018</div>
            <a className="link-arrow" style={{color:"var(--paper)", borderColor:"var(--paper)"}} href="#/factory" onClick={(e)=>{e.preventDefault(); go("factory");}}>Inside the factory <ArrowRight /></a>
          </div>
        </div>
      </section>

      {/* STATS / scale */}
      <section className="section-tight">
        <div className="wrap">
          <div className="stat-row" style={{borderLeft:"1px solid var(--line)"}}>
            <div className="stat"><div className="kicker">Founded</div><div className="v">1986</div><div className="l">Began as a maintenance firm; first fit-out for the Marie Claire office &amp; showroom.</div></div>
            <div className="stat"><div className="kicker">Factory</div><div className="v">550,000<small> sq ft</small></div><div className="l">Saih Shuaib 3, Dubai Industrial City — established 2018.</div></div>
            <div className="stat"><div className="kicker">In-house divisions</div><div className="v">9</div><div className="l">Joinery, Metal, Glass, Signage, Solid Surface, Upholstery, Stone, MEP, Civil.</div></div>
            <div className="stat"><div className="kicker">Sectors served</div><div className="v">10</div><div className="l">Hospitality, Retail, Residential, F&amp;B, Banking, Corporate, Healthcare, Wellness, Aviation, Exhibition.</div></div>
          </div>
        </div>
      </section>

      {/* SELECTED PROJECTS */}
      <section className="section" data-screen-label="01b Selected projects">
        <div className="wrap">
          <SectionHead
            kicker="№ 03 — Selected projects"
            title="A working portfolio."
            lede="Real projects, real divisions used, photographed by us or our clients' agencies — published only as rights are confirmed."
            action={<a className="link-arrow" href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>All projects · 10 sectors <ArrowRight /></a>}
          />

          <div className="project-grid" style={{marginTop:48}}>
            {[0,1,2,3,4,5].map(i => {
              const p = window.PROJECTS[i];
              const span = i === 0 ? 8 : i === 1 ? 4 : i === 2 ? 6 : i === 3 ? 6 : 4;
              const frame = i === 0 ? "wide" : "tall";
              return (
                <div key={p.id} style={{gridColumn: `span ${span}`}}>
                  <ProjectCard p={p} go={go} showCredit={showCredit} frame={frame} index={i} />
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ME by Melia / The Opus — editorial callout using the line drawing */}
      <section className="section-tight">
        <div className="wrap">
          <div className="opus-block">
            <div className="left">
              <div>
                <Eyebrow>Inside case study № 01</Eyebrow>
                <div className="display-m" style={{marginTop:16}}>ME by Melia — The Opus.</div>
                <p className="lede" style={{marginTop:14}}>
                  A 93-key Zaha Hadid hotel inside the Opus tower. Bookmatched stone, curved laminated glass and CNC-cut joinery — four divisions, one roof.
                </p>
              </div>
              <dl className="case-meta" style={{borderColor:"var(--line)", background:"var(--paper)"}}>
                <div><dt>Sector</dt><dd>Hospitality</dd></div>
                <div><dt>Year</dt><dd>2020</dd></div>
                <div><dt>Scope</dt><dd>Hotel & residences</dd></div>
                <div><dt>Divisions</dt><dd className="divs">Joinery · Metal · Glass · Stone</dd></div>
                <div style={{borderRight:0}}><dt>Status</dt><dd>Credit pending</dd></div>
              </dl>
              <a className="link-arrow" href={`#/project/opus-melia`} onClick={(e)=>{e.preventDefault(); go("project/opus-melia");}}>Read the case study <ArrowRight /></a>
            </div>
            <div className="right">
              <img src="media/project-me-by-melia-opus.webp" alt="ME by Melia — The Opus, architectural line drawing" />
            </div>
          </div>
        </div>
      </section>

      {/* SECTORS */}
      <section className="section" data-screen-label="01c Sectors">
        <div className="wrap">
          <SectionHead
            kicker="№ 04 — Sectors served"
            title="Ten sectors, one delivery model."
            action={<a className="link-arrow" href="#/sectors" onClick={(e)=>{e.preventDefault(); go("sectors");}}>All sectors <ArrowRight /></a>}
          />
          <div className="sector-grid" style={{marginTop:32}}>
            {window.SECTORS.map((s, i) => {
              const count = window.PROJECTS.filter(p => p.sector === s.id).length;
              return (
                <button key={s.id} className="sector-tile" onClick={()=>go(`projects?sector=${s.id}`)}>
                  <div className="kicker n">{String(i+1).padStart(2,"0")}</div>
                  <h4>{s.label}</h4>
                  <div className="kicker n">{count} {count===1?"project":"projects"} <ArrowRight size={10} /></div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* WHY BOND */}
      <section className="section-tight" style={{background:"var(--mist)"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48, alignItems:"start"}}>
            <div>
              <Eyebrow>№ 05 — Why Bond</Eyebrow>
              <div className="display-m" style={{marginTop:16}}>
                The unglamorous things<br/>tender teams care about.
              </div>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, borderTop:"1px solid var(--line)", borderLeft:"1px solid var(--line)"}}>
              {[
                ["One programme", "Design coordination, factory build and site install are the same team — pieces don't get lost between subcontractors."],
                ["Tender-ready", "Set up for the BoQ and procurement processes the GCC's major developers actually use."],
                ["Made in Dubai", "550,000 sq ft of manufacturing capacity on-shore — no shipping risk on the critical path."],
                ["Forty years standing", "Founded 1986. We've been delivering large-scale fit-out in this region since the buildings were."],
              ].map(([h, p]) => (
                <div key={h} style={{padding:"28px 24px 32px", borderRight:"1px solid var(--line)", borderBottom:"1px solid var(--line)", background:"var(--paper)"}}>
                  <h4 className="display-s" style={{margin:0}}>{h}</h4>
                  <p style={{margin:"10px 0 0", color:"var(--graphite)", fontSize:14, lineHeight:1.55}}>{p}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{background:"var(--ink)", color:"var(--paper)", padding:"80px 0"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:48, alignItems:"end"}}>
          <div>
            <Eyebrow>№ 06 — Start a project</Eyebrow>
            <div className="display-l" style={{marginTop:18, color:"var(--paper)"}}>
              Send us drawings,<br/>a brief, or a BoQ.
            </div>
          </div>
          <div>
            <p style={{color:"rgba(250,250,247,0.65)", maxWidth:"42ch", margin:"0 0 24px"}}>
              Tender-ready enquiries, design-and-build briefs, or a one-line "is this you?" — all welcome. Reply within one business day.
            </p>
            <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
              <a className="btn btn-light" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Start a project <ArrowRight /></a>
              <a className="btn btn-ghost" style={{color:"var(--paper)", borderColor:"rgba(255,255,255,0.3)"}} href="https://wa.me/971556003228" target="_blank" rel="noopener noreferrer"><WhatsAppIcon /> WhatsApp us</a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { Home });