import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { Eyebrow, H3, P, CT } from '../../components/Texts'

const features = [
  { name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
  { name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
  { name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
]

export function HomeComparisonTable() {
  return (
    <div className="relative bg-white py-24 lg:py-32">
      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-6xl lg:px-8">
        <Eyebrow>COMPARISON</Eyebrow>
        <H3 className="mt-2">Why People Choose Mycelium</H3>
        <P className="mx-auto mt-5 max-w-prose">
          Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
          or uptime to centralized platforms.
        </P>

        <div className="mt-16 overflow-x-auto">
          <table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
            <thead className="bg-cyan-50/60">
              <tr className="text-base font-semibold text-slate-700">
                <th className="py-4 pl-3 text-left">Capability</th>
                <th className="py-4 pl-3 text-left">Traditional Cloud</th>
                <th className="py-4 pl-3 text-left">Mycelium</th>
              </tr>
            </thead>

            <tbody className="divide-y divide-slate-200">
              {features.map((feature) => (
                <tr key={feature.name}>
                  <td className="py-3 pl-3">
                    <CT>{feature.name}</CT>
                  </td>

                  <td className="py-3 pl-3">
                    {feature.cloud}
                  </td>

                  <td className="py-3 pl-3">
                    {feature.mycelium}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

      </div>
    </div>
  )
}