/* Services section.
   Three service types as full-bleed cards in a 3-up grid.
   Each card has an accent color (teal / blue / warm amber). */
function Services() {
  const { t } = useT();
  const mobile = useMobile();
  const items = t("services.items");

  const ACCENT = {
    teal: { ring: "rgba(45,212,191,0.35)", glow: "rgba(45,212,191,0.18)", text: "#2DD4BF", soft: "rgba(45,212,191,0.10)" },
    blue: { ring: "rgba(59,130,246,0.35)", glow: "rgba(59,130,246,0.18)", text: "#60A5FA", soft: "rgba(59,130,246,0.10)" },
    warm: { ring: "rgba(245,158,11,0.35)", glow: "rgba(245,158,11,0.16)", text: "#F59E0B", soft: "rgba(245,158,11,0.10)" }
  };

  const titleStyle = mobile
    ? { ...window.sectionTitle, font: "700 32px/1.1 'Inter'" }
    : window.sectionTitle;

  return (
    <section id="services" data-bg="solution" style={{ padding: mobile ? "72px 20px 56px" : "112px 32px 80px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ ...window.eyebrowBlue, color: "#2DD4BF" }}>{t("services.eyebrow")}</div>
      <h2 style={titleStyle}>{t("services.title")}</h2>
      <p style={window.sectionLede}>{t("services.sub")}</p>

      <div style={{
        display: "grid",
        gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
        gap: mobile ? 14 : 18,
        marginTop: mobile ? 40 : 56
      }}>
        {Array.isArray(items) && items.map((it, i) => {
          const a = ACCENT[it.accent] || ACCENT.blue;
          return (
            <article key={i} style={{
              background: "var(--tb-surface)",
              border: "1px solid var(--tb-line)",
              borderRadius: 18,
              padding: mobile ? 20 : 28,
              boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45)",
              display: "flex",
              flexDirection: "column",
              gap: 14,
              position: "relative",
              overflow: "hidden"
            }}>
              {/* Top accent bar */}
              <div style={{
                position: "absolute", inset: "0 0 auto 0", height: 2,
                background: `linear-gradient(90deg, ${a.text}, transparent)`
              }} />

              <header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                <div style={{
                  font: mobile ? "700 22px/1 'JetBrains Mono'" : "700 28px/1 'JetBrains Mono'",
                  color: a.text,
                  letterSpacing: "-0.02em"
                }}>{it.tag}</div>
                <div style={{
                  font: "600 11px/1 'Inter'",
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  color: a.text,
                  background: a.soft,
                  border: `1px solid ${a.ring}`,
                  borderRadius: 999,
                  padding: "6px 10px"
                }}>{it.kind}</div>
              </header>

              <h3 style={{
                font: mobile ? "600 20px/1.25 'Inter'" : "600 24px/1.25 'Inter'",
                letterSpacing: "-0.015em",
                color: "#fff",
                margin: 0
              }}>{it.title}</h3>

              <p style={{
                font: "400 15px/1.6 'Inter'",
                color: "#94A3B8",
                margin: 0
              }}>{it.body}</p>

              <div style={{
                marginTop: "auto",
                paddingTop: 16,
                borderTop: "1px solid var(--tb-line)",
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                {Array.isArray(it.examples) && it.examples.map((ex, j) => (
                  <div key={j} style={{
                    display: "flex", alignItems: "center", gap: 10,
                    font: "500 13px/1.4 'Inter'",
                    color: "#CBD5E1"
                  }}>
                    <span style={{
                      width: 4, height: 4, borderRadius: 999,
                      background: a.text, flexShrink: 0
                    }} />
                    {ex}
                  </div>
                ))}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

window.Services = Services;