// offerings.jsx - RecLab "what we do" section
// Intro line → two offering tracks (Training / Consulting), type-led / editorial layout.
// Exports window.RecLabOfferings

const MONO = "'Space Mono', ui-monospace, Menlo, monospace";

const SECTIONS = [
  {
    tag: "01", name: "Training",
    title: "Upskill your existing team",
    body: "We focus on teaching you the fundamentals of how to use AI tools, building transferrable skills that help you solve real problems.",
    items: [
      { no: "01", title: "Pair prompting", sub: "Work through real tasks side-by-side, supporting you to build the projects and automations you want" },
      { no: "02", title: "Team workshops", sub: "Half or full day, remote or in-person, focused on upskilling the team" },
      { no: "03", title: "1:1 coaching", sub: "Personalised support for career development for AI RecOps" },
      { no: "04", title: "Job seeker AI coaching", sub: "Build an AI portfolio and stand out in your job search" },
    ],
  },
  {
    tag: "02", name: "Consulting",
    title: "RecOps consulting projects",
    body: "Some teams don't have the time or resources to allocate. We'll audit your workflows, figure out where AI fits, and build it into your operations so you can see the impact before investing.",
    items: [
      { no: "01", title: "Process & workflow audit", sub: "We find where AI saves your team real time" },
      { no: "02", title: "Tool selection & implementation", sub: "Cut through the noise, pick a stack that works together" },
      { no: "03", title: "Automation builds", sub: "We build it for you, hand it over, train you on it, but also explain how we built it for upskilling" },
      { no: "04", title: "Ongoing support & iteration", sub: "We don't just build and disappear" },
    ],
  },
];

function TrackBlock({ track, rule, pad = "62px 0", accent = "var(--terra)", accentDeep = "var(--terra-deep)" }) {
  return (
    <div style={{ padding: pad, borderTop: rule ? "1px solid rgba(28,26,22,0.2)" : "none" }}>
      <div style={{ maxWidth: 760, marginBottom: 48 }}>
        <span style={{ fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: accentDeep }}>{track.tag} / {track.name}</span>
        <h3 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 54, lineHeight: 1.0, letterSpacing: "-0.035em", color: "var(--ink)", margin: "22px 0 0", maxWidth: 680 }}>{track.title}</h3>
        <p style={{ fontFamily: "var(--sans)", fontSize: 17.5, lineHeight: 1.6, color: "var(--ink-soft)", margin: "24px 0 0", maxWidth: 620 }}>{track.body}</p>
      </div>
      <div className="offer-items" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, borderTop: "1px solid var(--ink)", paddingTop: 4 }}>
        {track.items.map((it) => (
          <div key={it.no} style={{ paddingTop: 20 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, minHeight: 50 }}>
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 19, lineHeight: 1, color: accent }}>{it.no}</span>
              <h4 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 18, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0 }}>{it.title}</h4>
            </div>
            <p style={{ fontFamily: "var(--sans)", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink-soft)", margin: "8px 0 0", paddingLeft: 22 }}>{it.sub}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function Offerings() {
  return (
    <section className="offer-section" style={{ fontFamily: "var(--sans)" }}>
      <div className="offer-band" style={{ background: "var(--paper)" }}>
        <div className="offer-wrap" style={{ maxWidth: 1360, margin: "0 auto", padding: "104px 80px 0" }}>
          <h2 style={{ fontFamily: "var(--sans)", fontWeight: 400,
            fontSize: "clamp(2.25rem, 5vw, 4rem)", lineHeight: 1.04,
            letterSpacing: "-0.03em", color: "var(--ink)", margin: "0 0 36px" }}>
            Two ways we help you put AI to work
          </h2>
          <TrackBlock track={SECTIONS[0]} rule={true} pad="62px 0 84px" />
        </div>
      </div>
      <div className="offer-band" style={{ background: "var(--paper-2)" }}>
        <div className="offer-wrap" style={{ maxWidth: 1360, margin: "0 auto", padding: "0 80px" }}>
          <TrackBlock track={SECTIONS[1]} rule={false} pad="84px 0 104px" accent="var(--sage)" accentDeep="#54603f" />
        </div>
      </div>
    </section>
  );
}

window.RecLabOfferings = { Offerings };