import { Container } from '@/components/Container'
import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'

const featureGroups = [
  {
    title: 'Self-Managing Infrastructure',
    description:
      'Scaling, healing, and failover happen automatically, no manual intervention.',
  },
  {
    title: 'Secure, Stateless Execution',
    description:
      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
  },
  {
    title: 'Zero-Image Delivery',
    description:
      'Deploy workloads using metadata instead of large container images for instant launches.',
  },
  {
    title: 'Global Placement Control',
    description:
      'Choose where workloads run, on your hardware or across the decentralized grid.',
  },
]

export function ComputeFeatures() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
            Core Features
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            Precision infrastructure that verifies itself.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Every layer is designed for determinism, from how workloads are
            declared to the way they scale, protect, and govern themselves on
            the grid.
          </P>
        </div>

        <div className="mt-16 grid gap-8 md:grid-cols-2">
          {featureGroups.map((feature) => (
            <div
              key={feature.title}
              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
            >
              <div>
                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
                  Feature
                </Small>
                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
                  {feature.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-600">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}