import {
  AdjustmentsHorizontalIcon,
  GlobeAltIcon,
  BanknotesIcon,
} from '@heroicons/react/24/outline'

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

const coreFeatures = [
  {
    name: 'Deterministic GPU Allocation',
    description:
      'Reserve the GPU type you need and get exactly that, every time.',
    icon: AdjustmentsHorizontalIcon,
  },
  {
    name: 'Multi-Topology Deployment',
    description:
      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
    icon: GlobeAltIcon,
  },
  {
    name: 'Transparent Cost Structure',
    description:
      'No inflated pricing, no hidden fees, no marketplace brokerage.',
    icon: BanknotesIcon,
  },
]

export function GpuOverview() {
  return (
    <section className="bg-gray-950 py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
            PLATFORM OVERVIEW
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
            Core Features
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            The Mycelium GPU layer provides predictable, sovereign acceleration
            — without arbitrary limits or hidden economics.
          </P>
        </div>

        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {coreFeatures.map((feature) => (
            <div
              key={feature.name}
              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
            >
              <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
              </div>
              <h3 className="text-lg font-semibold text-white">
                {feature.name}
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-gray-300">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}