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

const zeroImageBenefits = [
  'Metadata-only artifacts replace heavy images for ultra-fast delivery.',
  'Instant startup times accelerate workload initialization anywhere.',
  'Bandwidth consumption drops dramatically with minimal transfers.',
  'Deploy workloads globally across the ThreeFold Grid without friction.',
]

export function ComputeZeroImage() {
  return (
    <section className="relative overflow-hidden bg-linear-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-32 right-1/4 h-72 w-72 rounded-full bg-cyan-500/30 blur-[120px]" />
        <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-[140px]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,rgba(8,145,178,0.18),transparent_55%)]" />
      </div>
      <Container className="relative">
        <div className="grid items-center gap-12 lg:grid-cols-[0.85fr_1.15fr]">
          <div>
            <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
              Zero-Image Integration
            </Eyebrow>
            <SectionHeader as="h2" color="light" className="mt-6">
              Ultra-efficient deployments that move at the speed of metadata.
            </SectionHeader>
            <P color="lightSecondary" className="mt-6">
              Mycelium Compute integrates natively with Mycelium Storage&apos;s
              Zero-Image system. Deployments ship as metadata descriptors rather
              than bulky artifacts, enabling consistent, deterministic
              environments delivered on demand.
            </P>
          </div>
          <ul className="space-y-4 text-sm text-cyan-100">
            {zeroImageBenefits.map((benefit) => (
              <li
                key={benefit}
                className="flex items-start gap-3 rounded-3xl border border-cyan-400/20 bg-white/5 p-5 backdrop-blur-sm transition hover:border-cyan-200/40 hover:bg-white/10"
              >
                <span className="mt-1 inline-flex size-3 flex-none rounded-full bg-cyan-300 shadow-[0_0_12px_rgba(45,212,191,0.6)]" />
                <span className="leading-relaxed">{benefit}</span>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  )
}