// In-house / How we deliver — the 100,000 sq ft DIP factory story
function InHouse({ onNav }) {
  const { DIVISIONS, TIMELINE } = window.DI;

  return (
    <div className="page-enter">
      {/* Hero */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", paddingTop: "9rem", paddingBottom: "6rem", position: "relative", overflow: "hidden" }}>
        {/* Background texture */}
        <div style={{
          position: "absolute", inset: 0, opacity: 0.07,
          backgroundImage: "repeating-linear-gradient(45deg, var(--paper) 0 1px, transparent 1px 12px)",
        }}></div>
        <div className="container" style={{ position: "relative" }}>
          <Eyebrow accent={false}><span style={{ color: "var(--accent)" }}>●</span>&nbsp;&nbsp;How we deliver</Eyebrow>
          <h1 className="h1" style={{ marginTop: "1.5rem", color: "var(--paper)", maxWidth: "18ch" }}>
            Seven divisions.<br/>
            <span style={{ color: "var(--accent)" }}>One yard.</span>
          </h1>
          <p className="lead" style={{ color: "rgba(255,255,255,0.7)", marginTop: "2rem", maxWidth: "44rem" }}>
            Our 100,000 sq ft production footprint in Dubai Investment Park is where joinery, glass, metal,
            signage, furniture, MEP and Fire-Life-Safety are designed, fabricated and quality-checked
            before they ever leave for site.
          </p>
        </div>
      </section>

      {/* Big stat grid */}
      <section className="section--tight" style={{ background: "var(--charcoal)", color: "var(--paper)", padding: "0", borderTop: "1px solid rgba(255,255,255,0.1)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }} className="footprint-grid">
          {[
            { num: "100k", unit: "sq ft", label: "Total footprint", sub: "Dubai Investment Park" },
            { num: "40k", unit: "sq ft", label: "New factory", sub: "Glass · Metal · Signage · 2025" },
            { num: "7", unit: "divisions", label: "In-house", sub: "MEP to FLS · 2014–2024" },
            { num: "2", unit: "year", label: "Defect liability", sub: "all turnkey projects" },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "3.5rem 2rem",
              borderRight: i < 3 ? "1px solid rgba(255,255,255,0.12)" : "none",
            }} className="footprint-cell">
              <div className="num display" style={{ fontSize: "clamp(2.5rem, 5vw, 4.5rem)", color: "var(--paper)", lineHeight: 1, fontWeight: 300 }}>
                {s.num}<span style={{ color: "var(--accent)", fontSize: "0.4em", marginLeft: "0.1em" }}>{s.unit}</span>
              </div>
              <div className="eyebrow" style={{ marginTop: "1rem", color: "var(--paper)" }}>{s.label}</div>
              <div style={{ marginTop: "0.4rem", fontFamily: "var(--font-mono)", fontSize: "0.7rem", color: "rgba(255,255,255,0.5)" }}>{s.sub}</div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 880px) {
            .footprint-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .footprint-cell:nth-child(2) { border-right: none !important; }
            .footprint-cell:nth-child(1), .footprint-cell:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
          }
        `}</style>
      </section>

      {/* Photo + intro */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "3rem", alignItems: "start" }}>
            <div style={{ gridColumn: "span 7" }} className="ih-photo">
              <div className="img-hover" style={{ aspectRatio: "16/11" }}>
                <img src="media/service-turnkey.webp" alt="In-house joinery workshop" />
              </div>
              <div style={{ marginTop: "0.75rem", display: "flex", justifyContent: "space-between" }}>
                <span className="eyebrow">DIP joinery facility</span>
                <span className="eyebrow" style={{ color: "var(--accent)" }}>Live · Dubai</span>
              </div>
            </div>
            <div style={{ gridColumn: "span 5" }} className="ih-text">
              <Eyebrow>The case for in-house</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1.25rem" }}>The things that decide whether a fit-out lands on programme — we don't sub-contract them.</h2>
              <p className="lead" style={{ marginTop: "1.5rem" }}>
                Joinery shop drawings, fabrication tolerances, metal & glass coordination, signage,
                MEP coordination — these are the items that crash programmes and budgets when you're
                relying on third parties. Bringing them under our roof has been our 12-year strategy.
              </p>
              <p className="lead" style={{ marginTop: "1.5rem" }}>
                It also means one accountable team — quoting, designing, fabricating, installing,
                snagging — and a 2-year defect liability period that means something.
              </p>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .ih-photo, .ih-text { grid-column: 1 / -1 !important; }
          }
        `}</style>
      </section>

      {/* Divisions timeline */}
      <section className="section bg-mist">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end", marginBottom: "4rem" }}>
            <div style={{ gridColumn: "span 8" }}>
              <Eyebrow>The build-out · 2014 → 2024</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem" }}>Seven divisions, brought in-house one at a time.</h2>
            </div>
          </div>

          {/* Horizontal timeline */}
          <div className="divisions-timeline" style={{ position: "relative", paddingTop: "2rem" }}>
            <div style={{ position: "absolute", left: 0, right: 0, top: "calc(2rem + 8px)", height: 1, background: "var(--line)" }}></div>
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${DIVISIONS.length}, 1fr)`, gap: "1rem", position: "relative" }}>
              {DIVISIONS.map((d, i) => (
                <div key={d.name} style={{ position: "relative" }}>
                  <div style={{ width: 17, height: 17, background: "var(--accent)", borderRadius: "50%", border: "4px solid var(--mist)" }}></div>
                  <div style={{ marginTop: "1.5rem" }}>
                    <div className="num" style={{ fontSize: "0.85rem", color: "var(--graphite)", letterSpacing: "0.05em" }}>{d.year}</div>
                    <div className="display" style={{ marginTop: "0.5rem", fontSize: "1.05rem", fontWeight: 500, color: "var(--ink)", lineHeight: 1.2 }}>{d.name}</div>
                    <div style={{ marginTop: "0.5rem", fontSize: "0.8rem", color: "var(--graphite)", lineHeight: 1.4 }}>{d.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <style>{`
            @media (max-width: 880px) {
              .divisions-timeline > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
              .divisions-timeline { padding-top: 0 !important; }
              .divisions-timeline > div:first-child { display: none !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Process / sequence */}
      <section className="section bg-paper">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", marginBottom: "4rem" }}>
            <div style={{ gridColumn: "span 8" }}>
              <Eyebrow>From brief to handover</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem" }}>One contract. Five gates. Twelve weeks typical.</h2>
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--line)" }}>
            {[
              { num: "01", title: "Brief & site survey", body: "Sector-qualified brief; site survey by our project & MEP leads. Indicative cost letter within 5 working days.", who: "Design + MEP" },
              { num: "02", title: "Concept & quote", body: "Concept package + tendered quote at division-level breakdown — so you can see exactly what's made in our factory vs. sourced.", who: "Design + Estimation" },
              { num: "03", title: "Detailed design & shop drawings", body: "Coordinated package across joinery, glass/metal, MEP, signage, furniture, FLS — issued for fabrication, not for tender.", who: "Design + 6 divisions" },
              { num: "04", title: "In-house fabrication", body: "Manufactured at DIP — joinery, glass, metal, signage, furniture under continuous QA. Site mobilises in parallel for MEP first-fix.", who: "DIP factory" },
              { num: "05", title: "Install & handover", body: "Snagging closed within 30 days of handover. 2-year defect liability period. Project archived to the LEED portfolio where applicable.", who: "Site + QA" },
            ].map((g) => (
              <div key={g.num} style={{
                display: "grid", gridTemplateColumns: "80px 1fr 2fr 1.5fr", gap: "2rem",
                padding: "2rem 0", borderBottom: "1px solid var(--line)", alignItems: "start",
              }} className="gate-row">
                <span className="num display" style={{ fontSize: "1.5rem", color: "var(--accent)", fontWeight: 300 }}>{g.num}</span>
                <h3 className="h3" style={{ margin: 0 }}>{g.title}</h3>
                <p style={{ margin: 0, fontSize: "0.95rem", color: "var(--graphite)", lineHeight: 1.55 }}>{g.body}</p>
                <span className="eyebrow" style={{ textAlign: "right" }}>{g.who}</span>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .gate-row { grid-template-columns: 60px 1fr !important; }
            .gate-row > p, .gate-row > span:last-child { grid-column: 1 / -1 !important; margin-top: -1rem !important; }
            .gate-row > span:last-child { text-align: left !important; margin-top: 0.5rem !important; }
          }
        `}</style>
      </section>

      {/* Accreditations */}
      <section className="section--tight" style={{ background: "var(--mist)", padding: "4rem 0", borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: "2rem" }}>Accreditations</div>
          <div className="accred-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "1.5rem" }}>
            {[
              { label: "ISO 9001", sub: "Quality · 2015" },
              { label: "ISO 14001", sub: "Environment · 2016" },
              { label: "ISO 45001", sub: "Safety · 2018" },
              { label: "SUPERBRANDS", sub: "claimed 2021" },
              { label: "LEED Platinum", sub: "project credentials" },
            ].map((a) => (
              <div key={a.label} style={{ padding: "1.5rem", background: "var(--paper)", border: "1px solid var(--line)" }} className="accred-cell">
                <div className="display" style={{ fontSize: "1.1rem", color: "var(--ink)", fontWeight: 500 }}>{a.label}</div>
                <div className="eyebrow" style={{ marginTop: "0.5rem" }}>{a.sub}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: "2rem", fontSize: "0.8rem", color: "var(--graphite)", fontFamily: "var(--font-mono)" }}>
            * Certificate scans + LEED Platinum project list available on request.
          </p>
          <style>{`
            @media (max-width: 880px) {
              .accred-grid { grid-template-columns: repeat(2, 1fr) !important; }
            }
          `}</style>
        </div>
      </section>

      {/* CTA band */}
      <section className="bg-paper section">
        <div className="container">
          <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "4rem", display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "2rem", alignItems: "center" }} className="ih-cta">
            <div style={{ gridColumn: "span 8" }} className="ih-cta-text">
              <Eyebrow accent={false}><span style={{ color: "var(--accent)" }}>●</span>&nbsp;&nbsp;Visit the factory</Eyebrow>
              <h2 className="h2" style={{ marginTop: "1rem", color: "var(--paper)" }}>Come and walk the yard.</h2>
              <p className="lead" style={{ marginTop: "1rem", color: "rgba(255,255,255,0.7)" }}>
                Tours are arranged for prospective clients, architects, consultants — book a slot below.
              </p>
            </div>
            <div style={{ gridColumn: "span 4", textAlign: "right" }} className="ih-cta-btn">
              <button className="btn btn--accent" onClick={() => onNav("contact")}>Book a visit <Arrow /></button>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .ih-cta { padding: 2rem !important; }
            .ih-cta-text, .ih-cta-btn { grid-column: 1 / -1 !important; text-align: left !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { InHouse });