/* Services — six offerings in a grid */
const Services = () => {
  const items = [
    {
      n: "01",
      title: "AI Readiness & Workforce Strategy",
      tag: "Strategy · Organisational",
      body: "We assess where your people, workflows, and culture actually sit on the AI readiness curve — then design a roadmap that moves the whole organisation forward, not just the tech stack.",
    },
    {
      n: "02",
      title: "AI Operating System Design",
      tag: "Systems · Architecture",
      body: "We design the full AIOS: the knowledge base your AI draws from, the agents that think and decide, and the automations that act. A working intelligence layer built around how your organisation actually operates.",
    },
    {
      n: "03",
      title: "AI System Build",
      tag: "Build · Delivery",
      body: "We don't just design the architecture — we build the surfaces too. Custom dashboards, staff portals, client-facing applications, and rapid prototypes delivered using the latest AI-assisted development platforms.",
    },
    {
      n: "04",
      title: "AI Policy & Governance",
      tag: "Governance · Compliance",
      body: "Practical AI policy that people actually follow — grounded in human factors principles, built to fit your risk environment, and designed to evolve as the technology does.",
    },
    {
      n: "05",
      title: "AI Coaching",
      tag: "Coaching · Individual",
      body: "One-to-one and small-group coaching for leaders, practitioners, and teams navigating AI adoption. We meet people where they are on the capability ladder and move them forward — sustainably.",
    },
    {
      n: "06",
      title: "AI Ergonomics",
      tag: "Human Factors · Safety",
      body: "Human factors analysis of AI systems and interfaces — identifying where AI creates new cognitive load, error risk, or safety concerns before they reach the people doing the work.",
    },
  ];

  const [active, setActive] = React.useState(-1);
  const { isMobile, isTablet } = useViewport();

  const wrap = {
    padding: isMobile ? "72px 0 80px" : "120px 0 140px",
    background: "linear-gradient(180deg, transparent 0%, rgba(20,20,29,0.6) 50%, transparent 100%)",
    borderTop: "1px solid var(--rule)",
    borderBottom: "1px solid var(--rule)",
  };
  const container = { maxWidth: 1440, margin: "0 auto", padding: isMobile ? "0 20px" : "0 56px" };
  const head = {
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
    alignItems: "end",
    marginBottom: isMobile ? 48 : 80,
    gap: isMobile ? 24 : 56,
  };
  const grid = {
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : (isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)"),
    gap: 1,
    background: "var(--rule)",
    border: "1px solid var(--rule)",
  };
  const card = (isActive) => ({
    background: isActive ? "rgba(20,20,29,0.85)" : "rgba(13,13,21,0.6)",
    padding: isMobile ? "32px 24px 30px" : "40px 32px 36px",
    cursor: "pointer",
    position: "relative",
    transition: "background 320ms ease",
    minHeight: isMobile ? "auto" : 360,
    display: "flex",
    flexDirection: "column",
    gap: isMobile ? 14 : 18,
  });
  const num = {
    fontFamily: "var(--mono)",
    fontSize: 12,
    letterSpacing: "0.2em",
    color: "var(--lav-1)",
  };
  const title = {
    fontFamily: "var(--serif)",
    fontSize: isMobile ? 24 : 30,
    lineHeight: 1.1,
    letterSpacing: "-0.015em",
    margin: 0,
    color: "var(--ink)",
    textWrap: "balance",
  };
  const tag = {
    fontFamily: "var(--mono)",
    fontSize: 10.5,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "var(--ink-3)",
  };
  const body = {
    fontSize: 14.5,
    lineHeight: 1.6,
    color: "var(--ink-2)",
    margin: 0,
    textWrap: "pretty",
  };
  const foot = {
    marginTop: "auto",
    paddingTop: 20,
    display: "flex",
    justifyContent: "flex-end",
  };
  const arrow = (isActive) => ({
    width: 36, height: 36, borderRadius: "50%",
    border: "1px solid var(--lav-1)",
    color: "var(--lav-1)",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    transition: "background 240ms ease, transform 240ms ease",
    background: isActive ? "rgba(207,199,255,0.10)" : "transparent",
    transform: isActive ? "translateX(4px)" : "translateX(0)",
  });

  return (
    <section id="services" style={wrap} data-screen-label="04 Services">
      <div style={container}>
        <div style={head}>
          <div>
            <div className="eyebrow">§ 02 — Services</div>
            <h2 style={{
              fontFamily: "var(--serif)",
              fontSize: isMobile ? 40 : 72,
              lineHeight: 1.0,
              letterSpacing: "-0.02em",
              margin: "20px 0 0",
              maxWidth: 880,
              textWrap: "balance",
            }}>
              Six ways we work <em style={{ fontStyle: "italic", color: "var(--lav-1)" }}>with you</em>.
            </h2>
          </div>
          <div style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, textWrap: "pretty" }}>
            Whether you arrive with a strategy problem, a technology build, or a team that needs to grow — the work is always human-centered.
          </div>
        </div>

        <div style={grid}>
          {items.map((it, i) => {
            const isActive = active === i;
            return (
              <article
                key={it.n}
                style={card(isActive)}
                onMouseEnter={() => setActive(i)}
                onMouseLeave={() => setActive(-1)}
                onFocus={() => setActive(i)}
                onBlur={() => setActive(-1)}
                tabIndex={0}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={num}>{it.n}</span>
                  <span style={tag}>{it.tag}</span>
                </div>
                <h3 style={title}>{it.title}</h3>
                <p style={body}>{it.body}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;