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

const primaryUseCases = [
  {
    title: 'AI / ML Training',
    bullets: [
      'Deterministic training pipelines for reproducible experiments.',
      'Cryptographically verified model artifacts end-to-end.',
      'Autonomous scaling for distributed training runs.',
      'Zero-drift environments that remain consistent over time.',
    ],
  },
  {
    title: 'Application Hosting',
    bullets: [
      'Transparent deployments with verifiable execution.',
      'Auto-scaling that allocates resources on demand.',
      'Instant global distribution across the ThreeFold Grid.',
      'Cryptographically secured runtime environments.',
    ],
  },
  {
    title: 'Data Processing',
    bullets: [
      'Deterministic pipelines that document every transformation.',
      'Secure computation with cryptographic verification.',
      'Auto-scaling resources for fluctuating workloads.',
      'Global processing placement to minimize latency.',
    ],
  },
  {
    title: 'Scientific Computing',
    bullets: [
      'Reproducible research environments for shared experiments.',
      'Secure workloads with verifiable execution paths.',
      'Dynamic scaling for compute-intensive tasks.',
      'Global collaboration with sovereign resource control.',
    ],
  },
]

const computeSpecific = [
  {
    title: 'Deterministic Training Environments',
    bullets: [
      'Reproducible ML experiments with identical conditions every run.',
      'Verifiable computational research for scientific collaboration.',
      'Auditable financial modelling workflows with traceable outputs.',
      'Consistent IoT edge processing with predictable performance.',
    ],
  },
  {
    title: 'Multi-Platform Application Hosting',
    bullets: [
      'Kubernetes orchestration with deterministic deployment pipelines.',
      'Virtual machines launched with hardware-attested secure boot.',
      'Native Linux workloads with cryptographic assurance.',
      'Hybrid topologies mixing containers, VMs, and bare metal.',
    ],
  },
  {
    title: 'Auto-Scaling Workloads',
    bullets: [
      'Demand-based scaling that reacts instantly to load.',
      'Global distribution across the ThreeFold Grid.',
      'Automated failover that restores services without intervention.',
      'Cost optimization through intelligent resource allocation.',
    ],
  },
]

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">
            Purpose-built for reproducibility, security, and scale.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            From sovereign AI training loops to globally distributed
            applications, Mycelium Compute keeps environments verifiable and
            self-orchestrating so teams can focus on building.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          <div className="space-y-6">
            {primaryUseCases.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>
                <ul className="mt-4 space-y-3 text-sm text-gray-200">
                  {useCase.bullets.map((bullet) => (
                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
                      <span>{bullet}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="space-y-6">
            {computeSpecific.map((useCase) => (
              <div
                key={useCase.title}
                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
              >
                <h3 className="text-xl font-semibold text-white">
                  {useCase.title}
                </h3>
                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
                  {useCase.bullets.map((bullet) => (
                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
                      <span>{bullet}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  )
}