import { Container } from '@/components/Container'
import { Eyebrow, H3, CT } from '@/components/Texts'
import {
  BoltIcon,
  BanknotesIcon,
  GlobeAltIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/solid'

const benefits = [
  {
    name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
    icon: BoltIcon,
  },
  {
    name: 'Transparent cost (no markup, no surprise billing)',
    icon: BanknotesIcon,
  },
  {
    name: 'Run anywhere – cloud, on-prem, edge, home lab',
    icon: GlobeAltIcon,
  },
  {
    name: 'Your data never leaves your control',
    icon: ShieldCheckIcon,
  },
]

export function GpuDesign() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        {/* Header */}
        <div className="mx-auto max-w-3xl sm:text-center">
          <Eyebrow>CORE VALUE</Eyebrow>
          <H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>

        </div>

        {/* Key Benefits */}
        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
            {benefits.map((benefit) => (
              <div key={benefit.name} className="relative pl-12">
                <benefit.icon
                  className="absolute left-0 top-1 size-6 text-cyan-600"
                  aria-hidden="true"
                />
                <CT className="font-semibold text-gray-900">
                  {benefit.name}
                </CT>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
}