Features Alternating

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesAlternatingProps {
  eyebrow?: string;
  title?: string;
  className?: string;
}

function RoutingMock() {
  const rows = [
    { src: "Datadog", rule: "service = payments", to: "Payments on-call", tone: "bg-da-danger" },
    { src: "Sentry", rule: "level ≥ error", to: "Web team", tone: "bg-da-warning" },
    { src: "Grafana", rule: "env = staging", to: "Slack only", tone: "bg-da-muted-fg" },
  ];
  return (
    <div className="da-stroke rounded-da-lg bg-da-surface p-4 text-da-surface-fg shadow-da-lg">
      <p className="font-da-mono text-[11px] text-da-muted-fg">routing-rules.yaml</p>
      <ul className="mt-3 space-y-2">
        {rows.map((r) => (
          <li key={r.src} className="da-stroke flex items-center gap-3 rounded-da-md bg-da-bg px-3 py-2.5 text-[13px]">
            <span className={cn("size-2 rounded-full", r.tone)} />
            <span className="w-16 font-medium">{r.src}</span>
            <span className="hidden flex-1 font-da-mono text-[12px] text-da-muted-fg sm:block">{r.rule}</span>
            <ArrowRight className="size-3.5 text-da-muted-fg" />
            <span className="ml-auto rounded-da-sm bg-da-accent px-1.5 py-0.5 text-[12px] text-da-accent-fg sm:ml-0">{r.to}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function ScheduleMock() {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  const who = ["MC", "MC", "JO", "JO", "AK", "AK", "AK"];
  return (
    <div className="da-stroke rounded-da-lg bg-da-surface p-4 text-da-surface-fg shadow-da-lg">
      <div className="flex items-center justify-between">
        <p className="text-[13px] font-medium">Payments · Primary</p>
        <p className="font-da-mono text-[11px] text-da-muted-fg">Week 42</p>
      </div>
      <div className="mt-4 grid grid-cols-7 gap-1.5">
        {days.map((d, i) => (
          <div key={d} className="text-center">
            <p className="text-[11px] text-da-muted-fg">{d}</p>
            <p
              className={cn(
                "mt-1.5 rounded-da-sm py-3 font-da-mono text-[11px] font-medium",
                who[i] === "MC" && "bg-da-primary text-da-primary-fg",
                who[i] === "JO" && "bg-da-accent text-da-accent-fg",
                who[i] === "AK" && "bg-da-muted text-da-fg",
              )}
            >
              {who[i]}
            </p>
          </div>
        ))}
      </div>
      <p className="mt-4 text-[12px] text-da-muted-fg">Night pages this month: MC 3 · JO 2 · AK 3 — balanced ✓</p>
    </div>
  );
}

function PostmortemMock() {
  return (
    <div className="da-stroke rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-lg">
      <p className="inline-flex items-center gap-1.5 rounded-da-pill bg-da-accent px-2 py-0.5 text-[11px] font-medium text-da-accent-fg">
        ✦ Drafted by Tracewise AI
      </p>
      <p className="mt-3 text-[15px] font-medium">Postmortem · Checkout 5xx (INC-2481)</p>
      <div className="mt-3 space-y-2 text-[13px] text-da-muted-fg">
        <p>
          <span className="font-medium text-da-fg">Impact.</span> 3.1% of checkout requests failed for 9 minutes (14:02–14:11 UTC).
        </p>
        <p>
          <span className="font-medium text-da-fg">Root cause.</span> Deploy a41f9c2 lowered the DB pool size from 50 to 5.
        </p>
        <p>
          <span className="font-medium text-da-fg">Action items.</span> Add a pool-size guard to CI · Alert on pool saturation.
        </p>
      </div>
    </div>
  );
}

const ROWS = [
  {
    kicker: "Route",
    title: "Every alert lands with the one person who can fix it",
    body: "Write routing rules on any field of the payload. Tracewise dedupes, groups and escalates until someone acknowledges.",
    link: { label: "Explore alert routing", href: "#routing" },
    Mock: RoutingMock,
  },
  {
    kicker: "Share",
    title: "On-call that doesn’t burn out your best engineers",
    body: "Rotations, overrides and swap requests in two clicks, with a fairness report that tracks night pages per person.",
    link: { label: "See scheduling", href: "#schedules" },
    Mock: ScheduleMock,
  },
  {
    kicker: "Learn",
    title: "Postmortems that write themselves",
    body: "The timeline, chat, deploys and graphs become a structured draft. Your team edits, assigns follow-ups and moves on.",
    link: { label: "Read a sample postmortem", href: "#postmortems" },
    Mock: PostmortemMock,
  },
];

/** Three alternating rows of copy + HTML product mock-up, zig-zagging on desktop. */
export function FeaturesAlternating({ eyebrow = "How it works", title = "Built for the worst 30 minutes of your week", className }: FeaturesAlternatingProps) {
  return (
    <section aria-labelledby="features-alt-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="features-alt-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <div className="mt-16 space-y-20 lg:space-y-28">
          {ROWS.map((r, i) => (
            <article key={r.kicker} className="grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
              <div className={cn(i % 2 === 1 && "lg:order-2")}>
                <p className="text-sm font-medium text-da-accent-fg">
                  0{i + 1} · {r.kicker}
                </p>
                <h3 className="mt-3 text-2xl leading-tight font-semibold tracking-da-display text-balance sm:text-3xl">{r.title}</h3>
                <p className="mt-4 text-[16px] leading-relaxed text-da-muted-fg">{r.body}</p>
                <a
                  href={r.link.href}
                  className="da-focus da-transition group mt-6 inline-flex items-center gap-1 rounded-da-sm text-sm font-medium hover:text-da-accent-fg"
                >
                  {r.link.label}
                  <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
                </a>
              </div>
              <div aria-hidden className={cn("relative", i % 2 === 1 && "lg:order-1")}>
                <div className="absolute -inset-4 rounded-[24px] bg-da-surface-2" />
                <div className="relative">
                  <r.Mock />
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

export default FeaturesAlternating;