// Devleaps — the layered proposition ("From AI ambition to AI in production").
// Mirrors the AI Proposition board in Atlas: 01 is the entry, 02 and 03 build on
// it side by side, 04 and 05 are the floor underneath, and Operate wraps all five.
// Each capability links to its page; Operate has no page yet.

const PROP_BUILD = [
  { n: "02", area: "b02", title: "Applied AI", href: "ai.html",
    body: "Agents and AI solutions for the business. On whichever AI foundation you already run.",
    tags: ["agents", "retrieval", "evals", "integration"] },
  { n: "03", area: "b03", title: "AI-native development", href: "ai-native-development.html",
    body: "Your software organisation becomes AI-native. The harness, not just the tools.",
    tags: ["agent policies", "eval gates", "AI Software Factory"] },
];

const PROP_FLOOR = [
  { n: "04", area: "f04", title: "AI platform", href: "ai-platform.html",
    body: "Gateway · guardrails · security · agent authorisation · evals · cost control. Everything shared across use cases lives here.",
    note: "foundation-agnostic", sub: <><strong className="dl-prop-pref">orq.ai</strong> · Foundry · Bedrock · Vertex</> },
  { n: "05", area: "f05", title: "Data", href: "data.html",
    body: "Platforms · quality · lineage · governance · analytics. No data foundation, no AI. We say that on day one, not six months in.",
    note: "the (AI) foundation", sub: "crucial with or without AI" },
];

const PROP_OPERATE = [
  { k: "Governance",    items: "policies · compliance · audit · cost insight" },
  { k: "Observability", items: "tracing · monitoring · alerting" },
  { k: "Context management & sharing", items: "skills · knowledge · conventions, one context for every team and agent" },
];

const Proposition = () =>
<section id="proposition" className="dl-section" style={{ background: "var(--bg)", color: "var(--fg)", borderTop: "1px solid var(--line)" }}>
    <div className="dl-container">
      <div style={{ marginBottom: 48 }}>
        <Eyebrow>the AI proposition</Eyebrow>
        <h2 className="dl-h1" style={{ margin: "16px 0 24px" }}>
          From AI ambition<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>to AI in production.</span>
        </h2>
        <p className="dl-body-lg" style={{ maxWidth: "62ch", margin: 0 }}>
          Most firms sell you the model. We build the floor it stands on. Five capabilities in one network, so you enter where you are and everything underneath is already ours to deliver.
        </p>
      </div>

      <div className="dl-prop-grid">
        <a href="transformation.html" className="dl-prop-box dl-prop-entry" style={{ gridArea: "entry" }}>
          <span className="dl-prop-num dl-prop-num-accent">01</span>
          <div>
            <div className="dl-prop-eyb">// entry · where every engagement starts</div>
            <h3 className="dl-prop-title">Vision &amp; transformation</h3>
            <p className="dl-prop-body">Scan · hackathons · knowledge sessions · fractional CTO, CIO, CDO. Sets a measured baseline and sequences everything below it.</p>
          </div>
        </a>

        {PROP_BUILD.map((b) =>
        <a key={b.n} href={b.href} className="dl-prop-box" style={{ gridArea: b.area }}>
            <div className="dl-prop-eyb">// {b.n} · build</div>
            <h3 className="dl-prop-title">{b.title}</h3>
            <p className="dl-prop-body">{b.body}</p>
            <div className="dl-prop-tags">{b.tags.join(" · ")}</div>
          </a>
        )}

        <div className="dl-prop-box dl-prop-operate" style={{ gridArea: "operate" }}>
          <div className="dl-prop-eyb">// wraps everything</div>
          <h3 className="dl-prop-title">Operate</h3>
          <p className="dl-prop-body">AI does not stay working on its own.</p>
          <ul className="dl-prop-oplist">{PROP_OPERATE.map((o) => <li key={o.k}><div className="dl-prop-opk">{o.k}</div><div className="dl-prop-opi">{o.items.replace(/ · /g, " · ")}</div></li>)}</ul>
          <div className="dl-prop-eyb dl-prop-opfoot">// across all five</div>
        </div>

        {PROP_FLOOR.map((f) =>
        <a key={f.n} href={f.href} className="dl-prop-box dl-prop-floor" style={{ gridArea: f.area }}>
            <span className="dl-prop-num">{f.n}</span>
            <div>
              <h3 className="dl-prop-title">{f.title}</h3>
              <p className="dl-prop-body">{f.body}</p>
            </div>
            <div className="dl-prop-side">
              <div className="dl-prop-eyb">{f.note}</div>
              <div className="dl-prop-tags">{f.sub}</div>
            </div>
          </a>
        )}
      </div>
    </div>

    <style>{`
      .dl-prop-grid {
        display: grid; gap: 16px;
        grid-template-columns: 1fr 1fr minmax(240px, .55fr);
        grid-template-areas:
          "entry entry entry"
          "b02   b03   operate"
          "f04   f04   operate"
          "f05   f05   operate";
      }
      .dl-prop-box {
        display: block; min-width: 0; padding: 28px 30px;
        background: var(--bg-elev); border: 1px solid var(--line);
        color: var(--fg); text-decoration: none;
        transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
      }
      a.dl-prop-box:hover { background: color-mix(in srgb, var(--bg-elev) 90%, #fff); border-color: var(--line-strong); }
      a.dl-prop-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .dl-prop-entry {
        display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
        padding: 32px 36px; border: 2px solid var(--accent);
      }
      a.dl-prop-entry:hover { border-color: var(--accent); }
      .dl-prop-floor { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
      .dl-prop-num {
        font-family: var(--font-display); font-weight: 700; line-height: 1;
        font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -0.02em;
        color: var(--fg-muted); opacity: .6;
      }
      .dl-prop-num-accent { color: var(--accent); opacity: 1; }
      .dl-prop-eyb {
        font-family: var(--font-mono); font-size: 11px; font-weight: 600;
        letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
      }
      .dl-prop-title {
        font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
        font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.01em;
        margin: 10px 0 12px;
      }
      .dl-prop-floor .dl-prop-title { margin-top: 0; }
      .dl-prop-body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--fg-muted); margin: 0; max-width: 62ch; }
      .dl-prop-tags {
        font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
        text-transform: uppercase; color: var(--fg-muted); opacity: .8; margin-top: 18px;
      }
      .dl-prop-side { text-align: right; }
      .dl-prop-side .dl-prop-tags { margin-top: 6px; }
      .dl-prop-pref { font-weight: 700; font-size: 13px; color: var(--fg); }
      .dl-prop-operate {
        display: flex; flex-direction: column;
        background: color-mix(in srgb, #B22122 30%, var(--bg-dark)); border-color: var(--accent);
      }
      .dl-prop-operate .dl-prop-body { color: var(--fg); }
      .dl-prop-oplist { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
      .dl-prop-opk { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: -0.005em; }
      .dl-prop-opi { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--fg-muted); margin-top: 4px; }
      .dl-prop-opfoot { margin-top: auto; padding-top: 28px; }

      @media (max-width: 860px) {
        .dl-prop-grid { grid-template-columns: 1fr; grid-template-areas: "entry" "b02" "b03" "f04" "f05" "operate"; }
        .dl-prop-entry, .dl-prop-floor { grid-template-columns: 1fr; gap: 12px; }
        .dl-prop-box, .dl-prop-entry { padding: 24px 22px; }
        .dl-prop-side { text-align: left; }
      }
    `}</style>
  </section>;


Object.assign(window, { Proposition });