// SystemExplainer.jsx — MKS + SDD two-halves section
// Sits directly under the hero/KPI bar. Explains the two halves of the
// acronym, then shows how they compose. Click either half to open its
// glossary entry in the Drawer.
function SystemExplainer({ onOpen }) {
  return (
    <section id="system" className="relative">
      <div className="max-w-[1280px] mx-auto px-8 py-16">
        <div className="mb-12">
          <div className="eyebrow">The acronym, unpacked</div>
          <h2 className="font-display text-[34px] font-medium mt-2 text-[color:var(--ink)]">
            <span className="font-serif italic font-normal">MKS+SDD</span> is two halves of one
            operating model — scheduling on one side, specifications on the other.
          </h2>
          <p className="mt-4 text-[14.5px] leading-relaxed text-[color:var(--ink-dim)] max-w-4xl">
            One tells you <em className="font-serif">when</em> work moves. The other tells you
            <em className="font-serif"> what</em> is being moved. You need both — scheduling
            without contracts produces drift; contracts without scheduling produce shelfware.
          </p>
        </div>

        {/* Two-half explainer */}
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-0 items-stretch">

          {/* MKS — scheduling */}
          <button
            onClick={() => onOpen({ type: "cycle", id: "product" })}
            className="group text-left principle-card p-8 hover:-translate-y-0.5 transition-transform flex flex-col">
            <div className="flex items-baseline gap-3 mb-5">
              <span className="font-mono text-[36px] font-semibold tracking-tight text-[color:var(--accent-ink)]">MKS</span>
              <span className="eyebrow">Scheduling half</span>
            </div>
            <h3 className="font-display text-[22px] font-medium text-[color:var(--ink)] leading-snug">
              Milestone Kanban Scheduling
            </h3>
            <p className="mt-3 font-serif italic text-[14.5px] text-[color:var(--ink-dim)] leading-snug">
              The reporting layer. Five cycles. Measured in half-days.
            </p>
            <p className="mt-4 text-[13px] leading-relaxed text-[color:var(--ink-dim)] flex-1">
              Reason's operating framework for product delivery. Five cycles
              — <span className="text-[color:var(--ink)]">Product</span>,
              {" "}<span className="text-[color:var(--ink)]">Customer</span>,
              {" "}<span className="text-[color:var(--ink)]">Engineering</span>,
              {" "}<span className="text-[color:var(--ink)]">QA</span>,
              {" "}<span className="text-[color:var(--ink)]">Ops</span>
              {" "}— each a grouping of Jira statuses. Lead Time is the sum across all five.
              Primary KPI: Lead Time Variance within 8% of the team's running average.
            </p>
            <div className="mt-5 pt-4 border-t border-[color:var(--line)] flex items-center gap-2">
              <span className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">Tells you</span>
              <span className="font-display text-[14px] font-medium text-[color:var(--ink)]">when work moves</span>
            </div>
          </button>

          {/* Plus-joint — shown on wide screens */}
          <div className="hidden lg:flex items-center justify-center px-4">
            <div className="relative w-10 h-10 flex items-center justify-center">
              <div className="absolute inset-0 rounded-full border border-[color:var(--line-strong)]" />
              <span className="relative font-display text-[18px] text-[color:var(--accent-ink)]">+</span>
            </div>
          </div>

          {/* SDD — specs */}
          <button
            onClick={() => onOpen({ type: "doc", id: "spec" })}
            className="group text-left principle-card p-8 hover:-translate-y-0.5 transition-transform flex flex-col">
            <div className="flex items-baseline gap-3 mb-5">
              <span className="font-mono text-[36px] font-semibold tracking-tight text-[color:var(--accent-ink)]">SDD</span>
              <span className="eyebrow">Specification half</span>
            </div>
            <h3 className="font-display text-[22px] font-medium text-[color:var(--ink)] leading-snug">
              Spec-Driven Development
            </h3>
            <p className="mt-3 font-serif italic text-[14.5px] text-[color:var(--ink-dim)] leading-snug">
              The contract layer. Versioned docs. PR-gated changes.
            </p>
            <p className="mt-4 text-[13px] leading-relaxed text-[color:var(--ink-dim)] flex-1">
              The workflow in which Specs are versioned contracts. Specs live in Confluence;
              changes are proposed as <span className="text-[color:var(--ink)]">Suggestions</span> through Confluence's
              native version control, and approved by the DM before they merge. PEs never edit a
              Spec directly. Every Card traces back to a Spec, every Spec traces back to an
              approved Milestone.
            </p>
            <div className="mt-5 pt-4 border-t border-[color:var(--line)] flex items-center gap-2">
              <span className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">Tells you</span>
              <span className="font-display text-[14px] font-medium text-[color:var(--ink)]">what is being moved</span>
            </div>
          </button>
        </div>

        {/* Composition strip */}
        <div className="mt-8 surface rounded-xl px-6 py-5 flex flex-col md:flex-row md:items-center gap-4">
          <div className="flex items-center gap-3 flex-shrink-0">
            <span className="font-mono text-[18px] font-semibold text-[color:var(--accent-ink)]">MKS</span>
            <span className="font-display text-[18px] text-[color:var(--ink-faint)]">+</span>
            <span className="font-mono text-[18px] font-semibold text-[color:var(--accent-ink)]">SDD</span>
            <span className="eyebrow ml-2">The combined system</span>
          </div>
          <p className="text-[13.5px] leading-relaxed text-[color:var(--ink-dim)] md:border-l md:border-[color:var(--line)] md:pl-5">
            Scheduling cycles track the clock; spec contracts track the substance. Together they
            produce the shape you'll see in the Board below — every status change is both a
            time measurement and a document handoff.
          </p>
        </div>
      </div>
    </section>
  );
}
window.SystemExplainer = SystemExplainer;