const features = [
  {
    step: '01',
    title: 'Build',
    description:
      'Native support for 35+ frameworks. Push your code and Vertex handles the build pipeline, caching, and dependencies automatically.',
    icon: <path d="M8 6L2 12l6 6M16 6l6 6-6 6" strokeWidth="1.5" fill="none" />,
  },
  {
    step: '02',
    title: 'Preview',
    description:
      'Every push gets a live preview URL. Share it, comment on it, and ship with confidence — no environment drift, no surprises.',
    icon: (
      <>
        <rect
          x="3"
          y="4"
          width="18"
          height="14"
          rx="2"
          strokeWidth="1.5"
          fill="none"
        />
        <path d="M9 21h6M12 18v3" strokeWidth="1.5" fill="none" />
      </>
    ),
  },
  {
    step: '03',
    title: 'Ship',
    description:
      'Deploy to a global edge network in seconds. Instant rollbacks, zero-downtime releases, and traffic that lands close to every user.',
    icon: (
      <path
        d="M4 13l1.5-5.5A2 2 0 0 1 7.4 6h9.2a2 2 0 0 1 1.9 1.5L20 13M4 13v5h16v-5M4 13h16M8 17h.01M16 17h.01"
        strokeWidth="1.5"
        fill="none"
      />
    ),
  },
];

export function Features() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-24">
      <div className="max-w-2xl">
        <p className="font-mono text-xs uppercase tracking-[0.2em] text-white/40">
          The workflow
        </p>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          From commit to production, without the ceremony.
        </h2>
      </div>

      <div className="mt-14 grid gap-px overflow-hidden rounded-2xl border border-white/10 bg-white/10 md:grid-cols-3">
        {features.map((feature) => (
          <div
            key={feature.step}
            className="group flex flex-col bg-black p-8 transition-colors hover:bg-white/[0.03]"
          >
            <div className="flex items-center justify-between">
              <svg
                width="28"
                height="28"
                viewBox="0 0 24 24"
                stroke="currentColor"
                className="text-white/80"
                aria-hidden="true"
              >
                {feature.icon}
              </svg>
              <span className="font-mono text-xs text-white/30">
                {feature.step}
              </span>
            </div>
            <h3 className="mt-6 text-xl font-medium">{feature.title}</h3>
            <p className="mt-3 text-sm leading-6 text-white/50">
              {feature.description}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}