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

const overviewCards = [
  {
    label: 'Overview',
    title: 'Built for sovereign, verifiable operations',
    copy: `Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it keeps environments transparent, verifiable, and free from manual intervention.`,
  },
  {
    label: 'Core Concept',
    title: 'Deterministic compute fabric',
    copy: `Every workload deploys exactly as intended through cryptographic verification—eliminating tampering and configuration drift while maintaining complete operational autonomy.`,
  },
]

export function ComputeOverview() {
  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 -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl sm:opacity-40"
        />
        <CircleBackground
          color="#22d3ee"
          className="absolute bottom-[-18rem] left-[15%] 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.1),_transparent_55%)]" />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
            Mycelium Compute
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
            Deterministic compute fabric for autonomous workloads.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            Mycelium Compute delivers predictable, sovereign performance—free
            from lock-in and drift. Deploy any workload with cryptographic
            precision, knowing the platform verifies, scales, and heals itself
            on your behalf.
          </P>
          <P color="lightSecondary" className="mt-4 italic">
            Deterministic. Self-managing. Stateless by design.
          </P>
        </div>
        <div className="mt-16 grid gap-6 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.03] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/40 hover:bg-white/[0.06]"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/10 opacity-0 transition group-hover:opacity-100" />
              <div className="relative">
                <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-300">
                  {card.label}
                </p>
                <h3 className="mt-4 text-xl font-semibold text-white">
                  {card.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {card.copy}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}