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

const focusAreas = [
  {
    label: 'Overview',
    title: 'Decentralized Kubernetes on the ThreeFold Grid',
    description:
      'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
  },
  {
    label: 'Core Concept',
    title: 'Sovereign, self-managing operations',
    description:
      'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
  },
  {
    label: 'Developer Experience',
    title: 'K3s-native workflows with full control',
    description:
      'Provision multi-master clusters, govern residency, and observe node health from a single programmable control plane.',
  },
]

export function CloudOverview() {
  return (
    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
      <div className="pointer-events-none absolute inset-0">
        <CircleBackground
          color="#06b6d4"
          className="absolute left-1/2 top-full h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 opacity-30 blur-3xl"
        />
        <CircleBackground
          color="#22d3ee"
          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
        />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.18),_transparent_55%)]" />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>
            Platform Overview
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
            A decentralized cloud that operates itself.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold
            Grid with cryptographic certainty. Networking, storage, and
            orchestration are all built-in so developers can deploy critical
            workloads without wrestling infrastructure.
          </P>
          <P color="lightSecondary" className="mt-6">
            Declarative, sovereign, and ready for production workloads anywhere.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {focusAreas.map((item) => (
            <div
              key={item.title}
              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/15 opacity-0 transition group-hover:opacity-100" />
              <div className="relative">
                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-300">
                  {item.label}
                </Small>
                <div className="mt-4 text-lg font-semibold text-white">
                  {item.title}
                </div>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}