Three Column Icon Grid

export default function FeatureThreeColumnIcons() {
  const features = [
    {
      title: "Instant sync",
      body: "Every change lands on all devices the moment it happens, so nobody works from a stale copy.",
      accent: "text-indigo-600 dark:text-indigo-400",
      ring: "ring-indigo-200 dark:ring-indigo-500/30",
      bg: "bg-indigo-50 dark:bg-indigo-500/10",
      icon: (
        <path d="M4 12a8 8 0 0 1 13.66-5.66M20 12a8 8 0 0 1-13.66 5.66M17 4v3h-3M7 20v-3h3" />
      ),
    },
    {
      title: "Granular permissions",
      body: "Decide who can view, comment or edit at the level of a single folder, not just the whole workspace.",
      accent: "text-emerald-600 dark:text-emerald-400",
      ring: "ring-emerald-200 dark:ring-emerald-500/30",
      bg: "bg-emerald-50 dark:bg-emerald-500/10",
      icon: (
        <>
          <rect x="5" y="11" width="14" height="9" rx="2" />
          <path d="M8 11V8a4 4 0 0 1 8 0v3" />
        </>
      ),
    },
    {
      title: "Version history",
      body: "Roll back to any earlier state in a click and see exactly who changed what and when.",
      accent: "text-amber-600 dark:text-amber-400",
      ring: "ring-amber-200 dark:ring-amber-500/30",
      bg: "bg-amber-50 dark:bg-amber-500/10",
      icon: (
        <>
          <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
          <path d="M3 4v4h4" />
          <path d="M12 8v4l3 2" />
        </>
      ),
    },
    {
      title: "Search that finds it",
      body: "Type a phrase you half remember and the right document surfaces in milliseconds, ranked by relevance.",
      accent: "text-rose-600 dark:text-rose-400",
      ring: "ring-rose-200 dark:ring-rose-500/30",
      bg: "bg-rose-50 dark:bg-rose-500/10",
      icon: (
        <>
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </>
      ),
    },
    {
      title: "Automations",
      body: "Turn repetitive steps into rules that run themselves, from routing requests to nudging reviewers.",
      accent: "text-sky-600 dark:text-sky-400",
      ring: "ring-sky-200 dark:ring-sky-500/30",
      bg: "bg-sky-50 dark:bg-sky-500/10",
      icon: (
        <>
          <path d="M13 2 4 14h7l-1 8 9-12h-7z" />
        </>
      ),
    },
    {
      title: "Audit ready",
      body: "Export a complete, tamper evident log whenever compliance asks, formatted the way auditors expect.",
      accent: "text-violet-600 dark:text-violet-400",
      ring: "ring-violet-200 dark:ring-violet-500/30",
      bg: "bg-violet-50 dark:bg-violet-500/10",
      icon: (
        <>
          <path d="M9 12l2 2 4-4" />
          <path d="M12 3 5 6v6c0 4 3 7 7 9 4-2 7-5 7-9V6z" />
        </>
      ),
    },
  ];

  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
            Everything included
          </p>
          <h2 className="mt-4 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            The tools your team needs, without the sprawl
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
            Six capabilities that usually live in six separate apps, brought together so your day flows in one place.
          </p>
        </div>

        <ul className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <li
              key={feature.title}
              className="group rounded-2xl border border-zinc-200 bg-white p-6 transition hover:-translate-y-1 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:shadow-black/40"
            >
              <span
                className={`inline-flex h-12 w-12 items-center justify-center rounded-xl ring-1 ${feature.bg} ${feature.ring}`}
              >
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={1.6}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className={`h-6 w-6 ${feature.accent}`}
                >
                  {feature.icon}
                </svg>
              </span>
              <h3 className="mt-5 text-lg font-semibold text-zinc-900 dark:text-white">
                {feature.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                {feature.body}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}