import {
  CodeBracketSquareIcon,
  CubeTransparentIcon,
  LockClosedIcon,
  Squares2X2Icon,
} from '@heroicons/react/24/outline'

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

const overviewCards = [
  {
    label: 'Overview',
    title: 'Unified GPU acceleration across the ThreeFold Grid',
    description:
      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
  },
  {
    label: 'Core Concept',
    title: 'Sovereign intelligence layer',
    description:
      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
  },
]

const principles = [
  {
    name: 'No Silos',
    description: 'Every GPU resource is accessible through a single interface.',
    icon: Squares2X2Icon,
  },
  {
    name: 'No Intermediaries',
    description: 'Direct access to hardware without centralized brokers.',
    icon: CubeTransparentIcon,
  },
  {
    name: 'Verifiable Power',
    description: 'Every GPU cycle is attested and cryptographically verified.',
    icon: LockClosedIcon,
  },
  {
    name: 'Code-Orchestrated',
    description: 'Smart contracts and APIs automate allocation and policy.',
    icon: CodeBracketSquareIcon,
  },
]

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">
            The sovereign acceleration layer for intelligent workloads.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            Mycelium GPU makes distributed acceleration feel like one machine.
            Harness global GPUs with deterministic performance, transparent
            costs, and end-to-end verification.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          {overviewCards.map((card) => (
            <div
              key={card.title}
              className="group relative overflow-hidden 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]"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
              <div className="relative">
                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
                  {card.label}
                </Small>
                <h3 className="mt-4 text-lg font-semibold text-white">
                  {card.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {card.description}
                </p>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {principles.map((principle) => (
            <div
              key={principle.name}
              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left 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">
                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
              </div>
              <h3 className="text-base font-semibold text-white">
                {principle.name}
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-gray-300">
                {principle.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}