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

const architectureSections = [
  {
    title: 'Decentralized Infrastructure',
    description:
      'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
    bullets: [
      'Unique Mycelium IP addresses assigned to every node.',
      'Peer-to-peer mesh networking links services across nodes.',
      'End-to-end encryption keeps traffic sealed inside the fabric.',
      'No public IP exposure—everything is addressable via Mycelium IPs.',
    ],
  },
  {
    title: 'Network Flow',
    description:
      'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
    bullets: [
      'User requests enter through the encrypted Mycelium network.',
      'Traffic routes directly to cluster nodes without intermediate hops.',
      'Services answer over the same mesh—no ingress controller required.',
      'Operational visibility without exposing public attack surface.',
    ],
  },
  {
    title: 'Kubernetes Management',
    description:
      'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
    bullets: [
      'Full K3s deployment and lifecycle management built-in.',
      'IPv6-native networking ensures deterministic service discovery.',
      'Multi-master topologies with automatic failover for resilience.',
      'Drift-free upgrades orchestrated through smart contracts.',
    ],
  },
]

export function CloudArchitecture() {
  return (
    <section className="bg-white py-24 lg:py-32">
      <Container>
        <div className="mx-auto max-w-5xl text-center">
          <Eyebrow>
            Technical Architecture
          </Eyebrow>
          <H3 className="mt-6 text-gray-900">
            Built on a Sovereign, Encrypted Delivery Mesh.
          </H3>
          <P className="mt-6 text-gray-600">
            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
            networking with deterministic K3s orchestration. Every layer is
            designed to keep workloads sovereign, observable, and effortless to
            operate.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {architectureSections.map((section) => (
            <div
              key={section.title}
              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
            >
              <div className="flex items-center gap-3">
                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
                  •
                </span>
                <h3 className="text-xl font-semibold text-gray-900">
                  {section.title}
                </h3>
              </div>
              <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>
  )
}