/* 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.",
    },
    {
      n: "07",
      title: "AI Leadership Programs",
      tag: "Programs · Delivery",
      body: "Custom-built keynotes, workshops, and multi-day retreats that take leadership teams from AI curiosity to applied capability. Designed around your real workflows, delivered with progressive scaffolding, and built so the skills stick long after the lights go down.",
    },
    {
      n: "08",
      title: "AI Readiness Audits & Baselines",
      tag: "Research · Evaluation",
      body: "Current state assessments, baseline evaluations, and pre/post measurement of AI initiatives. We build the evidence base leadership needs to make confident decisions — and the evaluation framework that proves what worked.",
    },
  ];

  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",
            }}>
              Eight 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;