Features Bento

import { BellRing, BookOpenCheck, Gauge, Radio, Workflow, type LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface FeaturesBentoProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  className?: string;
}

function Tile({
  icon: Icon,
  title,
  description,
  className,
  children,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
  className?: string;
  children?: ReactNode;
}) {
  return (
    <li className={cn("da-stroke group relative flex flex-col overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <div className="relative flex-1 overflow-hidden">{children}</div>
      <div className="p-6 pt-5">
        <div className="flex items-center gap-2">
          <Icon aria-hidden className="size-4 text-da-muted-fg" />
          <h3 className="text-[15px] font-medium">{title}</h3>
        </div>
        <p className="mt-1.5 text-sm leading-relaxed text-da-muted-fg">{description}</p>
      </div>
    </li>
  );
}

/** Tiny HTML illustrations — no images, fully themed by tokens. */
function RoutingArt() {
  const rows = [
    { from: "checkout-api", to: "Payments on-call", w: "w-40" },
    { from: "webhooks", to: "Platform team", w: "w-28" },
    { from: "search", to: "Search squad", w: "w-32" },
  ];
  return (
    <div aria-hidden className="flex h-full min-h-44 flex-col justify-center gap-2.5 px-6 pt-6">
      {rows.map((r, i) => (
        <div key={r.from} className="flex items-center gap-3 text-xs">
          <span className="da-stroke w-28 shrink-0 rounded-da-sm bg-da-surface-2 px-2 py-1 font-da-mono text-da-muted-fg">{r.from}</span>
          <span className={cn("h-px flex-1 bg-gradient-to-r from-da-border-strong via-da-primary to-da-border-strong", i === 0 && "opacity-100", i > 0 && "opacity-50")} />
          <span className={cn("da-stroke shrink-0 rounded-da-sm px-2 py-1", i === 0 ? "bg-da-accent text-da-accent-fg" : "bg-da-surface-2 text-da-muted-fg")}>{r.to}</span>
        </div>
      ))}
    </div>
  );
}

function StatusArt() {
  const days = Array.from({ length: 30 }, (_, i) => (i === 21 ? "bg-da-warning" : i === 9 ? "bg-da-danger" : "bg-da-success"));
  return (
    <div aria-hidden className="flex h-full min-h-44 flex-col justify-center gap-3 px-6 pt-6">
      <div className="flex items-center justify-between text-xs">
        <span className="font-medium">API</span>
        <span className="font-da-mono text-da-muted-fg">99.98% uptime</span>
      </div>
      <div className="flex gap-[3px]">
        {days.map((c, i) => (
          <span key={i} className={cn("h-7 flex-1 rounded-[2px] opacity-80", c)} />
        ))}
      </div>
      <div className="flex justify-between font-da-mono text-[10px] text-da-muted-fg">
        <span>30 days ago</span>
        <span>Today</span>
      </div>
    </div>
  );
}

function MetricArt() {
  return (
    <div aria-hidden className="flex h-full min-h-44 flex-col justify-end px-6 pt-6">
      <p className="font-da-mono text-xs text-da-muted-fg">MTTR · last 90 days</p>
      <p className="mt-1 text-4xl font-semibold tracking-da-display">
        14m <span className="text-da-muted-fg">03s</span>
      </p>
      <p className="mt-1 text-xs text-da-success">↓ 62% since Tracewise</p>
    </div>
  );
}

export function FeaturesBento({
  eyebrow = "Platform",
  title = "Everything an incident needs, nothing it doesn't",
  description = "From the first alert to the published postmortem, Tracewise keeps responders, stakeholders and customers on the same page.",
  className,
}: FeaturesBentoProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)} aria-labelledby="features-bento-title">
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="features-bento-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-[17px] leading-relaxed text-da-muted-fg">{description}</p>
        </div>

        <ul className="mt-14 grid gap-4 md:grid-cols-6">
          <Tile
            icon={Workflow}
            title="Smart alert routing"
            description="Route by service ownership, severity and time zone. Deduplicate noisy alerts before they wake anyone up."
            className="md:col-span-4"
          >
            <RoutingArt />
          </Tile>
          <Tile icon={Gauge} title="Measured, not guessed" description="MTTA, MTTR and toil per team, out of the box." className="md:col-span-2">
            <MetricArt />
          </Tile>
          <Tile icon={Radio} title="Status pages" description="Public and private pages that update themselves from incident state." className="md:col-span-3">
            <StatusArt />
          </Tile>
          <Tile icon={BellRing} title="On-call that's fair" description="Rotations, overrides and follow-the-sun schedules with automatic fairness reports." className="md:col-span-3">
            <div aria-hidden className="grid h-full min-h-44 grid-cols-7 content-center gap-1.5 px-6 pt-6">
              {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
                <div key={i} className="flex flex-col items-center gap-1.5">
                  <span className="font-da-mono text-[10px] text-da-muted-fg">{d}</span>
                  <span className={cn("h-16 w-full rounded-da-sm", i < 3 ? "bg-da-primary/70" : i < 5 ? "bg-da-primary/35" : "bg-da-muted")} />
                </div>
              ))}
            </div>
          </Tile>
          <Tile
            icon={BookOpenCheck}
            title="Postmortems in minutes"
            description="Tracewise AI drafts a timeline, impact summary and follow-ups from the war-room channel. You edit, it files the tickets."
            className="md:col-span-6"
          />
        </ul>
      </div>
    </section>
  );
}

export default FeaturesBento;