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="w-full max-w-8xl mx-auto bg-transparent">

      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
      <div className="w-full border-t border-l border-r border-gray-200" />
      
      {/* ✅ subtle light-mode background accents */}
      <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-20 blur-3xl"
        />
        <CircleBackground
          color="#22d3ee"
          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
        />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
      </div>

      <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-200">
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
            Mycelium Compute
          </Eyebrow>

          <SectionHeader
            as="h2"
            color="dark"
            className="mt-6 font-medium text-gray-900"
          >
            Deterministic compute fabric for autonomous workloads.
          </SectionHeader>

          <P color="secondary" className="mt-6 text-gray-600">
            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="secondary" className="mt-4 text-gray-600">
            Deterministic. Self-managing. Stateless by design.
          </P>
        </div>

        {/* ✅ Light Mode Cards */}
        <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-gray-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />

              <div className="relative">
                <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">
                  {card.label}
                </p>
                <h3 className="mt-4 text-xl font-semibold text-gray-900">
                  {card.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-600">
                  {card.copy}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
       {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b  border-gray-200" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
    </section>
  )
}
