www_projectmycelium_com/src/pages/compute/ComputeUseCases.tsx

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

const useCases = [
  {
    title: 'AI / ML Training',
    description:
      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
  },
  {
    title: 'Application Hosting',
    description:
      'Private, reliable, self-healing services – without cloud vendor lock-in.',
  },
  {
    title: 'Distributed & Edge Compute',
    description:
      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
  },
]

export function ComputeUseCases() {
  return (
    <section className="bg-gray-950 py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
            Use Cases
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6">
           Built for Serious Workloads
          </SectionHeader>
        </div>

        <div className="mx-auto mt-16 max-w-4xl space-y-6">
          {useCases.map((useCase) => (
            <div
              key={useCase.title}
              className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
            >
              <h3 className="text-xl font-semibold text-white">
                {useCase.title}
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-gray-200">
                {useCase.description}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
}