'use client'

import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from '@headlessui/react'
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'

import { Eyebrow, H3, H4 } from "@/components/Texts"


const product = {
  subtitle: 'capabilities',
  name: 'What You Can Run on Mycelium Cloud',
  description: '<p>Host nodes, deploy workloads, or build private AI systems, all on infrastructure you own and control.</p>',
  details: [
    {
      name: 'Kubernetes Clusters',
      description: 'Deterministic K3s workloads across sovereign hardware.',
    },
    {
      name: 'Encrypted Mesh Networking',
      description: 'No public ingress, no exposed attack surface, zero-trust routing.',
    },
    {
      name: 'S3-Compatible Storage',
      description: 'Distributed storage with erasure coding and residency control.',
    },
    {
      name: 'GPU-Ready',
      description: 'Scale inference & training on demand.',
    },
  ],
}



// ✅ keep your product + relatedProducts data above here …

export function CloudHostingNew() {
  return (
    <div className="bg-[#121212] text-white">
        {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
      <div className="w-full border-t border-l border-r border-gray-600" />
      {/* ✅ MAIN CONTENT */}
      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-600">
        <div className="mx-auto max-w-2xl lg:max-w-none">

          {/* ✅ Product Section */}
          <div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
            
            {/* ✅ Image */}
            <div className="lg:col-span-2 lg:mt-8 mt-2">
              <img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-full object-cover" />
            </div>

            {/* ✅ Product info */}
            <div className="mt-8 px-4  sm:px-0 lg:mt-0 lg:col-span-3">
                <Eyebrow>{product.subtitle}</Eyebrow>
              <H4 className=" text-white">{product.name}</H4>

            
             

              <div className="mt-4 text-gray-300 text-xl"
                dangerouslySetInnerHTML={{ __html: product.description }}
              />


              {/* ✅ Details accordion */}
              <section className="mt-6">
                <div className="divide-y divide-gray-800 border-t border-cyan-500">
                  {product.details.map((detail) => (
                    <Disclosure key={detail.name} as="div">
                      <H3>
                        <DisclosureButton className="group flex w-full items-center justify-between py-6 text-left">
                          <span className="text-lg tracking-normal font-medium text-white">
                            {detail.name}
                          </span>
                          <span className="ml-6 flex items-center">
                            <PlusIcon className="block h-6 w-6 text-gray-500 group-open:hidden" />
                            <MinusIcon className="hidden h-6 w-6 text-indigo-400 group-open:block" />
                          </span>
                        </DisclosureButton>
                      </H3>
                      <DisclosurePanel className="pb-6">
                        <p className="text-gray-400 text-base tracking-normal">{detail.description}</p>
                      </DisclosurePanel>
                    </Disclosure>
                  ))}
                </div>
              </section>
            </div>
          </div>
        </div>
      </main>

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