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

const integrationPoints = [
  'Unified Mycelium networking provides secure access to GPU nodes.',
  'Zero-trust security model extends to GPU operations automatically.',
  'Quantum-safe storage available directly to GPU workloads.',
  'Native Kubernetes support exposes GPUs through familiar resources.',
]

const yamlExample = `apiVersion: apps/v1
kind: Deployment
metadata:
  name: gpu-workload
spec:
  replicas: 1
  selector:
    matchLabels:
      app: gpu-compute
  template:
    metadata:
      labels:
        app: gpu-compute
    spec:
      containers:
        - name: gpu-compute
          image: tensorflow/tensorflow:latest-gpu
          resources:
            limits:
              nvidia.com/gpu: 1
          env:
            - name: MYCELIUM_GPU_REGION
              value: "auto"`

export function GpuIntegration() {
  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">
            Cloud Integration
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6">
            Seamless with Mycelium Cloud infrastructure.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            GPU workloads plug directly into the same mesh that powers Mycelium
            Cloud. Networking, security, and storage policies flow with every
            deployment.
          </P>
        </div>
        <div className="mt-16 grid gap-10 lg:grid-cols-2">
          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
            <h3 className="text-lg font-semibold text-white">
              Platform alignment
            </h3>
            <ul className="space-y-3 text-sm text-gray-300">
              {integrationPoints.map((point) => (
                <li
                  key={point}
                  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>{point}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
            <h3 className="text-lg font-semibold text-white">
              Kubernetes deployment example
            </h3>
            <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
              <code>{yamlExample}</code>
            </pre>
          </div>
        </div>
      </Container>
    </section>
  )
}