import { Container } from '@/components/Container'
import { Eyebrow, H3, CT, CP } from '@/components/Texts'
import {
  ServerStackIcon,
  GlobeAltIcon,
  FolderOpenIcon,
  LockClosedIcon,
} from '@heroicons/react/24/solid'

const capabilities = [
  {
    name: 'S3-Compatible Object Storage',
    description: 'Works with existing SDKs & tooling.',
    icon: ServerStackIcon,
  },
  {
    name: 'IPFS & Content-Addressed Access',
    description: 'Ideal for distributed and decentralized workloads.',
    icon: GlobeAltIcon,
  },
  {
    name: 'Filesystem Mounts (WebDAV / POSIX)',
    description: 'Mount storage directly into workflows and apps.',
    icon: FolderOpenIcon,
  },
  {
    name: 'Encrypted Replication & Placement Control',
    description: 'Choose where data physically lives – and who controls it.',
    icon: LockClosedIcon,
  },
]

export  function StorageCapabilities() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>CAPABILITIES</Eyebrow>
          <H3 className="mt-4 text-gray-900">
            What You Can Use Mycelium Storage For
          </H3>
        </div>

        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
            {capabilities.map((item) => (
              <div key={item.name} className="text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
                  <item.icon className="size-6 text-cyan-600" aria-hidden="true" />
                </div>
                <CT className="mt-6 text-gray-900">{item.name}</CT>
                <CP className="mt-2 text-gray-600">{item.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
}