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

const architectureSections = [
  {
    title: 'Distributed GPU Mesh',
    description:
      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
    bullets: [
      'GPU nodes distributed globally for on-demand acceleration.',
      'Mycelium network provides encrypted peer-to-peer connectivity.',
      'Smart contract orchestration allocates and governs resources.',
      'Real-time monitoring tracks utilization and health.',
    ],
  },
  {
    title: 'Performance Characteristics',
    description:
      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
    bullets: [
      'Edge-to-core deployment flexibility for every workload profile.',
      'Adaptive intelligence optimizes allocation automatically.',
      'Deterministic performance guarantees availability when booked.',
      'Transparent cost tracking for every GPU cycle consumed.',
    ],
  },
]

export function GpuArchitecture() {
  return (
    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>
            Technical Architecture
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            A peer-to-peer mesh purpose-built for acceleration.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
            networking, smart contract orchestration, and transparent monitoring
            ensure your workloads receive precisely the power they request.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          {architectureSections.map((section) => (
            <div
              key={section.title}
              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
            >
              <h3 className="text-xl font-semibold text-gray-900">
                {section.title}
              </h3>
              <p className="mt-4 text-sm leading-relaxed text-gray-600">
                {section.description}
              </p>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {section.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}