/* global React */

// ============================================================
// WE WORK ON — static grid of all partner logos (no scroll)
// ============================================================
const WeWorkOn = () => {
  const logos = [
    "microsoft", "googleCloud", "aws", "xsolCloud",
    "fortinet", "paloalto", "dell", "hpServer",
    "cisco", "hpeAruba", "endpoint", "bigcrm",
  ];

  return (
    <section style={{ background: "var(--cream)", paddingBlock: "clamp(40px, 4.5vw, 72px)", position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 36, position: "relative" }}>
        <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "center", textAlign: "center" }}>
          <span className="eyebrow" style={{ color: "var(--bel-blue)" }}>WE WORK ON</span>
          <h2 className="h2" style={{ margin: 0 }}>
            Service Excellence{" "}
            <span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>|</span>{" "}
            One-Connect Solutions{" "}
            <span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>|</span>{" "}
            Technology Innovation
          </h2>
          <p className="lead" style={{ margin: "6px auto 0", maxWidth: 640 }}>
            Certified partnerships across every layer of the stack — cloud, network, security and in-house platforms.
          </p>
        </div>

        {/* 4 × 3 grid */}
        <div className="wwo-grid">
          {logos.map((kind, i) => (
            <div key={i} className="wwo-cell">
              <PartnerLogo kind={kind} />
            </div>
          ))}
        </div>

        <style>{`
          .wwo-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 22px;
            background: var(--paper);
            overflow: hidden;
            box-shadow: 0 24px 50px -32px rgba(24,24,27,0.15);
          }
          .wwo-cell {
            min-height: 130px;
            display: grid; place-items: center;
            padding: 22px 18px;
            position: relative;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            transition: background .25s ease, transform .25s ease;
          }
          .wwo-cell:nth-child(4n) { border-right: 0; }
          .wwo-cell:nth-last-child(-n+4) { border-bottom: 0; }
          .wwo-cell:hover { background: var(--cream); }
          .wwo-cell::before {
            content: "";
            position: absolute; left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--bel-orange);
            transform: scaleY(0);
            transform-origin: center;
            transition: transform .3s ease;
          }
          .wwo-cell:hover::before { transform: scaleY(1); }

          @media (max-width: 980px) {
            .wwo-grid { grid-template-columns: repeat(3, 1fr); }
            .wwo-cell:nth-child(4n) { border-right: 1px solid var(--line); }
            .wwo-cell:nth-child(3n) { border-right: 0; }
            .wwo-cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
            .wwo-cell:nth-last-child(-n+3) { border-bottom: 0; }
          }
          @media (max-width: 640px) {
            .wwo-grid { grid-template-columns: repeat(2, 1fr); }
            .wwo-cell:nth-child(3n) { border-right: 1px solid var(--line); }
            .wwo-cell:nth-child(2n) { border-right: 0; }
            .wwo-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
            .wwo-cell:nth-last-child(-n+2) { border-bottom: 0; }
          }
        `}</style>
      </div>
    </section>
  );
};

// ============================================================
// Partner logo wordmarks — clean text-based, no card frames
// ============================================================
const PartnerLogo = ({ kind }) => {
  switch (kind) {
    case "microsoft": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
        <svg viewBox="0 0 24 24" width="32" height="32">
          <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
          <rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
          <rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
          <rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
        </svg>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "Segoe UI, Arial, sans-serif", fontWeight: 600, fontSize: 22, color: "#3F3F46", letterSpacing: "-0.005em" }}>Microsoft</span>
          <span style={{ fontFamily: "Segoe UI, Arial, sans-serif", fontWeight: 400, fontSize: 13, color: "#737380" }}>Solutions Partner</span>
        </div>
      </div>
    );

    case "googleCloud": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
        <svg viewBox="0 0 48 48" width="34" height="34">
          <path fill="#4285F4" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.5 2.4 30 0 24 0 14.6 0 6.4 5.4 2.5 13.3l7.8 6c1.9-5.5 7.1-9.8 13.7-9.8z"/>
          <path fill="#34A853" d="M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.5-4.1 7.1-10.2 7.1-17.5z"/>
          <path fill="#FBBC05" d="M10.3 28.7a14.5 14.5 0 0 1 0-9.4l-7.8-6A24 24 0 0 0 0 24c0 3.8.9 7.5 2.5 10.7l7.8-6z"/>
          <path fill="#EA4335" d="M24 48c6.5 0 12-2.1 16-5.8l-7.6-5.9c-2.1 1.4-4.8 2.3-8.4 2.3-6.6 0-12.2-4.4-14.2-10.4l-7.8 6C6 42.6 14.4 48 24 48z"/>
        </svg>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 500, fontSize: 22, color: "#3F3F46", letterSpacing: "-0.01em" }}>Google Cloud</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 400, fontSize: 13, color: "#737380" }}>Partner</span>
        </div>
      </div>
    );

    case "aws": return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
        <span style={{ fontFamily: "Arial Black, Arial, sans-serif", fontWeight: 900, fontSize: 36, color: "#232F3E", letterSpacing: "-0.02em", lineHeight: 1 }}>aws</span>
        <svg viewBox="0 0 80 12" width="64" height="10">
          <path d="M4 4 C24 11, 56 11, 76 4" stroke="#FF9900" strokeWidth="2.4" fill="none" strokeLinecap="round"/>
          <path d="M72 1.5 L77 4 L72 6.5" stroke="#FF9900" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    );

    case "xsolCloud": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 64 44" width="48" height="34">
          <path d="M16 32c-5 0-9-4-9-9s4-9 9-9c2-6 7-10 13-10s11 4 13 10c5 0 9 4 9 9s-4 9-9 9H16z"
                fill="none" stroke="var(--bel-orange)" strokeWidth="2.4" strokeLinejoin="round"/>
        </svg>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1, gap: 1 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, color: "var(--bel-orange)", letterSpacing: "0.04em" }}>XSOL</span>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, color: "var(--bel-orange)", letterSpacing: "0.04em" }}>CLOUD</span>
        </div>
      </div>
    );

    case "fortinet": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 22 18" width="24" height="20">
          <g fill="#E2231A">
            <rect x="0" y="1" width="4" height="4"/>
            <rect x="5" y="1" width="4" height="4"/>
            <rect x="10" y="1" width="4" height="4"/>
            <rect x="15" y="1" width="4" height="4"/>
            <rect x="0" y="7" width="4" height="4"/>
            <rect x="5" y="7" width="4" height="4"/>
            <rect x="0" y="13" width="4" height="4"/>
          </g>
        </svg>
        <span style={{ fontFamily: "Arial Black, Arial, sans-serif", fontWeight: 900, fontSize: 26, color: "#1A1F36", letterSpacing: "-0.015em" }}>FORTINET</span>
      </div>
    );

    case "paloalto": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 26 26" width="28" height="28">
          <path d="M3 13L13 3l10 10-10 10L3 13z" fill="#FA582D"/>
          <path d="M10 13l3-3 3 3-3 3-3-3z" fill="white"/>
        </svg>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 800, fontSize: 22, color: "#FA582D", letterSpacing: "-0.015em" }}>paloalto</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 600, fontSize: 10, color: "#737380", letterSpacing: "0.16em" }}>NETWORKS</span>
        </div>
      </div>
    );

    case "dell": return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
        <span style={{ fontFamily: "Arial Black, Arial, sans-serif", fontWeight: 900, fontSize: 30, color: "#0F4FA1", letterSpacing: "0.08em", fontStyle: "italic" }}>DELL</span>
        <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 500, fontSize: 11, color: "#737380" }}>Business Partner</span>
      </div>
    );

    case "hpServer": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 50 50" width="40" height="40">
          <circle cx="25" cy="25" r="23" fill="none" stroke="#0096D6" strokeWidth="2.5"/>
          <text x="25" y="33" textAnchor="middle" fontFamily="Arial,sans-serif" fontSize="22" fontWeight="700" fill="#0096D6" fontStyle="italic">hp</text>
        </svg>
        <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 500, fontSize: 20, color: "#3F3F46" }}>Server</span>
      </div>
    );

    case "cisco": return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
        <svg viewBox="0 0 80 22" width="64" height="18">
          {[3, 12, 21, 30, 39, 48, 57, 66].map((x, i) => {
            const order = [0, 1, 2, 3, 3, 2, 1, 0][i];
            const h = [8, 14, 20, 22][order];
            return <rect key={x} x={x} y={(22 - h) / 2} width="4" height={h} fill="#1BA0D7"/>;
          })}
        </svg>
        <span style={{ fontFamily: "Arial Black, Arial, sans-serif", fontWeight: 900, fontSize: 22, color: "#C8102E", letterSpacing: "0.04em" }}>CISCO</span>
      </div>
    );

    case "hpeAruba": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 24, color: "#1A1F36", letterSpacing: "-0.01em" }}>HPE</span>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 20, color: "#FF8300", letterSpacing: "-0.015em" }}>aruba</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 500, fontSize: 11, color: "#737380" }}>networking</span>
        </div>
      </div>
    );

    case "endpoint": return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <svg viewBox="0 0 28 32" width="22" height="26">
          <rect x="0" y="0" width="28" height="32" rx="3" fill="#3A1F5C"/>
          <circle cx="14" cy="9" r="3" fill="#EF6A1F"/>
          <circle cx="14" cy="16" r="3" fill="#FFE338"/>
          <circle cx="14" cy="23" r="3" fill="#22C55E"/>
        </svg>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 800, fontSize: 14, color: "#3A1F5C", letterSpacing: "0.04em" }}>ENDPOINT</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 800, fontSize: 14, color: "#3A1F5C", letterSpacing: "0.04em" }}>PROTECTOR</span>
        </div>
      </div>
    );

    case "bigcrm": return (
      <div style={{ display: "inline-flex", alignItems: "baseline" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 30, color: "#16A34A", letterSpacing: "-0.025em" }}>BIG</span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 30, color: "var(--bel-orange)", letterSpacing: "-0.025em" }}>CRM</span>
        <sup style={{ fontFamily: "var(--font-display)", fontSize: 12, color: "var(--bel-orange)", fontWeight: 700, marginLeft: 1 }}>®</sup>
      </div>
    );

    default: return null;
  }
};

Object.assign(window, { WeWorkOn });
