/* global React, useViewport */
/*
 * ModularSpec — shared "build-up + typical assemblies" bands for the two highly
 * configurable systems (Gateway, Platform). Both are built the same way; they
 * only speak different material languages, so the layout is one component driven
 * entirely by props.
 *
 *   <ModularBuildUp>    a condensed step sequence — how the system goes together,
 *                       Frame → Finish. No SKU codes; just the grammar, in voice.
 *   <ModularAssemblies> a row of pre-drawn assembly cards (the SKU examples), each
 *                       a real bundle a specifier can quote from. The page's
 *                       primary action lives below them: open the configurator, or
 *                       get in touch.
 *
 * Visual language matches the existing detail pages (PageIntro / feature bands):
 * ink #1a1917, muted #6c6862, hairline rgba(26,25,23,0.18), panel #e4e2da.
 */

const INK = "#1a1917";
const MUTED = "#6c6862";
const HAIR = "rgba(26,25,23,0.18)";

/* ── Band 1 — the build-up, condensed ───────────────────────────────────── */
function ModularBuildUp({ eyebrow = "How it's built", title, concept, steps = [], footnote }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <section style={{ padding: isMobile ? "64px 20px" : "112px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid " + HAIR }}>
      <div style={{ maxWidth: 760, marginBottom: isMobile ? 36 : 52 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: MUTED, fontWeight: 500, marginBottom: 14 }}>{eyebrow}</div>
        {title && (
          <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: INK, margin: "0 0 18px 0", maxWidth: "26ch", textWrap: "balance" }}>
            {title}
          </h2>
        )}
        {concept && (
          <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.5, color: INK, margin: 0, maxWidth: "52ch", fontWeight: 500, fontStyle: "italic" }}>
            {concept}
          </p>
        )}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(auto-fit, minmax(150px, 1fr))", gap: 0, borderLeft: isMobile ? "none" : "0.5px solid " + HAIR }}>
        {steps.map((s) => (
          <div key={s.n} style={{
            borderTop: "0.5px solid " + HAIR,
            borderRight: isMobile ? "none" : "0.5px solid " + HAIR,
            padding: isMobile ? "16px 14px 18px 0" : "18px 18px 26px",
            minHeight: isMobile ? 0 : 120,
          }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 9, marginBottom: 8 }}>
              <span style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontSize: 12, fontWeight: 500, color: MUTED }}>{String(s.n).padStart(2, "0")}</span>
              <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? 15 : 16, lineHeight: 1.15, letterSpacing: "-0.01em", color: INK, margin: 0 }}>{s.layer}</h3>
            </div>
            <div style={{ fontSize: isMobile ? 12.5 : 13, lineHeight: 1.45, color: MUTED }}>{s.line}</div>
          </div>
        ))}
      </div>

      {footnote && (
        <p style={{ fontSize: 12.5, lineHeight: 1.55, color: MUTED, margin: isMobile ? "20px 0 0" : "24px 0 0", maxWidth: "70ch" }}>{footnote}</p>
      )}
    </section>
  );
}

/* ── Band 2 — typical pre-drawn assemblies (the SKU examples) ────────────── */
function ModularAssemblies({ eyebrow = "Start from a drawn configuration", title, intro, assemblies = [], invitation, note, configHref = "configurator.html", getInTouchHref = "#enquire" }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <section style={{ padding: isMobile ? "64px 20px" : "112px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid " + HAIR }}>
      <div style={{ maxWidth: 760, marginBottom: isMobile ? 36 : 56 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: MUTED, fontWeight: 500, marginBottom: 14 }}>{eyebrow}</div>
        {title && (
          <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: INK, margin: "0 0 16px 0", maxWidth: "24ch", textWrap: "balance" }}>
            {title}
          </h2>
        )}
        {intro && (
          <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: INK, margin: 0, maxWidth: "52ch", fontWeight: 500 }}>{intro}</p>
        )}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fit, minmax(280px, 1fr))", gap: isMobile ? 16 : 20 }}>
        {assemblies.map((a) => {
          const href = a.href || (configHref + (configHref.includes("?") ? "&" : "?") + "assembly=" + encodeURIComponent(a.id || ""));
          return (
            <a key={a.id || a.name} href={href} style={{
              display: "flex", flexDirection: "column", textDecoration: "none", color: "inherit",
              border: "0.5px solid " + HAIR, background: "#fbfaf7", padding: isMobile ? "20px" : "24px",
              minHeight: 220, transition: "background 200ms ease, border-color 200ms ease",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#f4f2ec"; e.currentTarget.style.borderColor = "rgba(26,25,23,0.4)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "#fbfaf7"; e.currentTarget.style.borderColor = HAIR; }}>
              <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: MUTED, fontWeight: 500, marginBottom: 10 }}>{a.kicker}</div>
              <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? 19 : 21, lineHeight: 1.15, letterSpacing: "-0.01em", color: INK, margin: "0 0 16px 0" }}>{a.name}</h3>

              <dl style={{ margin: "0 0 18px 0", display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 14px", flex: 1 }}>
                {a.rows.map((r, i) => (
                  <React.Fragment key={i}>
                    <dt style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: MUTED, fontWeight: 500, paddingTop: 1 }}>{r.label}</dt>
                    <dd style={{ margin: 0, fontSize: 13, lineHeight: 1.45, color: INK, fontFamily: r.plain ? "inherit" : "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)" }}>{r.value}</dd>
                  </React.Fragment>
                ))}
              </dl>

              <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: INK, fontWeight: 500, borderTop: "0.5px solid " + HAIR, paddingTop: 14, marginTop: "auto" }}>
                Open in the configurator <span aria-hidden="true">→</span>
              </div>
            </a>
          );
        })}
      </div>

      {note && (
        <p style={{ fontSize: 12.5, lineHeight: 1.55, color: MUTED, margin: isMobile ? "20px 0 0" : "24px 0 0", maxWidth: "70ch" }}>{note}</p>
      )}

      {invitation && (
        <div style={{ marginTop: isMobile ? 40 : 56, paddingTop: isMobile ? 32 : 40, borderTop: "0.5px solid " + HAIR, display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", justifyContent: "space-between", gap: 24 }}>
          <p style={{ fontSize: isMobile ? 17 : 20, lineHeight: 1.4, color: INK, margin: 0, maxWidth: "40ch", fontWeight: 500 }}>{invitation}</p>
          <div style={{ flexShrink: 0, display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 12 : 14, alignItems: "stretch" }}>
            <a href={configHref} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, background: INK, color: "#f5f3ef", fontSize: 13, letterSpacing: "0.02em", fontWeight: 500, padding: "15px 24px", textDecoration: "none", whiteSpace: "nowrap" }}>
              Open the configurator <span aria-hidden="true">→</span>
            </a>
            <a href={getInTouchHref} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, background: "transparent", color: INK, fontSize: 13, letterSpacing: "0.02em", fontWeight: 500, padding: "15px 24px", textDecoration: "none", whiteSpace: "nowrap", border: "0.5px solid rgba(26,25,23,0.4)" }}>
              Get in touch <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      )}
    </section>
  );
}

window.ModularBuildUp = ModularBuildUp;
window.ModularAssemblies = ModularAssemblies;