import { Container } from '@/components/shared/container';
import { SectionHeading } from '@/components/shared/section-heading';

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 FeaturesSection() {
  return (
    <section>
      <Container className="py-24">
        <SectionHeading
          eyebrow="The workflow"
          title="From commit to production, without the ceremony."
        />

        <div className="mt-14 grid gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.step}
              className="group flex flex-col bg-background p-8 transition-colors hover:bg-foreground/[0.03]"
            >
              <div className="flex items-center justify-between">
                <svg
                  width="28"
                  height="28"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  className="text-foreground/80"
                  aria-hidden="true"
                >
                  {feature.icon}
                </svg>
                <span className="font-mono text-xs text-foreground/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-foreground/50">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}