import { Container } from '../../components/Container'

const computeFeatures = [
  {
    title: 'Deterministic Deployments',
    description:
      'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
  },
  {
    title: 'Self-Managing & Stateless Infrastructure',
    description:
      'Fully autonomous infrastructure that scales globally without manual intervention.',
  },
  {
    title: 'Zero-Image Technology (100x Compression)',
    description:
      'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
  },
  {
    title: 'Smart Contract-Based Deployment',
    description:
      'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
  },
  {
    title: 'Multi-Workload Compatibility with Secure Boot',
    description:
      'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
  },
]

const storageFeatures = [
  {
    title: 'Quantum-Safe Storage (QSS)',
    description:
      'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
  },
  {
    title: 'Self-Healing Storage System',
    description:
      'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
  },
  {
    title: 'Multi-Protocol Data Access',
    description:
      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
  },
  {
    title: 'Geo-Aware Data Placement & Replication',
    description:
      'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
  },
  {
    title: 'Ultra-Efficient Zero-Images (Flists)',
    description:
      'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
  },
]

export function ComputeStorageSplit() {
  return (
    <section className="relative overflow-hidden bg-white">
      <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
      <Container className="relative py-24 lg:py-32">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
            <div className="max-w-xs">
              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
                Compute
              </p>
              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
                Deterministic compute fabric.
              </h2>
              <p className="mt-4 text-sm text-gray-500">
                Launch workloads with cryptographic certainty and autonomous operations.
              </p>
            </div>
            <ul className="grid w-full gap-4">
              {computeFeatures.map((item) => (
                <li
                  key={item.title}
                  className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
                >
                  <span className="text-sm font-semibold text-gray-900">
                    {item.title}
                  </span>
                  <span
                    className="text-xs text-gray-500 leading-relaxed"
                    style={{
                      display: '-webkit-box',
                      WebkitLineClamp: 2,
                      WebkitBoxOrient: 'vertical',
                      overflow: 'hidden',
                    }}
                  >
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
          <div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
            <span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
          </div>
          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
            <div className="max-w-xs">
              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
                Storage
              </p>
              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
                Quantum-safe, sovereign data plane.
              </h2>
              <p className="mt-4 text-sm text-gray-500">
                Protect and place data precisely while keeping access effortless.
              </p>
            </div>
            <ul className="grid w-full gap-4">
              {storageFeatures.map((item) => (
                <li
                  key={item.title}
                  className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
                >
                  <span className="text-sm font-semibold text-gray-900">
                    {item.title}
                  </span>
                  <span
                    className="text-xs text-gray-500 leading-relaxed"
                    style={{
                      display: '-webkit-box',
                      WebkitLineClamp: 2,
                      WebkitBoxOrient: 'vertical',
                      overflow: 'hidden',
                    }}
                  >
                    {item.description}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  )
}