/* global React, PageIntro, AboutIntroWithMap, useViewport, EnquiryBlock */
const { useState: useStateA, useRef: useRefA, useEffect: useEffectA } = React;

/* CoverCarousel — auto-crossfading image stack for editorial cards.
   pointer-events:none on the whole stack so a parent <a> stays clickable. */
function CoverCarousel({ images, alt }) {
  const [i, setI] = useStateA(0);
  useEffectA(() => {
    if (!images || images.length < 2) return;
    const t = setInterval(() => setI((p) => (p + 1) % images.length), 4200);
    return () => clearInterval(t);
  }, [images && images.length]);
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", pointerEvents: "none" }}>
      {(images || []).map((src, idx) => (
        <img
          key={src}
          src={src} srcSet={window.IMG && window.IMG.srcsetFor(src)} sizes={window.IMG && window.IMG.sizes()}
          alt={alt}
          loading="lazy"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%", objectFit: "cover", display: "block",
            opacity: idx === i ? 1 : 0,
            transition: "opacity 900ms ease",
          }}
        />
      ))}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 14, display: "flex", gap: 6, justifyContent: "center" }}>
        {(images || []).map((_, idx) => (
          <span key={idx} style={{
            width: 7, height: 7,
            background: idx === i ? "#ffffff" : "rgba(255,255,255,0.45)",
            boxShadow: "0 0 2px rgba(0,0,0,0.35)",
            transition: "background 300ms ease",
          }} />
        ))}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* About                                                               */
/*                                                                    */
/* Editorial company page. Opens with a centered PageIntro, then a    */
/* 16:9 video that becomes active on click (YouTube facade — lightweight */
/* thumbnail first, iframe only after user engages).                  */
/*                                                                    */
/* Structure:                                                         */
/*  01 Intro (PageIntro)                                              */
/*  02 Film (interview with Alexander Lotersztain)                    */
/*  03 Three themed slabs: Collaboration / Responsibility / Longevity */
/*     — alternating image/copy rhythm                                */
/*  04 Leadership — Alexander large portrait                          */
/*  05 Team — Martin / Sussan / Ulrick                                */
/*  06 Enquiry block (shared)                                         */
/* ------------------------------------------------------------------ */

/* --- YouTube facade: lightweight until clicked -------------------- */
function VideoFilm({ videoId, title }) {
  const [playing, setPlaying] = useStateA(false);
  const vw = useViewport();
  const isMobile = vw < 760;

  return (
    <section style={{
      padding: isMobile ? "0 20px 80px" : "0 max(32px, 4vw) 120px",
      maxWidth: 1600, margin: "0 auto",
    }}>
      <div style={{
        position: "relative",
        aspectRatio: "16/9",
        background: "#1a1917",
        overflow: "hidden",
        cursor: playing ? "default" : "pointer",
      }}
        onClick={() => !playing && setPlaying(true)}
        role={playing ? undefined : "button"}
        aria-label={playing ? undefined : `Play ${title}`}
      >
        {!playing && (
          <>
            <img
              src={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
              alt=""
              loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", opacity: 0.82 }}
              onError={(e) => { e.currentTarget.src = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`; }}
            />
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%)",
            }} />
            {/* Play affordance */}
            <div style={{
              position: "absolute", top: "50%", left: "50%",
              transform: "translate(-50%, -50%)",
              width: isMobile ? 72 : 96,
              height: isMobile ? 72 : 96,
              borderRadius: "50%",
              border: "0.5px solid rgba(245,243,239,0.85)",
              display: "flex", alignItems: "center", justifyContent: "center",
              background: "rgba(26,25,23,0.22)",
              backdropFilter: "blur(2px)",
              transition: "background 200ms ease, transform 300ms cubic-bezier(0.2,0.6,0.2,1)",
            }}>
              <svg width={isMobile ? 20 : 26} height={isMobile ? 20 : 26} viewBox="0 0 24 24" fill="#f5f3ef">
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>
            {/* Caption */}
            <div style={{
              position: "absolute", left: isMobile ? 20 : 32, bottom: isMobile ? 20 : 32,
              color: "#f5f3ef",
            }}>
              <div style={{
                fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
                fontWeight: 500, opacity: 0.75, marginBottom: 8,
              }}>
                Film · 12:47
              </div>
              <div style={{
                fontSize: isMobile ? 16 : 20,
                fontWeight: 500, letterSpacing: "-0.01em",
                maxWidth: "32ch",
              }}>
                {title}
              </div>
            </div>
          </>
        )}
        {playing && (
          <iframe
            src={`https://www.youtube.com/embed/${videoId}?rel=0&autoplay=1`}
            title={title}
            frameBorder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
          />
        )}
      </div>
    </section>
  );
}

/* --- Editorial themed slab ---------------------------------------- */
function AboutSlab({ no, kicker, title, body, image, images, imageAlt, caption, reverse = false }) {
  const vw = useViewport();
  const isMobile = vw < 900;

  // Normalise to an array. Each item can be a string (src) or { src, alt }.
  const slides = React.useMemo(() => {
    const raw = images && images.length ? images : (image ? [image] : []);
    return raw.map((s) => (typeof s === "string" ? { src: s, alt: imageAlt || "" } : s));
  }, [images, image, imageAlt]);

  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  // Auto-advance every ~6s when >1 slide
  React.useEffect(() => {
    if (slides.length < 2 || paused) return;
    const id = setInterval(() => setIndex((i) => (i + 1) % slides.length), 6000);
    return () => clearInterval(id);
  }, [slides.length, paused]);

  const columns = reverse
    ? (isMobile ? "1fr" : "minmax(0, 5fr) minmax(0, 6fr)")   // text left, image right
    : (isMobile ? "1fr" : "minmax(0, 6fr) minmax(0, 5fr)");  // image left, text right

  const order = (n) => (isMobile ? undefined : n);

  const ImageBlock = (
    <div
      style={{
        order: order(reverse ? 2 : 1),
        aspectRatio: isMobile ? "4/3" : "auto",
        minHeight: isMobile ? "auto" : 560,
        background: "#e4e2da",
        position: "relative",
        overflow: "hidden",
      }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {slides.map((s, i) => (
        <img
          key={i}
          src={s.src} srcSet={window.IMG && window.IMG.srcsetFor(s.src)} sizes={window.IMG && window.IMG.sizes()}
          alt={s.alt || ""}
          loading={i === 0 ? "eager" : "lazy"}
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover", display: "block",
            opacity: i === index ? 1 : 0,
            transition: "opacity 900ms ease",
          }}
        />
      ))}

      {caption && (
        <div style={{
          position: "absolute", left: 16, bottom: 14,
          fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "rgba(245,243,239,0.82)", fontWeight: 500,
          textShadow: "0 1px 4px rgba(0,0,0,0.4)",
          zIndex: 2,
        }}>
          {caption}
        </div>
      )}

      {slides.length > 1 && (
        <div style={{
          position: "absolute", right: 16, bottom: 14,
          display: "flex", gap: 10, alignItems: "center",
          zIndex: 2,
        }}>
          {slides.map((_, i) => (
            <button
              key={i}
              type="button"
              onClick={() => setIndex(i)}
              aria-label={`Show image ${i + 1} of ${slides.length}`}
              style={{
                appearance: "none", border: 0, padding: 0, cursor: "pointer",
                width: 22, height: 18,
                background: "transparent",
                fontSize: 10, letterSpacing: "0.16em",
                color: i === index ? "#f5f3ef" : "rgba(245,243,239,0.55)",
                fontWeight: 500,
                fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)",
                textShadow: "0 1px 4px rgba(0,0,0,0.4)",
                transition: "color 250ms ease",
              }}
            >
              {String(i + 1).padStart(2, "0")}
            </button>
          ))}
        </div>
      )}
    </div>
  );

  const CopyBlock = (
    <div style={{
      order: order(reverse ? 1 : 2),
      padding: isMobile ? "28px 0 0" : "56px 0",
      alignSelf: "center",
      maxWidth: 540,
      justifySelf: reverse ? (isMobile ? "start" : "end") : "start",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 18 }}>
        <div style={{
          fontSize: 10, letterSpacing: "0.22em", color: "#6c6862",
          fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)",
          fontWeight: 500,
        }}>
          {no}
        </div>
        <div style={{
          fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500,
        }}>
          {kicker}
        </div>
      </div>
      <h2 style={{
        fontWeight: 500,
        fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 34px)",
        lineHeight: 1.12,
        letterSpacing: "-0.02em",
        color: "#1a1917",
        margin: "0 0 22px 0",
        maxWidth: "20ch",
      }}>
        {title}
      </h2>
      <div style={{
        fontSize: isMobile ? 14.5 : 15,
        lineHeight: 1.65,
        color: "#1a1917",
        fontWeight: 400,
        maxWidth: "52ch",
      }}>
        {body}
      </div>
    </div>
  );

  return (
    <section style={{
      padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
      maxWidth: 1440,
      margin: "0 auto",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: columns,
        gap: isMobile ? 0 : 64,
        alignItems: "stretch",
      }}>
        {ImageBlock}
        {CopyBlock}
      </div>
    </section>
  );
}

/* --- Portrait card (editorial, initial-monogram fallback) --------- */
function PortraitCard({ name, role, body, email, size = "large", monogramTone = "#c9b896", image }) {
  const vw = useViewport();
  const isMobile = vw < 900;
  const initials = name.split(" ").map(n => n[0]).join("").slice(0, 2);
  const portraitWidth = size === "large"
    ? (isMobile ? "100%" : "minmax(260px, 420px)")
    : (isMobile ? "100%" : 260);

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : `${portraitWidth} minmax(0, 1fr)`,
      gap: isMobile ? 24 : 48,
      alignItems: "start",
    }}>
      {/* Portrait tile — real photo if provided, otherwise editorial initial monogram */}
      <div style={{
        aspectRatio: size === "large" ? "4/5" : "1/1.2",
        background: image ? "#e4e2da" : monogramTone,
        position: "relative",
        overflow: "hidden",
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "flex-start",
        padding: image ? 0 : 20,
      }}>
        {image ? (
          <img
            src={image} srcSet={window.IMG && window.IMG.srcsetFor(image)} sizes={window.IMG && window.IMG.sizes()}
            alt={name}
            loading="lazy"
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%", objectFit: "cover",
              objectPosition: "center top",
              display: "block", filter: "grayscale(1)",
            }}
          />
        ) : (
          <>
            <div style={{
              position: "absolute", top: "50%", left: "50%",
              transform: "translate(-50%, -50%)",
              fontWeight: 300,
              fontSize: size === "large" ? "clamp(64px, 10vw, 128px)" : "clamp(52px, 7vw, 84px)",
              color: "rgba(26,25,23,0.25)",
              letterSpacing: "-0.04em",
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              lineHeight: 1,
            }}>
              {initials}
            </div>
            <div style={{
              fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "rgba(26,25,23,0.65)", fontWeight: 500,
            }}>
              Portrait
            </div>
          </>
        )}
      </div>

      {/* Copy */}
      <div style={{ paddingTop: isMobile ? 0 : 4 }}>
        <h3 style={{
          fontWeight: 500,
          fontSize: size === "large"
            ? (isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)")
            : (isMobile ? 22 : 24),
          lineHeight: 1.1,
          letterSpacing: "-0.015em",
          color: "#1a1917",
          margin: "0 0 6px 0",
        }}>
          {name}
        </h3>
        <div style={{
          fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: 20,
        }}>
          {role}
        </div>
        <div style={{
          fontSize: size === "large" ? 15 : 14,
          lineHeight: 1.65,
          color: "#1a1917",
          fontWeight: 400,
          maxWidth: size === "large" ? "58ch" : "48ch",
        }}>
          {body}
        </div>
        {email && (
          <div style={{ marginTop: 22 }}>
            <a href={`mailto:${email}`} style={{
              fontSize: 13, color: "#1a1917",
              textDecoration: "none",
              borderBottom: "0.5px solid rgba(26,25,23,0.35)",
              paddingBottom: 2,
              letterSpacing: "0.01em",
            }}>
              {email}
            </a>
          </div>
        )}
      </div>
    </div>
  );
}

/* --- About page --------------------------------------------------- */
function About({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <>
      <AboutIntroWithMap />

      {/* Secondary header — cross-links to Collaboration & Circularity */}
      {setScreen && (
        <section style={{
          padding: isMobile ? "0 20px 40px" : "0 max(32px, 4vw) 56px",
          maxWidth: 1440, margin: "0 auto",
        }}>
          <div style={{
            borderTop: "0.5px solid rgba(26,25,23,0.18)",
            borderBottom: "0.5px solid rgba(26,25,23,0.18)",
            padding: isMobile ? "20px 0" : "24px 0",
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "auto 1fr 1fr",
            gap: isMobile ? 14 : 32,
            alignItems: "baseline",
          }}>
            <div style={{
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "#6c6862", fontWeight: 500,
              minWidth: isMobile ? 0 : 140,
            }}>
              Also in About
            </div>
            {[
              { key: "design-capabilities", title: "Collaboration", body: "How the studio works alongside architects, from brief to install." },
              { key: "circular-economy",    title: "Circularity",   body: "What we count, where we manufacture, and what we take back." },
            ].map((c) => (
              <a
                key={c.key}
                onClick={() => setScreen(c.key)}
                style={{
                  cursor: "pointer", display: "block",
                  borderTop: isMobile ? "0.5px solid rgba(26,25,23,0.12)" : "none",
                  paddingTop: isMobile ? 14 : 0,
                }}>
                <div style={{
                  display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12,
                  marginBottom: 6,
                }}>
                  <span style={{
                    fontFamily: "var(--font-display, Poppins, sans-serif)",
                    fontSize: isMobile ? 19 : 21, fontWeight: 500,
                    letterSpacing: "-0.01em", color: "#1a1917",
                  }}>{c.title}</span>
                  <span style={{
                    fontSize: 12, color: "#1a1917",
                    borderBottom: "0.5px solid #1a1917", paddingBottom: 2,
                    letterSpacing: "0.04em",
                  }}>Read →</span>
                </div>
                <div style={{ fontSize: 13, color: "#6c6862", lineHeight: 1.5, maxWidth: "44ch" }}>
                  {c.body}
                </div>
              </a>
            ))}
          </div>
        </section>
      )}

      {/* Film */}
      <VideoFilm videoId="fXyyDf89eI8" title="In conversation with Alexander Lotersztain" />

      {/* Three themed slabs */}
      <AboutSlab
        no="01"
        kicker="Collaboration"
        title="Every piece starts with a conversation."
        image="images/about/collaboration/arthur-street-studio.jpg"
        imageAlt="Derlot studio — upholstered seating around a round table, 22 Arthur Street."
        reverse={false}
        body={
          <>
            <p style={{ margin: "0 0 14px 0" }}>
              As a design studio and furniture brand, we bring industrial, interior, brand and graphic design under one roof. From entirely new designs to single pieces, each project begins by listening — to architects, operators and the people who live with the work.
            </p>
            <p style={{ margin: 0, color: "#6c6862" }}>
              Under the direction of founder Alexander Lotersztain, the studio turns ideas into specification: bespoke furniture, custom joinery, full space planning.
            </p>
          </>
        }
      />

      <AboutSlab
        no="02"
        kicker="Responsibility"
        title="Produced on demand, designed to be remade."
        images={[
          { src: "images/_legacy/collections/stump-r.webp", alt: "Stump Recycled · terrazzo-like surface of post-industrial LDPE." },
          { src: "images/_legacy/collections/wombat-offcuts.jpg", alt: "Bundled fabric and foam offcuts in the Derlot warehouse." },
          { src: "images/_legacy/collections/wombat-single.jpg", alt: "The Wombat plush — sewn from upholstery and foam offcuts." },
        ]}
        reverse={true}
        body={
          <>
            <p style={{ margin: "0 0 14px 0" }}>
              We produce on demand, across a network of manufacturers in Australia, North America and Europe — short lead times, responsible distribution, local economies. Certification is a floor, not a ceiling; the studio continually looks for ways to reduce waste and reshape process.
            </p>
            <p style={{ margin: 0, color: "#6c6862" }}>
              The Wombat plush — sewn from fabric and foam offcuts, supporting Australian wildlife charities — sits at one end of this practice. The Renew thread, and collections like Stump Recycled, sit at the other.
            </p>
          </>
        }
      />

      <AboutSlab
        no="03"
        kicker="Longevity"
        title="The best designs are built to stand the test of time."
        image="images/_legacy/collections/mass.webp"
        imageAlt="Mass picnic table in a civic plaza."
        reverse={false}
        body={
          <>
            <p style={{ margin: "0 0 14px 0" }}>
              Every piece is considered for durability first — structural engineering, finish, replaceable components. A minimum five-year structural warranty applies across the catalogue, and collections are specified with long service life in mind.
            </p>
            <p style={{ margin: 0, color: "#6c6862" }}>
              We can't anticipate every eventuality. We can take pride in the timeless quality of the work, and stand behind it.
            </p>
          </>
        }
      />

      {/* Leadership — Alexander */}
      <section style={{
        padding: isMobile ? "64px 20px 40px" : "120px max(32px, 4vw) 72px",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 32 : 56,
        }}>
          Leadership
        </div>
        <PortraitCard
          size="large"
          name="Alexander Lotersztain"
          role="Founder & Global Director"
          image="assets/team/alexander.webp"
          monogramTone="#c9b896"
          body={
            <>
              <p style={{ margin: "0 0 14px 0" }}>
                Alexander brings a boundless curiosity to the practice — across interior design, brand, industrial design and large-scale collectible commissions. Each project is an opportunity for the studio to learn, to push the boundaries of craft, and to ask what good design can offer the people who pass through a space.
              </p>
              <p style={{ margin: "0 0 14px 0" }}>
                Outside the studio he travels constantly, crediting landscape and cultural encounter as the most reliable source of ideas. That restlessness shapes Derlot's direction — an Australian brand with a global posture, rooted in craft but never parochial.
              </p>
              <p style={{ margin: 0, color: "#6c6862" }}>
                Follow his work at{" "}
                <a href="https://www.alexanderlotersztain.com" target="_blank" rel="noreferrer" style={{ color: "#1a1917", textDecoration: "none", borderBottom: "0.5px solid rgba(26,25,23,0.35)" }}>alexanderlotersztain.com</a>.
              </p>
            </>
          }
        />
      </section>

      {/* Team */}
      <section style={{
        padding: isMobile ? "24px 20px 72px" : "48px max(32px, 4vw) 96px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 32 : 56,
        }}>
          Directors
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 56 : 64,
        }}>
          <PortraitCard
            size="small"
            name="Martin Mogilski"
            role="Head of Design"
            email="martin@derlotgroup.com"
            image="assets/team/martin.webp"
            monogramTone="#bfb4a0"
            body="A decade with the studio has made Martin part of its creative DNA. He manages the Design Team and every project that passes through it — from civic programmes to private commissions — with a purist's patience for detail and a quiet insistence on the right solution."
          />
          <PortraitCard
            size="small"
            name="Sussan Deilami"
            role="Brand & Sales Director · North America"
            email="sussan@derlotgroup.com"
            image="assets/team/sussan.webp"
            monogramTone="#b8a890"
            body="Sussan leads Derlot across the North American market. Trained at USC in interior design and business, with further study in Paris, she has extended the studio's collaborative ethos into major airport and education projects in the United States."
          />
          <PortraitCard
            size="small"
            name="Ulrick Nielsen"
            role="Brand & Sales Director · Europe"
            email="ulrick@derlotgroup.com"
            image="assets/team/ulrick.jpg"
            monogramTone="#a8a090"
            body="Twenty years in contract furniture — twelve at Vitra, entrepreneurial work with Better CPH, sales and product at HOWE. Danish by origin, pan-European by practice, Ulrick leads Derlot's presence across the continent."
          />
        </div>
      </section>

      {/* Continue reading — cross-links to capability pages, elevated */}
      {setScreen && (
        <section style={{
          padding: isMobile ? "80px 20px 96px" : "120px max(32px, 4vw) 140px",
          maxWidth: 1440, margin: "0 auto",
          borderTop: "0.5px solid rgba(26,25,23,0.18)",
          borderBottom: "0.5px solid rgba(26,25,23,0.18)",
          background: "#f5f3ef",
        }}>
          <div style={{ marginBottom: isMobile ? 32 : 56, maxWidth: 720 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
              Continue reading
            </div>
            <h2 style={{
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(26px, 6vw, 34px)" : "clamp(28px, 2.6vw, 40px)",
              lineHeight: 1.12, letterSpacing: "-0.015em",
              color: "#1a1917", margin: 0, maxWidth: "26ch", textWrap: "balance",
            }}>
              The work behind the work.
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
            gap: isMobile ? 32 : 40,
          }}>
            {[
              {
                key: "design-capabilities",
                eyebrow: "Collaboration",
                title: "How the studio works alongside architects, from brief to install.",
                body: "Process, disciplines under one roof, named A&D partners, and the Adelaide / Woods Bagot case study.",
                image: "images/about/collaboration/01-almaty.jpg",
              },
              {
                key: "circular-economy",
                eyebrow: "Circularity",
                title: "What we count, where we manufacture, and what we take back.",
                body: "Four commitments. Trio's 85% recycled LDPE. Renew programme and published sustainability commitment.",
                image: "images/_legacy/collections/stump-r-gallery.webp",
                images: [
                  "images/about/circularity/01-trio.jpg",
                  "images/about/circularity/02-regrind.jpg",
                  "images/about/circularity/03-feedstock.jpg",
                  "images/about/circularity/04-floor.jpg",
                ],
              },
            ].map((card) => (
              <a
                key={card.key}
                onClick={() => setScreen(card.key)}
                style={{
                  cursor: "pointer",
                  display: "block",
                }}
              >
                <div style={{
                  aspectRatio: "4/3",
                  background: "#e4e2da",
                  overflow: "hidden",
                  marginBottom: isMobile ? 18 : 24,
                }}>
                  {card.images ? (
                    <CoverCarousel images={card.images} alt={card.eyebrow} />
                  ) : (
                    <img
                      src={card.image} srcSet={window.IMG && window.IMG.srcsetFor(card.image)} sizes={window.IMG && window.IMG.sizes()}
                      alt={card.eyebrow}
                      loading="lazy"
                      style={{
                        width: "100%", height: "100%", objectFit: "cover", display: "block",
                        transition: "transform 900ms cubic-bezier(0.2,0.6,0.2,1)",
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.02)"}
                      onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
                    />
                  )}
                </div>
                <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
                  {card.eyebrow}
                </div>
                <h3 style={{
                  fontFamily: "var(--font-display, Poppins, sans-serif)",
                  fontWeight: 500,
                  fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)",
                  lineHeight: 1.15, letterSpacing: "-0.015em",
                  color: "#1a1917", margin: "0 0 14px 0", maxWidth: "22ch",
                  textWrap: "balance",
                }}>
                  {card.title}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "#1a1917", margin: "0 0 20px 0", maxWidth: "44ch", fontWeight: 400 }}>
                  {card.body}
                </p>
                <span style={{
                  fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "#1a1917", borderBottom: "0.5px solid #1a1917",
                  paddingBottom: 3, fontWeight: 500,
                }}>
                  Read more →
                </span>
              </a>
            ))}
          </div>
        </section>
      )}

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

window.About = About;