import { Eyebrow, H3, P } from '@/components/Texts'
import {
  CpuChipIcon,
  LockClosedIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/solid'

export function GpuArchitecture() {
  return (
    <section id="gpu-architecture" 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-100"></div>
      <div className="w-full border-t border-l border-r border-gray-100" />

      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-100">

        {/* ✅ LEFT — Title + Intro text */}
        <div className="max-w-xl">
          <Eyebrow>ARCHITECTURE</Eyebrow>

          <H3 className="mt-6">
            How It Works
          </H3>

          <P className="mt-6 text-lg text-gray-600">
            Mycelium GPU architecture ensures secure, sovereign computation using
            hardware you trust. Nodes communicate through encrypted mesh networking,
            and access is guaranteed through verifiable reservations.
          </P>
        </div>

        {/* ✅ RIGHT — items stacked with cyan dividers */}
        <div className="space-y-8">

          {/* 1 — Sovereign Compute Nodes */}
          <div>
            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
              <CpuChipIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Sovereign Compute Nodes
            </h3>
            <p className="mt-2 text-gray-600 max-w-2xl">
              GPUs run only on hardware you control, eliminating reliance on centralized clouds.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-500/50" />
          </div>

          {/* 2 — Encrypted Mesh Networking */}
          <div>
            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
              <LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Encrypted Mesh Networking
            </h3>
            <p className="mt-2 text-gray-600 max-w-2xl">
              Nodes form private, encrypted tunnels to workloads, no public exposure required.
            </p>
            <div className="mt-8 h-px w-full bg-cyan-500/50" />
          </div>

          {/* 3 — Reservation & Verification Layer */}
          <div>
            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
              <ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
              Reservation & Verification Layer
            </h3>
            <p className="mt-2 text-gray-600 max-w-2xl">
              Cryptographically enforced reservations guarantee GPU availability
              with deterministic behavior across workloads.
            </p>
          </div>
        </div>
      </div>

      {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </section>
  )
}