/* global React, PageIntro, useViewport, EnquiryBlock */
const { useState: useStateDC, useRef: useRefDC, useEffect: useEffectDC } = React;

/* ------------------------------------------------------------------ */
/* DesignCapabilities                                                  */
/*                                                                    */
/* The A&D collaboration story — the category claim Derlot genuinely  */
/* owns and no competitor in the set leads with.                      */
/*                                                                    */
/* SEO target queries (per the retrofit brief):                       */
/*   · modular airport seating                                        */
/*   · bespoke contract furniture                                     */
/*   · custom airport seating                                         */
/*   · architect-led furniture specification                          */
/*                                                                    */
/* Page structure:                                                    */
/*  01 PageIntro — the positioning sentence                           */
/*  02 Claim slab — "Working alongside architects" — large image +    */
/*     editorial paragraph, anchored by a named-architect quote       */
/*  03 Process — five stages from brief to aftercare, numbered,       */
/*     with what the studio delivers at each stage                    */
/*  04 Where we lead — four disciplines under one roof                */
/*  05 Track record — named A&D firms we've partnered with            */
/*  06 Case study — Adelaide / Woods Bagot as the template example   */
/*  07 Specifier FAQ — five real procurement questions, answered      */
/*  08 Related reading — cross-links to /circular-economy + /about   */
/*  09 EnquiryBlock                                                   */
/* ------------------------------------------------------------------ */

/* --- Numbered process stage ---------------------------------------- */
function ProcessStage({ no, title, body, deliverables }) {
  const vw = useViewport();
  const isMobile = vw < 900;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "minmax(60px, 80px) minmax(0, 1fr) minmax(0, 1.3fr)",
      gap: isMobile ? 14 : 48,
      padding: isMobile ? "28px 0" : "40px 0",
      borderTop: "0.5px solid rgba(26,25,23,0.18)",
      alignItems: "baseline",
    }}>
      <div style={{
        fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)",
        fontSize: 12, letterSpacing: "0.14em",
        color: "#6c6862", fontWeight: 500,
      }}>
        {no}
      </div>
      <h3 style={{
        fontWeight: 500,
        fontSize: isMobile ? "clamp(20px, 5vw, 24px)" : "clamp(22px, 1.9vw, 28px)",
        lineHeight: 1.15, letterSpacing: "-0.015em",
        color: "#1a1917",
        margin: 0, maxWidth: "18ch",
      }}>
        {title}
      </h3>
      <div>
        <p style={{
          fontSize: isMobile ? 14.5 : 15,
          lineHeight: 1.65, color: "#1a1917",
          margin: "0 0 18px 0", maxWidth: "52ch",
          fontWeight: 400,
        }}>
          {body}
        </p>
        {deliverables && deliverables.length > 0 && (
          <div style={{
            fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, marginBottom: 8,
          }}>
            Studio delivers
          </div>
        )}
        {deliverables && (
          <ul style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "flex", flexWrap: "wrap", gap: "8px 16px",
          }}>
            {deliverables.map((d, i) => (
              <li key={i} style={{
                fontSize: 13, color: "#3a3833",
                borderLeft: "0.5px solid rgba(26,25,23,0.25)",
                paddingLeft: 10,
              }}>{d}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

/* --- Discipline card ----------------------------------------------- */
function DisciplineCard({ no, title, body }) {
  const vw = useViewport();
  const isMobile = vw < 900;
  return (
    <div style={{
      padding: isMobile ? "28px 0" : 0,
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 14 }}>
        <div style={{
          fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)",
          fontSize: 11, color: "#6c6862", fontWeight: 500,
          letterSpacing: "0.1em",
        }}>
          {no}
        </div>
        <div style={{ height: "0.5px", flex: 1, background: "rgba(26,25,23,0.22)" }} />
      </div>
      <h3 style={{
        fontWeight: 500,
        fontSize: isMobile ? 20 : 22,
        lineHeight: 1.18, letterSpacing: "-0.01em",
        color: "#1a1917", margin: "0 0 12px 0",
      }}>
        {title}
      </h3>
      <p style={{
        fontSize: 14, lineHeight: 1.62,
        color: "#6c6862", margin: 0, maxWidth: "38ch",
      }}>
        {body}
      </p>
    </div>
  );
}

/* --- FAQ disclosure ------------------------------------------------ */
function FaqItem({ q, a, open, onToggle }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  return (
    <div style={{ borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={open}
        style={{
          width: "100%", background: "transparent", border: 0,
          padding: isMobile ? "22px 0" : "28px 0",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, cursor: "pointer", fontFamily: "inherit",
          textAlign: "left",
        }}
      >
        <span style={{
          fontWeight: 500,
          fontSize: isMobile ? 16 : 18,
          lineHeight: 1.3, letterSpacing: "-0.01em",
          color: "#1a1917", flex: 1,
        }}>
          {q}
        </span>
        <span style={{
          width: 28, height: 28,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          border: "0.5px solid rgba(26,25,23,0.35)",
          color: "#1a1917", fontSize: 16, fontWeight: 300,
          flexShrink: 0,
          transition: "transform 220ms cubic-bezier(0.2,0.6,0.2,1)",
          transform: open ? "rotate(45deg)" : "rotate(0deg)",
        }}>
          +
        </span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0,
        overflow: "hidden",
        transition: "max-height 320ms cubic-bezier(0.2,0.6,0.2,1), padding-bottom 320ms cubic-bezier(0.2,0.6,0.2,1)",
        paddingBottom: open ? (isMobile ? 22 : 28) : 0,
      }}>
        <p style={{
          fontSize: isMobile ? 14.5 : 15,
          lineHeight: 1.65, color: "#3a3833",
          margin: 0, maxWidth: "60ch",
        }}>
          {a}
        </p>
      </div>
    </div>
  );
}

/* --- DesignCapabilities -------------------------------------------- */
function DesignCapabilities({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 900;
  const [openFaq, setOpenFaq] = useStateDC(0);

  return (
    <>
      <PageIntro
        eyebrow="Design Capabilities"
        title="A design studio and furniture brand, working alongside architects from brief to install."
        body="Derlot is a boutique studio delivering modular, configurable and bespoke contract furniture for airports, civic spaces, workplaces and cultural buildings. We work with architectural practices as co-designers — shaping specification around a brief, not around a catalogue."
      />

      {/* Claim slab — full-bleed image + anchored quote */}
      <section style={{
        padding: isMobile ? "0 20px 80px" : "0 max(32px, 4vw) 120px",
        maxWidth: 1600, margin: "0 auto",
      }}>
        <div style={{
          aspectRatio: isMobile ? "4/5" : "16/9",
          background: "#e4e2da",
          overflow: "hidden",
          position: "relative",
        }}>
          <img
            src="images/about/collaboration/airport-vision-hero.jpg"
            alt="Derlot's airport vision — Gateway gate-lounge concept."
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
          <div style={{
            position: "absolute", left: isMobile ? 20 : 32, bottom: isMobile ? 20 : 32,
            fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "rgba(245,243,239,0.82)", fontWeight: 500,
            textShadow: "0 1px 4px rgba(0,0,0,0.4)",
          }}>
            Derlot's airport vision
          </div>
        </div>

        {/* Editorial paragraph + pull-quote */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 5fr) minmax(0, 6fr)",
          gap: isMobile ? 32 : 72,
          marginTop: isMobile ? 40 : 72,
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 16 }}>
              How we work
            </div>
            <h2 style={{
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(24px, 6vw, 32px)" : "clamp(28px, 2.6vw, 40px)",
              lineHeight: 1.1, letterSpacing: "-0.02em",
              color: "#1a1917", margin: 0, maxWidth: "18ch",
              textWrap: "balance",
            }}>
              Every project starts with a conversation, not a quote.
            </h2>
          </div>

          <div>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#1a1917", margin: "0 0 20px 0", fontWeight: 400 }}>
              We operate as a studio first and a furniture brand second. That means our starting point is the architectural brief — the building, the flow of people through it, the lighting plan, the acoustic problem, the maintenance window, the lifecycle target. Our collections exist because those briefs keep asking for the same underlying capabilities: modularity, replaceable components, integrated power, Australian manufacture where it matters, and a finish that looks considered thirty years in.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#6c6862", margin: "0 0 32px 0", fontWeight: 400 }}>
              When the catalogue answers the brief, we specify from it. When it doesn't, we co-design with the architect — bespoke beams, custom geometry, fully integrated millwork, brand and wayfinding worked through the same hands. The team that sketches the first detail is the team that signs off the install.
            </p>

            {/* Named quote — placeholder attribution, flagged for replacement */}
            <blockquote style={{
              margin: 0,
              padding: isMobile ? "20px 0 0" : "24px 0 0",
              borderTop: "0.5px solid rgba(26,25,23,0.25)",
            }}>
              <p style={{
                fontWeight: 500,
                fontSize: isMobile ? 18 : 22,
                lineHeight: 1.32, letterSpacing: "-0.01em",
                color: "#1a1917", margin: "0 0 18px 0",
                textWrap: "balance", maxWidth: "28ch",
              }}>
                "They came to the table as co-designers. Not as a vendor trying to fit an existing product into our plan."
              </p>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>
                Rosina Di Maria · Director, Woods Bagot · Adelaide Airport
              </div>
            </blockquote>
          </div>
        </div>
      </section>

      {/* Process — five stages */}
      <section style={{
        padding: isMobile ? "64px 20px 40px" : "120px max(32px, 4vw) 80px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 56 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
            The process
          </div>
          <h2 style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(26px, 2.6vw, 38px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: 0, maxWidth: "26ch",
            textWrap: "balance",
          }}>
            Five stages from first brief to aftercare.
          </h2>
        </div>

        <div>
          <ProcessStage
            no="01"
            title="Brief and discovery."
            body="We meet the architect, operator and — wherever possible — the people who will live with the furniture. The studio walks the site, reviews the drawings, and tests the brief against how the space will actually be used, the operational rhythm, sustainability commitments and the specification budget."
            deliverables={["Site visit", "Brief review", "Precedent pack", "Initial feasibility"]}
          />
          <ProcessStage
            no="02"
            title="Concept and schematic."
            body="Sketch development in parallel with the architect's schematic design. Where the catalogue answers the brief we propose specifications. Where it doesn't, our industrial designers develop bespoke geometry, with materials and detail language agreed collaboratively."
            deliverables={["Concept renders", "Materials palette", "Configuration options", "Costed variants"]}
          />
          <ProcessStage
            no="03"
            title="Design development."
            body="Full technical specification: CAD, BIM, dimensioned drawings, upholstery and finish selection, power and data integration, fire and accessibility compliance. The studio coordinates with interior, M&E and structural teams as a single design partner."
            deliverables={["Revit / CAD files", "Data sheets", "Compliance documentation", "Prototype approvals"]}
          />
          <ProcessStage
            no="04"
            title="Manufacture and install."
            body="Production on demand across our Brisbane, Mexico, Italy and Poland manufacturing partners — the piece is made in the geography that best serves the project. Our install team commissions on site, with the design lead present for sign-off."
            deliverables={["Manufacturing schedule", "Freight coordination", "On-site installation", "Handover walkthrough"]}
          />
          <ProcessStage
            no="05"
            title="Aftercare and lifecycle."
            body="A minimum five-year structural warranty across the catalogue, with collections specified for long service life. Replaceable components mean the building's investment extends well past the initial install."
            deliverables={["Structural warranty", "Care and maintenance pack", "Parts replacement", "Refresh and refit"]}
          />
        </div>
      </section>

      {/* Where we lead — four disciplines */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 32 : 56 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
            Disciplines under one roof
          </div>
          <h2 style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(26px, 2.6vw, 38px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: 0, maxWidth: "26ch",
            textWrap: "balance",
          }}>
            Industrial, interior, brand and graphic — worked together.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)",
          gap: isMobile ? 0 : 48,
        }}>
          <DisciplineCard
            no="01"
            title="Industrial design"
            body="Modular systems, beam seating, task and soft lounge, occasional pieces. The studio engineers for public-space durability — structural, finish, serviceable."
          />
          <DisciplineCard
            no="02"
            title="Interior design"
            body="Full space planning for airport lounges, civic foyers, workplace floors and cultural interiors. We plan to the furniture we'll specify, then refine the furniture to the plan."
          />
          <DisciplineCard
            no="03"
            title="Brand and identity"
            body="Tenant branding, wayfinding systems, installation signage. Frequently delivered inside the same commission as the furniture, by the same design lead."
          />
          <DisciplineCard
            no="04"
            title="Bespoke commissions"
            body="One-off collectible pieces, custom joinery, installations at architectural scale. Where the project needs something that doesn't yet exist, the studio designs and makes it."
          />
        </div>
      </section>

      {/* Track record — named A&D firms */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 24 : 40 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
            Partners
          </div>
          <h2 style={{
            fontWeight: 500,
            fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: 0, maxWidth: "28ch",
          }}>
            Architectural practices we've worked alongside.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)",
          columnGap: isMobile ? 24 : 40,
          rowGap: 0,
        }}>
          {[
            "Woods Bagot", "Gensler", "Bates Smart", "BIG",
            "SOM", "Snøhetta", "Hassell", "BVN",
            "Cox Architecture", "Blight Rayner", "Corgan", "Yazdani Studio",
            "Studio Spillane", "SJB", "ThomsonAdsett", "Architectus",
            "Conrad Gargett", "Jackson Clements Burrows",
          ].map((firm) => (
            <div key={firm} style={{
              padding: isMobile ? "20px 0" : "24px 0",
              borderTop: "0.5px solid rgba(26,25,23,0.18)",
            }}>
              <div style={{
                fontWeight: 500, fontSize: isMobile ? 14 : 15,
                color: "#1a1917", lineHeight: 1.3,
              }}>
                {firm}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: isMobile ? 18 : 26,
          fontSize: 12.5, letterSpacing: "0.03em",
          color: "#6c6862", fontStyle: "italic",
        }}>
          … to name a few.
        </div>
      </section>

      {/* Case study — Adelaide / Woods Bagot */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
          Case study
        </div>
        <h2 style={{
          fontFamily: "var(--font-display, Poppins, sans-serif)",
          fontWeight: 500,
          fontSize: isMobile ? "clamp(24px, 6vw, 32px)" : "clamp(28px, 2.8vw, 42px)",
          lineHeight: 1.1, letterSpacing: "-0.02em",
          color: "#1a1917", margin: "0 0 40px 0", maxWidth: "24ch",
          textWrap: "balance",
        }}>
          Designing Adelaide Airport's gate lounges with Woods Bagot.
        </h2>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 7fr) minmax(0, 5fr)",
          gap: isMobile ? 32 : 72,
          alignItems: "start",
        }}>
          <div style={{
            aspectRatio: "4/3",
            background: "#e4e2da", overflow: "hidden",
          }}>
            <img
              src="images/about/collaboration/adelaide-lounge.jpg"
              alt="Gateway seating specified at Adelaide Airport with Woods Bagot."
              loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          </div>
          <div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 0,
              marginBottom: 28,
            }}>
              {[
                ["Architect", "Woods Bagot"],
                ["Collection", "Gateway"],
                ["Year", "2024"],
                ["Sector", "Aviation"],
              ].map(([k, v]) => (
                <div key={k} style={{
                  padding: "14px 0",
                  borderTop: "0.5px solid rgba(26,25,23,0.18)",
                }}>
                  <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 4 }}>{k}</div>
                  <div style={{ fontSize: 14, color: "#1a1917" }}>{v}</div>
                </div>
              ))}
            </div>

            <p style={{ fontSize: isMobile ? 15 : 15.5, lineHeight: 1.65, color: "#1a1917", margin: "0 0 16px 0", fontWeight: 400 }}>
              Adelaide Airport briefed a gate lounge refresh that had to absorb rising passenger volumes without expanding the footprint — more seats per square metre, integrated power at most positions, and a look that didn't feel like a transit corridor.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 15.5, lineHeight: 1.65, color: "#6c6862", margin: "0 0 16px 0", fontWeight: 400 }}>
              Our studio worked with Woods Bagot's interior team from schematic through to handover. Gateway was co-developed against the airport's plan — linear and curved runs up to 9800mm, Wheelchair Zones specified at every gate cluster, GPO + USB-C in every third module. The upholstery palette was tuned to Woods Bagot's material board and a custom stitching detail was developed for the project.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 15.5, lineHeight: 1.65, color: "#6c6862", margin: "0 0 24px 0", fontWeight: 400 }}>
              Seats were manufactured in Brisbane and commissioned on site over a phased fit-out schedule. The replaceable-module design means individual seats have already been refreshed without interrupting operations — the long-cycle logic the airport specified for.
            </p>

            <a
              onClick={() => setScreen("projects")}
              style={{
                display: "inline-block",
                fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                color: "#1a1917", borderBottom: "0.5px solid #1a1917",
                paddingBottom: 3, fontWeight: 500, cursor: "pointer",
              }}
            >
              Read the project →
            </a>
          </div>
        </div>
      </section>

      {/* Specifier FAQ */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 4fr) minmax(0, 7fr)",
          gap: isMobile ? 28 : 72,
          alignItems: "start",
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
              Specifier FAQ
            </div>
            <h2 style={{
              fontWeight: 500,
              fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)",
              lineHeight: 1.12, letterSpacing: "-0.015em",
              color: "#1a1917", margin: 0, maxWidth: "20ch",
              textWrap: "balance",
            }}>
              Five questions architects ask us before specifying.
            </h2>
          </div>
          <div>
            {[
              {
                q: "How early do you come into a project?",
                a: "As early as schematic design, ideally. The catalogue works as a specification tool, but the most successful projects — Adelaide, DFW, Cairns — are ones where our industrial designers sat in the architect's studio from the first concept. We scope engagement to the project size: a single-piece specification might take a week; a full airport terminal is a twelve-to-eighteen-month collaboration.",
              },
              {
                q: "What's actually customisable?",
                a: "Geometry, dimensions, upholstery, finish, power integration, stitching detail, bracketry, bespoke armrests and tables. Our beam seating is designed modular so custom runs are a matter of engineering the brief, not re-engineering the product. For genuinely bespoke pieces, our industrial design team develops new designs inside the commission.",
              },
              {
                q: "Where is it manufactured, and how does that affect lead time?",
                a: "Brisbane, Melbourne, Mexico, Italy and Poland, depending on the piece and the destination. Production on demand typically runs eight to fourteen weeks from confirmed order to freight. For large Australian projects we manufacture locally; for North America we produce in Mexico; for European projects in Italy or Poland. The choice is driven by carbon logic and freight practicality, not marketing.",
              },
              {
                q: "What compliance and certification do you hold?",
                a: "Fire, environmental and accessibility certification per the jurisdiction and collection. Data sheets are maintained per-product with current test results. We can supply certification packs against specific tender requirements on request — the studio has assembled these for Australian, North American and EU compliance frames.",
              },
              {
                q: "What happens when a seat wears out in ten years?",
                a: "Every collection is designed with replaceable modules and published parts lists. Structurally, the warranty is a minimum five years; functionally, pieces are specified for long service life. Individual upholstered modules can be refreshed without removing the frame. When a piece reaches genuine end-of-life, our Renew programme covers take-back and material recovery.",
              },
            ].map((item, i) => (
              <FaqItem
                key={i}
                q={item.q}
                a={item.a}
                open={openFaq === i}
                onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
              />
            ))}
            <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)" }} />
          </div>
        </div>
      </section>

      {/* Related reading — cross-links */}
      <section style={{
        padding: isMobile ? "48px 20px 96px" : "72px max(32px, 4vw) 140px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 24 : 32 }}>
          Related reading
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 24 : 32,
        }}>
          {[
            { label: "About Derlot",       body: "Studio principles, leadership, team.",                  onClick: () => setScreen("about"),        emph: false },
            { label: "Circularity",        body: "Material sourcing, recycled content, end-of-life take-back.", onClick: () => setScreen("circular-economy"), emph: true  },
            { label: "Gateway collection", body: "The modular beam system developed with Woods Bagot.",   onClick: () => setScreen("gateway"),      emph: false },
          ].map((c) => (
            <a
              key={c.label}
              onClick={c.onClick}
              style={{
                cursor: "pointer",
                borderTop: "0.5px solid rgba(26,25,23,0.25)",
                paddingTop: 20, paddingBottom: 20,
                display: "flex", alignItems: "baseline", justifyContent: "space-between",
                gap: 16,
              }}
            >
              <div>
                <div style={{
                  fontSize: isMobile ? 17 : 18,
                  fontWeight: 500, color: "#1a1917",
                  letterSpacing: "-0.01em", marginBottom: 6,
                }}>
                  {c.label}
                </div>
                <div style={{ fontSize: 13, color: "#6c6862", lineHeight: 1.45 }}>
                  {c.body}
                </div>
              </div>
              <div style={{ fontSize: 18, color: "#1a1917" }}>→</div>
            </a>
          ))}
        </div>
      </section>

      <EnquiryBlock collection="Studio" />
    </>
  );
}

window.DesignCapabilities = DesignCapabilities;
