"use client";

import { Container } from '@/components/Container'
import { Eyebrow, H3, P, Small } from '@/components/Texts'

const useCases = [
  {
    title: 'Enterprise & Private Kubernetes',
    description:
      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
    bullets: [
      'High availability + failover',
      'Encrypted, mesh-native networking',
      'Compliance-ready governance & policy control',
    ],
  },
  {
    title: 'Edge & Distributed Deployments',
    description:
      'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
    bullets: [
      'Low-latency execution',
      'Mesh-routed connectivity',
      'Autonomous healing across region',
    ],
  },
  {
    title: 'AI / ML & Agent Workloads',
    description:
      'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
    bullets: [
      'Scales across nodes',
      'Supports open-source & fine-tuned models',
      'Built for agentic automation + RAG',
    ],
  },
]

export function CloudUseCases() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">

      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
      <div className="w-full border-t border-l border-r border-gray-200" />

      {/* ✅ Inner boxed container */}
      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
        <Container>
          <div className="mx-auto max-w-4xl sm:text-center">
            <Eyebrow className="text-cyan-500">USE CASES</Eyebrow>

            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Built for intelligent workloads across every edge.
            </H3>

            <P className="mt-6 text-lg 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>

          {/* ✅ 3 columns on desktop */}
          <ul
            role="list"
            className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
          >
            {useCases.map((useCase) => (
              <li
                key={useCase.title}
                className="rounded-md border border-gray-200 bg-white p-6 transition-all duration-300
                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
              >
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-gray-900">
                    {useCase.title}
                  </h3>
                  <Small className="uppercase tracking-[0.25em] text-cyan-500">
                    Scenario
                  </Small>
                </div>

                <p className="mt-4 text-gray-700 leading-snug">
                  {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>
              </li>
            ))}
          </ul>
        </Container>
      </div>

      {/* ✅ Bottom horizontal line + spacing */}
      <div className="w-full border-b border-gray-200" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
    </section>
  )
}