// Manufacturing & Craft — the differentiator page.

function ManufacturingPage({ setRoute, showFactoryStats }) {
  const disciplines = [
    {
      n: "01",
      name: "Joinery & millwork",
      blurb: "From a guestroom headboard to a 12-metre presiding bench: panels, parquetry, cabinetry, full-height doors. CNC-roughed where appropriate, hand-finished as standard.",
      tag: "Veneers · Solid hardwood · Lacquer",
    },
    {
      n: "02",
      name: "Loose furniture",
      blurb: "Beds, sofas, lounge chairs, occasional pieces — manufactured to operator or designer's spec. Prototyped in-house and signed off before run production.",
      tag: "Frames · Springing · Foams · Ticking",
    },
    {
      n: "03",
      name: "Soft furnishings",
      blurb: "Drapery, sheers, headboards, banquettes, cushion programmes. Cut, machined and finished in our upholstery hall alongside the joinery.",
      tag: "Drapery · Upholstery · Bedding · Trim",
    },
    {
      n: "04",
      name: "Architectural metalwork",
      blurb: "Balustrade, reception desks, brass and stainless detailing, decorative screens. Laser-cut, hand-welded, electroplated and lacquered.",
      tag: "Brass · Stainless · Aluminium · Bronze",
    },
  ];

  return (
    <div className="page-enter">
      {/* Hero */}
      <section style={{ position: "relative", minHeight: "78vh", overflow: "hidden", background: "var(--ink)", display: "flex", alignItems: "flex-end", padding: "64px 0" }}>
        <img src="media/headquarters-01.webp" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.55 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,33,63,0.4) 0%, rgba(20,33,63,0.85) 100%)" }} />
        <div className="container" style={{ position: "relative", color: "#fff" }}>
          <Eyebrow><span style={{ color: "rgba(255,255,255,0.6)" }}>Manufacturing &amp; Craft · the differentiator</span></Eyebrow>
          <h1 className="display-xxl" style={{ color: "#fff", margin: "20px 0 28px", maxWidth: "14ch" }}>
            We <em style={{ fontStyle: "italic", color: "var(--green-leaf)" }}>make</em> what we design.
          </h1>
          <p className="lede" style={{ color: "rgba(255,255,255,0.85)", maxWidth: "56ch" }}>
            240,000&nbsp;sq.ft of factory floor inside our 520,000&nbsp;sq.ft Jebel Ali headquarters.
            Joinery, furniture, upholstery and architectural metalwork — every fixed and loose piece
            we draw is built here, by our own craftsmen.
          </p>
        </div>
      </section>

      {/* Stats */}
      {showFactoryStats && (
        <section style={{ background: "var(--paper-2)" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: 0 }}>
              {[
                { v: "240,000", l: "Sq.ft factory" },
                { v: "520,000", l: "Sq.ft HQ" },
                { v: "1976", l: "Built in-house since" },
                { v: "ISO 9001", l: "Quality system" },
              ].map((s, i) => (
                <div key={i} style={{ padding: "40px 32px", borderRight: i < 3 ? "1px solid var(--line)" : 0 }}>
                  <div className="stat-val" style={{ color: "var(--ink)" }}>{s.v}</div>
                  <div className="stat-lbl">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Why in-house */}
      <section className="section-lg">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 96, alignItems: "center" }}>
            <div>
              <Eyebrow n="01">Why in-house</Eyebrow>
              <h2 className="display-l" style={{ margin: "20px 0 24px" }}>
                The same hand from the first concept board to the final hand-rubbed lacquer.
              </h2>
              <p className="lede" style={{ marginBottom: 20 }}>
                Most fit-out houses draw the work and sub-contract the build. We do both.
                A designer can walk twenty paces from the drawing table to a full-scale mock-up
                in the machine hall, and see the piece they specified being made.
              </p>
              <p className="lede">
                It collapses the feedback loop, removes a layer of supplier risk, and means
                we own the quality of what we deliver from sketch through to commissioning.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="img-wrap" style={{ aspectRatio: "3/4" }}>
                <img src="media/home-service-design.webp" alt="" />
              </div>
              <div className="img-wrap" style={{ aspectRatio: "3/4", marginTop: 48 }}>
                <img src="media/home-service-contracting.webp" alt="" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Four disciplines */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Four disciplines under one roof"
            eyebrowN="02"
            title="Joinery. Furniture. Upholstery. Metalwork."
            lede="The four trades that make an interior — combined into a single factory floor and a single craft team."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
            {disciplines.map(d => (
              <div key={d.n} className="card" style={{ padding: 36 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                  <span className="mono" style={{ color: "var(--brass)" }}>{d.n}</span>
                  <h3 className="display-m" style={{ margin: 0 }}>{d.name}</h3>
                </div>
                <p style={{ marginTop: 14, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6 }}>{d.blurb}</p>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                  <span className="mono" style={{ color: "var(--graphite)" }}>{d.tag}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process bar */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="The process" eyebrowN="03" title="From brief to handover, on one contract." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
            {[
              { n: "01", t: "Brief", d: "First conversation; site visit; programme; budget envelope." },
              { n: "02", t: "Design", d: "Schematic, detailed design, material boards, value engineering." },
              { n: "03", t: "Manufacture", d: "Shop drawings, mock-ups, production at Jebel Ali. Visit any time." },
              { n: "04", t: "Install", d: "Site team, MEP coordination, snagging, commissioning." },
              { n: "05", t: "Handover", d: "Operator/owner sign-off, after-care, warranty programme." },
            ].map((s, i, arr) => (
              <div key={s.n} style={{ padding: "32px 24px", borderRight: i < arr.length - 1 ? "1px solid var(--line)" : 0, borderBottom: "1px solid var(--ink)" }}>
                <div className="mono" style={{ color: "var(--brass)" }}>{s.n}</div>
                <div className="display-m" style={{ margin: "10px 0 12px", fontSize: 24 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: "var(--graphite)", lineHeight: 1.5 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Big image */}
      <section style={{ padding: "0" }}>
        <div className="img-wrap" style={{ aspectRatio: "21/9" }}>
          <img src="media/headquarters-03.webp" alt="The Jebel Ali HQ" />
        </div>
        <div className="container" style={{ marginTop: 16 }}>
          <div className="credit">JEBEL ALI HEADQUARTERS · DUBAI · A 520,000 SQ.FT CAMPUS SHARED WITH SISTER BRAND GLYI</div>
        </div>
      </section>

      {/* Placeholder for real workshop photography */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <div>
              <Eyebrow n="04">Visit the factory</Eyebrow>
              <h2 className="display-l" style={{ margin: "20px 0 20px", maxWidth: "16ch" }}>
                See your project in production.
              </h2>
              <p className="lede" style={{ marginBottom: 32 }}>
                We invite every client to visit the shop floor at least once during the
                build — to see the mock-ups, sign off the veneer match, and meet the
                craftsmen building the work. Brief us first; we'll arrange access.
              </p>
              <button className="btn btn-solid" onClick={() => setRoute({ page: "contact" })}>
                Arrange a factory visit &nbsp;→
              </button>
            </div>
            <div style={{
              aspectRatio: "4/3",
              background: "repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 14px)",
              border: "1px solid var(--line-2)",
              display: "flex", alignItems: "center", justifyContent: "center",
              textAlign: "center", padding: 40,
            }}>
              <div>
                <div className="mono" style={{ color: "var(--graphite)" }}>PLACEHOLDER</div>
                <div style={{ marginTop: 12, fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink-2)" }}>
                  Real shop-floor photography
                </div>
                <div className="small" style={{ marginTop: 8 }}>
                  Awaiting hi-res workshop / craftsmen-at-work set from the studio.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ManufacturingPage });