Tabbed Feature Showcase with Code Preview

<section class="z-10 sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl mr-auto ml-auto pt-20 pr-4 pb-16 pl-4 relative">

  <!-- MATCH PLAN: inner background wrapper -->
  <div class="relative overflow-hidden rounded-3xl ring-1 ring-white/10 bg-neutral-950 backdrop-blur">
    <!-- Subtle decor (inside the wrapper, like plan) -->
    <div class="pointer-events-none absolute -left-24 -top-24 h-72 w-72 rounded-full bg-white/5 blur-3xl"></div>
    <div class="pointer-events-none absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-white/[0.06] blur-3xl"></div>

    <!-- Header -->
    <div class="mb-10 sm:p-10 pt-6 pr-6 pb-0 pl-6">
      <div class="flex items-center gap-2 mb-5">
        <span class="inline-flex items-center gap-2 text-[11px] text-zinc-300/90 bg-white/5 w-fit border-white/10 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
          // FEATURE DEEP DIVE
        </span>
      </div>
      <h2 class="text-5xl md:text-6xl font-semibold tracking-tight text-white">Automation playbooks</h2>
      <p class="mt-4 text-lg text-white/70 max-w-2xl">
        Build, test and run safe automations that turn alerts into fixes, not frantic rewrites.
      </p>
    </div>

    <!-- Tabs -->
    <div class="relative mb-10 sm:px-10 px-6">
      <div class="flex md:w-auto gap-3 w-max" id="pb-tabs">
        <button data-key="collab" class="pb-tab inline-flex items-center rounded-xl border border-white/10 bg-white/[0.06] px-4 py-2.5 text-sm text-white ring-1 ring-white/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">Real-time collaboration</button>
        <button data-key="templates" class="pb-tab inline-flex items-center rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm text-zinc-300 hover:text-white hover:bg-white/[0.06]">Parameterized templates</button>
        <button data-key="safety" class="pb-tab inline-flex items-center rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm text-zinc-300 hover:text-white hover:bg-white/[0.06]">Safety and approvals</button>
        <button data-key="hooks" class="pb-tab inline-flex items-center rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm text-zinc-300 hover:text-white hover:bg-white/[0.06]">Observability hooks</button>
        <button data-key="triggers" class="pb-tab inline-flex items-center rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm text-zinc-300 hover:text-white hover:bg-white/[0.06]">Triggers and scheduling</button>
      </div>
    </div>

    <!-- Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 items-stretch">
      <!-- LEFT: Copy -->
      <div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
        <div class="max-w-xl">
          <h3 class="md:text-2xl text-2xl font-semibold text-white tracking-tight mb-3" id="pb-title">Real-time collaboration</h3>
          <p id="pb-tagline" class="text-[12px] tracking-tight text-zinc-200 uppercase mb-4">EDIT SCRIPTS TOGETHER WITH LIVE CURSORS AND VERSIONED SAVES.</p>
          <p id="pb-p1" class="text-white/80 text-sm leading-relaxed">Edit remediation scripts together in real time with live cursors, inline comments and versioned saves.</p>
          <p id="pb-p2" class="text-white/80 text-sm leading-relaxed mt-4">Everyone on call sees changes immediately so your team can author and run fixes together during an incident.</p>

          <a id="pb-cta" href="#learn-collab" class="mt-6 inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 hover:bg-zinc-100 h-11 px-5 ring-1 ring-white/20 text-sm font-medium transition shadow-[0_8px_24px_-8px_rgba(255,255,255,0.25)]">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- RIGHT: Code preview card -->
      <div class="sm:p-10 pt-0 pr-6 pb-6 pl-6">
        <div class="relative">
          <div class="overflow-hidden ring-white/10 ring-1 rounded-3xl relative bg-white/[0.04] backdrop-blur">
            <!-- header bar -->
            <div class="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-gradient-to-br from-white/5 to-white/[0.03]">
              <div class="flex items-center gap-2">
                <span class="h-2.5 w-2.5 rounded-full bg-white/30"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-white/20"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-white/10"></span>
              </div>
              <div class="flex items-center gap-2 text-[12px] text-zinc-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code-2">
                  <path d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35" class=""></path>
                  <path d="M14 2v5a1 1 0 0 0 1 1h5" class=""></path>
                  <path d="m5 16-3 3 3 3" class=""></path>
                  <path d="m9 22 3-3-3-3" class=""></path>
                </svg>
                recover-workers.playbook
              </div>
            </div>
            <!-- code body -->
            <div class="relative">
              <div class="pointer-events-none absolute inset-0 opacity-[0.10] bg-gradient-to-b from-white/10 via-transparent to-white/5"></div>
              <pre id="pb-code" class="text-[12px] md:text-[13px] leading-relaxed whitespace-pre-wrap text-white/80 font-mono p-5">// shared live script
const s = Runlyx.Script.open("recover-workers");

s.apply("restartWorkers()", { user: "jordan" });
s.comment(2, "Check CPU before restart");
s.save("v1.2.1", "Add safety check");</pre>
            </div>
          </div>
          <!-- soft glow (neutral) -->
          <div class="pointer-events-none absolute -inset-2 rounded-[26px] bg-gradient-to-b from-white/10 via-transparent to-transparent blur-2xl"></div>
        </div>
      </div>
    </div>

    <!-- Behavior -->
    <script>
      (function () {
        const tabs = document.querySelectorAll('.pb-tab');
        const title = document.getElementById('pb-title');
        const tagline = document.getElementById('pb-tagline');
        const p1 = document.getElementById('pb-p1');
        const p2 = document.getElementById('pb-p2');
        const code = document.getElementById('pb-code');
        const cta = document.getElementById('pb-cta');

        const data = {
          collab: {
            title: 'Real-time collaboration',
            tagline: 'EDIT SCRIPTS TOGETHER WITH LIVE CURSORS AND VERSIONED SAVES.',
            p1: 'Edit remediation scripts together in real time with live cursors, inline comments and versioned saves.',
            p2: 'Everyone on call sees changes immediately so your team can author and run fixes together during an incident.',
            code: `// shared live script
const s = Runlyx.Script.open("recover-workers");

s.apply("restartWorkers()", { user: "jordan" });
s.comment(2, "Check CPU before restart");
s.save("v1.2.1", "Add safety check");`,
            href: '#learn-collab'
          },
          templates: {
            title: 'Parameterized templates',
            tagline: 'REUSABLE PLAYBOOKS WITH TYPED INPUTS AND SANE DEFAULTS.',
            p1: 'Publish reusable playbooks with typed inputs and sane defaults so teams can standardize fixes.',
            p2: 'Validate inputs before execution and stamp every run with immutable parameters for auditing.',
            code: `// template inputs
type Params = { service: "api" | "worker", region: string, scale: number }

const s = Runlyx.Template.use<Params>("scale-service");
s.run({ service: "worker", region: "us-east-1", scale: 3 });`,
            href: '#learn-templates'
          },
          safety: {
            title: 'Safety and approvals',
            tagline: 'GUARDRAILS, DRY RUNS, AND MULTI-STEP APPROVALS.',
            p1: 'Protect production with guardrails: dry runs, blast-radius checks and multi-step approvals.',
            p2: 'Require reviewers on sensitive playbooks and log every decision for compliance.',
            code: `// safety first
const p = Runlyx.Playbook("db-failover");
p.requireApproval({ teams: ["SRE"], min: 2 });
p.dryRun().assert("replicasHealthy > 2");
p.execute();`,
            href: '#learn-safety'
          },
          hooks: {
            title: 'Observability hooks',
            tagline: 'METRICS, LOGS AND TRACES TO INFORM EVERY STEP.',
            p1: 'Connect metrics, logs and traces to inform each step and auto-halt when signals degrade.',
            p2: 'Enrich runs with incident context and stream annotated events back to your dashboards.',
            code: `// observability-aware run
const g = Grafana.query("cpu_usage{service='api'}");
if (g.max() > 0.85) alert("CPU high: pausing rollout");

Runlyx.emit("playbook.step", { name: "scaleUp", value: 2 });`,
            href: '#learn-hooks'
          },
          triggers: {
            title: 'Triggers and scheduling',
            tagline: 'KICK OFF PLAYBOOKS FROM ALERTS, WEBHOOKS OR A CRON.',
            p1: 'Kick off playbooks from alerts, webhooks or a cron — with idempotency and concurrency limits.',
            p2: 'Throttle noisy signals and ensure only one remediation runs per target at a time.',
            code: `// triggers
Runlyx.onAlert("PagerDuty:CPUHigh", (e) => remediate(e.target));
Runlyx.schedule("0 */2 * * *", "db-maintenance");
Runlyx.lock("service:api").run("restart-workers");`,
            href: '#learn-triggers'
          }
        };

        function setActive(key) {
          const cfg = data[key];
          title.textContent = cfg.title;
          tagline.textContent = cfg.tagline;
          p1.textContent = cfg.p1;
          p2.textContent = cfg.p2;
          code.textContent = cfg.code;
          cta.setAttribute('href', cfg.href);

          tabs.forEach(b => {
            const active = b.getAttribute('data-key') === key;
            b.classList.toggle('bg-white/[0.06]', active);
            b.classList.toggle('text-white', active);
            b.classList.toggle('ring-1', active);
            b.classList.toggle('ring-white/20', active);
            b.classList.toggle('text-zinc-300', !active);
            b.classList.toggle('bg-white/[0.04]', !active);
          });
        }

        tabs.forEach(b => b.addEventListener('click', () => setActive(b.getAttribute('data-key'))));
        setActive('collab');
        if (window.lucide && window.lucide.createIcons) lucide.createIcons();
      })();
    </script>
  </div>
</section>