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

const differentiators = [
  {
    title: 'Unified Fabric',
    description:
      'Transforms fragmented GPU resources into a single, standard interface accessible anywhere.',
  },
  {
    title: 'Sovereign Control',
    description:
      'Operate without vendor lock-in or geographic restrictions—govern policies entirely through code.',
  },
  {
    title: 'Code-Driven Orchestration',
    description:
      'APIs and smart contracts automate allocation, attestation, and lifecycle management.',
  },
  {
    title: 'Deterministic Performance',
    description:
      'Guaranteed GPU allocation delivers the compute you reserve with consistent performance characteristics.',
  },
]

const costEfficiency = [
  'Transparent pricing with no hidden fees.',
  'Pay only for the GPU cycles you consume.',
  'Global optimization locates the most cost-effective nodes.',
  'Avoid premium lock-in from centralized providers.',
]

export function GpuDifferentiators() {
  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">
            Key Differentiators
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6">
            GPU acceleration with sovereignty and clarity.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            Mycelium GPU delivers verifiable access to power when you need it.
            Control stays in your hands, from allocation policies to cost
            structure.
          </P>
        </div>
        <div className="mt-16 grid gap-8 md:grid-cols-2">
          {differentiators.map((item) => (
            <div
              key={item.title}
              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
            >
              <h3 className="text-lg font-semibold text-white">{item.title}</h3>
              <p className="mt-4 text-sm leading-relaxed text-gray-300">
                {item.description}
              </p>
            </div>
          ))}
        </div>
        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
          <h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
          <p className="mt-4 text-sm leading-relaxed text-gray-300">
            Transparent economics makes capacity planning simple while keeping
            budgets predictable.
          </p>
          <ul className="mt-6 space-y-3 text-sm text-gray-300">
            {costEfficiency.map((item) => (
              <li
                key={item}
                className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
              >
                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  )
}