/* global React, useViewport */

/* ------------------------------------------------------------------ */
/* CollaboratorsStrip                                                  */
/*                                                                    */
/* Architects & partners, set typographically (logos as names).       */
/* ------------------------------------------------------------------ */

const ARCHITECTS = [
  "Woods Bagot",
  "Hassell",
  "Gensler",
  "SANAA",
  "Blainey North",
  "Flack Studio",
  "COX Architecture",
  "Bates Smart",
  "Alexander Lotersztain",
];

const PARTNERS = [
  { name: "OE Elsafe", role: "Integrated power & USB" },
  { name: "Autex", role: "Acoustic panels & wall systems" },
];

function CollaboratorsStrip() {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <section style={{
      padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)",
      maxWidth: 1440,
      margin: "0 auto",
      borderTop: "0.5px solid rgba(26,25,23,0.18)",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "minmax(220px, 1fr) 2.6fr",
        gap: isMobile ? 24 : 64,
      }}>
        <div>
          <div style={{
            fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, marginBottom: 16,
          }}>
            In collaboration with
          </div>
          <p style={{
            fontSize: 15,
            lineHeight: 1.5,
            color: "#1a1917",
            fontWeight: 400,
            margin: 0,
            maxWidth: "32ch",
          }}>
            Specified by the architects and interior practices shaping civic, transit and hospitality spaces across three continents.
          </p>
        </div>

        <div>
          <div style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "18px 40px",
            rowGap: 18,
            fontSize: isMobile ? 22 : "clamp(22px, 2.4vw, 32px)",
            lineHeight: 1.1,
            fontWeight: 400,
            letterSpacing: "-0.01em",
            color: "#1a1917",
          }}>
            {ARCHITECTS.map((a, idx) => (
              <span key={a} style={{ display: "inline-flex", alignItems: "baseline", gap: "18px 40px" }}>
                {a}
                {idx < ARCHITECTS.length - 1 && (
                  <span style={{ color: "rgba(26,25,23,0.3)", marginLeft: 40 }}>·</span>
                )}
              </span>
            ))}
          </div>

          <div style={{
            marginTop: 40,
            paddingTop: 28,
            borderTop: "0.5px solid rgba(26,25,23,0.18)",
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
            gap: isMobile ? 20 : 40,
          }}>
            <div style={{
              fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "#6c6862", fontWeight: 500,
            }}>
              Manufacturing partners
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {PARTNERS.map(p => (
                <div key={p.name} style={{ display: "flex", justifyContent: "space-between", gap: 24, alignItems: "baseline" }}>
                  <div style={{ fontSize: 18, color: "#1a1917", fontWeight: 400 }}>{p.name}</div>
                  <div style={{ fontSize: 13, color: "#6c6862", fontWeight: 400, textAlign: "right" }}>{p.role}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CollaboratorsStrip = CollaboratorsStrip;