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

const useCases = [
  {
    title: 'AI / ML Training',
    description:
      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
  },
  {
    title: 'Enterprise Kubernetes',
    description:
      'Operate production-grade clusters with complete control and no vendor lock-in.',
    bullets: ['High availability', 'Security', 'Compliance'],
  },
  {
    title: 'Edge & IoT',
    description:
      'Leverage global nodes for low-latency workloads and connected device deployments.',
    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
  },
  {
    title: 'DigitalMe Blueprint',
    description:
      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
    bullets: [
      'Cryptpad • Encrypted collaboration',
      'Elements • Matrix chat',
      'Stallwart • Mail, calendar, contacts',
      'Gitea • Git hosting',
      'Nextcloud • File storage and sync',
      'LiveKit / Jitsi • Real-time video',
      'Single Sign-On backed by Gitea',
    ],
  },
]

export function CloudUseCases() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>
            Use Cases
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            Built for intelligent workloads across every edge.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Mycelium Cloud unifies compute, storage, and networking so teams can
            launch anything from GPU inference farms to global collaboration
            suites with deterministic outcomes.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          {useCases.map((useCase) => (
            <div
              key={useCase.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"
            >
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-semibold text-gray-900">
                  {useCase.title}
                </h3>
                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
                  Scenario
                </Small>
              </div>
              <p className="mt-4 text-sm leading-relaxed text-gray-600">
                {useCase.description}
              </p>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {useCase.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>
  )
}