/* Factory & Capability — the differentiator page */

function Factory({ go, showCredit }) {
  const [openDiv, setOpenDiv] = React.useState(null);
  return (
    <div className="page" data-screen-label="04 Factory">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 04 / Factory & Capability</div>
            <div className="kicker">Saih Shuaib 3 · Dubai Industrial City</div>
            <div className="kicker">Est. 2018</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>The differentiator</Eyebrow>
            <h1 className="display-xl" style={{marginTop:18}}>
              550,000<br/>
              <span style={{fontFamily:"var(--body)", fontSize:"0.18em", letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--graphite)", verticalAlign:"middle"}}>square feet</span>
            </h1>
            <p className="lede" style={{marginTop:18}}>
              A single manufacturing facility on the south-west edge of Dubai. Joinery, metal, glass, stone, MEP and civil all running out of the same building, on the same drawings, to the same programme.
            </p>
            <div style={{display:"flex", gap:14, marginTop:32, flexWrap:"wrap"}}>
              <a className="btn" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Book a factory visit <ArrowRight /></a>
              <a className="btn btn-ghost" href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>See what's been made <ArrowRight /></a>
            </div>
          </div>
        </div>

        <div className="hero-image" style={{aspectRatio:"16/8"}}>
          <img src="media/division-joinery-1.webp" alt="Inside the Bond Interiors joinery floor" />
          {showCredit && <div className="credit-overlay">Joinery floor — Saih Shuaib 3 · Photographer credit pending client sign-off</div>}
        </div>
        <div className="wrap">
          <div className="hero-caption">
            <span>Floor / Joinery</span>
            <span>Workshop photography — request hi-res masters from client</span>
          </div>
        </div>
      </section>

      {/* Floor map / overview */}
      <section className="section-tight">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:48, alignItems:"start"}}>
            <div>
              <Eyebrow>One programme</Eyebrow>
              <div className="display-m" style={{marginTop:14}}>How a Bond project actually moves.</div>
              <p className="lede" style={{marginTop:14}}>
                Most fit-out firms hand off between a designer, a manufacturer and an installer. We don't hand off. The CAD desk that detailed your panel sits twenty metres from the saw that cuts it. The result is shorter critical paths, fewer drawings lost in translation, and a project that arrives on site already pre-assembled.
              </p>
            </div>
            <div style={{padding:24, background:"var(--mist)", border:"1px solid var(--line)"}}>
              <div className="kicker" style={{marginBottom:14}}>Production floor — schematic</div>
              <pre style={{margin:0, fontFamily:"var(--mono)", fontSize:11, lineHeight:1.6, color:"var(--graphite)"}}>
{`┌────────── 550,000 sq ft ───────────┐
│  ┌─Joinery─┐ ┌─Metal─┐  ┌─Stone─┐  │
│  │ CNC × 6 │ │ Weld  │  │ Saws  │  │
│  │ Sanding │ │ Brass │  │ Polish│  │
│  └────┬────┘ └───┬───┘  └───┬───┘  │
│       │         │           │      │
│  ┌────┴─────────┴───────────┴───┐  │
│  │  Pre-assembly  ·  QA  ·  Pack │  │
│  └──────────────────┬────────────┘  │
│                     │               │
│  ┌─Glass─┐ ┌─Solid─┐ │ ┌─Uphol.─┐   │
│  │Madina │ │Surface│ │ │ Soft   │   │
│  └───────┘ └───────┘ │ └────────┘   │
│       Loading bays ──┴── 7          │
└────────────────────────────────────┘`}
              </pre>
            </div>
          </div>
        </div>
      </section>

      {/* DIVISIONS — long form */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            kicker="№ 02 — Nine divisions"
            title="Every division, in-house."
            lede="Every trade you'd normally subcontract, made under one roof in Dubai. Click any division to see its workshop."
          />
          <div style={{marginTop:32}}>
            {window.DIVISIONS.map((d, i) => (
              <React.Fragment key={d.id}>
                <div className="div-row" onClick={()=>setOpenDiv(openDiv === d.id ? null : d.id)}>
                  <div className="ix">{d.n}</div>
                  <div className="name">{d.name}</div>
                  <div className="desc">{d.note}</div>
                  <div className="yr">{d.since || "—"} <span style={{marginLeft:18, color:"var(--ink)"}}>{openDiv === d.id ? "—" : "+"}</span></div>
                </div>
                {openDiv === d.id && (
                  <div style={{padding:"32px 0 48px", animation:"riseIn .4s ease both"}}>
                    <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:32, alignItems:"start"}}>
                      <div style={{aspectRatio:"4/3", overflow:"hidden", background:"var(--mist)", position:"relative"}}>
                        <img src={d.img} alt={`${d.name} workshop`} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                        {showCredit && <div className="credit-overlay">Workshop — {d.name} · Credit pending</div>}
                      </div>
                      <div>
                        <Eyebrow>Inside the {d.name.toLowerCase()} workshop</Eyebrow>
                        <p style={{marginTop:14, fontSize:16, lineHeight:1.65}}>{d.note}</p>
                        <div style={{marginTop:24, paddingTop:18, borderTop:"1px solid var(--line)", display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}>
                          <div><div className="kicker">Used on</div><div style={{marginTop:6, fontSize:14}}>{window.PROJECTS.filter(p => p.divisions.includes(d.name)).length} projects shown</div></div>
                          <div><div className="kicker">Status</div><div style={{marginTop:6, fontSize:14}}>{d.since || "Always in-house"}</div></div>
                        </div>
                        <a className="link-arrow" style={{marginTop:24, display:"inline-flex"}} href="#/projects" onClick={(e)=>{e.preventDefault(); go("projects");}}>Projects this division delivered <ArrowRight /></a>
                      </div>
                    </div>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* archival */}
      <section className="section-tight" style={{background:"var(--mist)"}}>
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:48, alignItems:"end"}}>
            <div style={{aspectRatio:"16/9", overflow:"hidden", background:"var(--ink)"}}>
              <img src="media/about-us-banner.webp" alt="Archival — the original Bond factory and team, early 1990s" style={{width:"100%", height:"100%", objectFit:"cover", filter:"contrast(1.05)"}} />
            </div>
            <div>
              <Eyebrow>Archival, c. 1990s</Eyebrow>
              <div className="display-m" style={{marginTop:14}}>From a maintenance firm to a factory.</div>
              <p className="lede" style={{marginTop:14}}>
                Founded as a maintenance firm in 1986. Technical department in 2001. Manufacturing machinery in 2006. The 550,000 sq ft factory in 2018. Bond Holding in 2023.
              </p>
              <a className="link-arrow" style={{marginTop:20, display:"inline-flex"}} href="#/about" onClick={(e)=>{e.preventDefault(); go("about");}}>Full company history <ArrowRight /></a>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <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>Visit us</Eyebrow>
            <div className="display-l" style={{marginTop:18, color:"var(--paper)"}}>Come walk the floor.</div>
          </div>
          <div>
            <p style={{color:"rgba(250,250,247,0.65)", maxWidth:"42ch", margin:"0 0 24px"}}>
              We host pre-tender site visits for procurement, design and consultancy teams. Plan on 90 minutes; bring questions.
            </p>
            <a className="btn btn-light" href="#/contact" onClick={(e)=>{e.preventDefault(); go("contact");}}>Book a factory visit <ArrowRight /></a>
          </div>
        </div>
      </section>
    </div>
  );
}

function Capabilities({ go }) {
  return (
    <div className="page" data-screen-label="05 Capabilities">
      <section className="hero">
        <div className="wrap">
          <div className="hero-meta">
            <div className="kicker">№ 05 / Services & Capabilities</div>
            <div className="kicker">Turnkey · in-house · since 1986</div>
            <div className="kicker">No price list — bespoke contracting</div>
          </div>
          <div className="hero-headline">
            <Eyebrow>Services & Capabilities</Eyebrow>
            <h1 className="display-l" style={{marginTop:18}}>
              The turnkey model,<br/>laid out honestly.
            </h1>
            <p className="lede" style={{marginTop:18}}>
              What we do, where each piece of work happens, and who hands off to whom. Nine in-house divisions; one project manager; no subcontracted trades we won't tell you about.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:0, borderTop:"1px solid var(--line)", borderLeft:"1px solid var(--line)"}}>
            {[
              ["Design coordination", "We coordinate to the architect's intent — value-engineering, shop drawings, mock-ups, sign-off."],
              ["Manufacturing", "Made in our Dubai factory across the nine divisions — no outsourced trades on the critical path."],
              ["Installation", "Site delivery and install run by the same team that built it; snagging closed on the same drawings."],
            ].map(([h, p]) => (
              <div key={h} style={{padding:"32px 24px 40px", borderRight:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
                <div className="kicker">Phase</div>
                <h3 className="display-s" style={{margin:"10px 0 14px"}}>{h}</h3>
                <p style={{color:"var(--graphite)", fontSize:14, lineHeight:1.6, margin:0}}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead
            kicker="Nine in-house divisions"
            title="Each division is a real workshop on a real floor."
            action={<a className="link-arrow" href="#/factory" onClick={(e)=>{e.preventDefault(); go("factory");}}>Inside the factory <ArrowRight /></a>}
          />
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24, marginTop:32}}>
            {window.DIVISIONS.map((d, i) => (
              <button key={d.id} className="p-card" onClick={()=>go("factory")} style={{textAlign:"start"}}>
                <div className="frame" style={{aspectRatio:"4/3"}}>
                  <img src={d.img} alt={d.name} loading="lazy" />
                </div>
                <div className="meta">
                  <div>
                    <div className="kicker">{d.n}</div>
                    <h4 className="display-s" style={{margin:"8px 0 0"}}>{d.name}</h4>
                  </div>
                  <div className="yr">{d.since || "In-house"}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight" style={{background:"var(--mist)"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48}}>
          <div>
            <Eyebrow>Things we deliberately don't do</Eyebrow>
            <div className="display-s" style={{marginTop:16}}>An honest scope is a faster project.</div>
          </div>
          <ul style={{listStyle:"none", margin:0, padding:0, display:"flex", flexDirection:"column", gap:16, fontSize:15, lineHeight:1.6}}>
            <li style={{paddingBottom:16, borderBottom:"1px solid var(--line)"}}><strong>We don't publish prices.</strong> Every project we do is bespoke; pricing follows a brief or BoQ.</li>
            <li style={{paddingBottom:16, borderBottom:"1px solid var(--line)"}}><strong>We don't pretend we make everything.</strong> We bring in specialist suppliers where it's right (e.g. specific lighting, acoustic) and we'll tell you which.</li>
            <li style={{paddingBottom:16, borderBottom:"1px solid var(--line)"}}><strong>We don't take credit for projects we didn't deliver.</strong> Every case study lists the divisions we used and the photographer who shot it.</li>
          </ul>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Factory, Capabilities });
