/* ServicesGrid — icon-led service tiles. Eight services, lucide icons (the
 * stand-in for the bespoke set). Cards use the 14 px corner; "Uptime" — the
 * brand's "active" illustration on page 38 — gets the ink-active treatment. */

function ServicesGrid() {
  const services = [
    { icon: "message-square",  title: "Unlimited IT support",      blurb: "Dedicated on-site and remote support with response times under 30 minutes — every engineer is a Reformed engineer." },
    { icon: "cloud-upload",    title: "Microsoft 365 backups",     blurb: "Microsoft 365 doesn't back up your data. We add third-party cloud backup for everything critical." },
    { icon: "monitor",         title: "Endpoint management",       blurb: "Microsoft patched 1,228 vulnerabilities in 2023, 84 critical. We keep every device updated, fast." },
    { icon: "mail-check",      title: "Managed email signatures",  blurb: "One place to manage signatures and disclaimers across every device — brand and compliance, sorted." },
    { icon: "scan-eye",        title: "Data breach monitoring",    blurb: "550m+ credentials have leaked in past breaches. We watch the dark web and alert your team if yours show up." },
    { icon: "graduation-cap",  title: "Cyber security training",   blurb: "UK law requires it. We run a managed training platform that tracks compliance and reports it." },
    { icon: "shield-check",    title: "Cybersecurity",             blurb: "EDR, MFA, conditional access, mailbox protection — security first, always. Never an add-on." },
    { icon: "phone",           title: "VoIP & telephony",          blurb: "Hosted 3CX cloud telephony. Over 95% of our managed clients use ours — and they save money doing it." },
  ];

  return (
    <section id="services" style={{ background: "var(--ri-paper)", padding: "120px 0" }}>
      <Container>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow number="04">Services</Eyebrow>
          <h2 style={{
            fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
            letterSpacing: "-0.02em", fontWeight: 700, margin: 0,
          }}>
            Everything we do,<br/>in one team.
          </h2>
          <p style={{
            marginTop: 22, fontSize: 18, lineHeight: 1.55,
            color: "var(--fg-muted)", maxWidth: 540, marginBottom: 0,
          }}>
            One partner, one number, one bill. No vendor ping-pong when
            something breaks.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12,
        }} className="ri-services-grid">
          {services.map((s) => (
            <ServiceTile key={s.title} {...s} />
          ))}
        </div>
      </Container>

      <style>{`
        @media (max-width: 1024px) { .ri-services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px)  { .ri-services-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServiceTile({ icon, title, blurb, active }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        padding: "28px 24px 26px",
        background: active ? "var(--ri-ink)" : "#fff",
        color: active ? "var(--fg-inverse)" : "var(--fg)",
        border: active ? "1px solid var(--border-ink)" : "1px solid var(--border)",
        borderRadius: 14,
        cursor: "default",
        transition: "transform 200ms var(--ease-out), box-shadow 240ms var(--ease-out)",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        boxShadow: hover
          ? (active ? "0 14px 36px rgba(8,5,38,0.28)" : "var(--shadow-2)")
          : (active ? "none" : "var(--shadow-1)"),
      }}
    >
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: active ? "rgba(242,43,105,0.15)" : "var(--bg-subtle)",
        color: active ? "var(--ri-pink)" : "var(--ri-ink)",
        display: "flex", alignItems: "center", justifyContent: "center",
        marginBottom: 18,
      }}>
        <Icon name={icon} size={22} />
      </div>
      <h3 style={{
        fontSize: 17, fontWeight: 700, letterSpacing: "-0.005em",
        margin: "0 0 8px", lineHeight: 1.3,
      }}>{title}</h3>
      <p style={{
        fontSize: 13.5, lineHeight: 1.55, margin: 0,
        color: active ? "rgba(245,245,247,0.7)" : "var(--fg-muted)",
      }}>{blurb}</p>
    </article>
  );
}

Object.assign(window, { ServicesGrid });