/* global React, useViewport */

// Slim Configurator teaser — used on collection detail pages.
// The full configurator is a separate page (configurator.html) linked from the
// header nav; this component only hands off with a single clear CTA.
// Props:
//   collection — string, e.g. "Gateway" (defaults for back-compat)
//   href       — target page, defaults to configurator.html
function ConfiguratorStrip({ collection = "Gateway", href = "configurator.html" }) {
  const vw = useViewport();
  const isMobile = vw < 760;

  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(0, 1fr) auto",
        alignItems: isMobile ? "start" : "end",
        gap: isMobile ? 20 : 40,
      }}>
        <div>
          <div style={{
            fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 12 : 14,
          }}>
            Configurator
          </div>
          <h2 style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(26px, 2.4vw, 36px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: 0, maxWidth: "20ch",
            textWrap: "balance",
          }}>
            Configure {collection} for your project.
          </h2>
        </div>

        <a
          href={href}
          style={{
            justifySelf: isMobile ? "start" : "end",
            display: "inline-flex", alignItems: "center", gap: 10,
            fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
            color: "#1a1917", fontWeight: 500, cursor: "pointer",
            borderBottom: "0.5px solid #1a1917", paddingBottom: 4,
            textDecoration: "none",
          }}
        >
          Open configurator →
        </a>
      </div>
    </section>
  );
}

window.ConfiguratorStrip = ConfiguratorStrip;