'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: "Federation",
  name: "Runs on Your Own Infrastructure",
  description: `
    <p>
      Each Pod lives on your own hardware or on trusted local nodes in the Mycelium Network.
There is no central cloud and no company in the middle. You are not uploading your life to the cloud. You are running it yourself.
    </p>
  `,

  details: [
    {
      name: "Your Data Lives on Your Pods",
      description:
        "Full control of where your data is stored and how it’s shared.",
    },
    {
      name: "Direct Pod-to-Pod Networking",
      description:
        "Direct connections between Pods for faster, private communication.",
    },
    {
      name: "No One Can Spy or Shut You Down",
      description:
        "Independence from corporate servers or cloud outages.",
    },
    {
      name: "Resilient Even if Nodes Disconnect",
      description:
        "Continuous availability even if one node disconnects.",
    },
  ],
}


export function PodsDesign() {
  return (
    <div className="bg-white text-gray-900">
      {/* TOP LINE */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
      <div className="w-full border-t border-l border-r border-gray-200" />

      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-200">
        <div className="mx-auto max-w-2xl lg:max-w-none">

          <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 Federation"
                src="/images/cloudhosting.webp"
                className="aspect-square w-full object-cover rounded-md"
              />
            </div>

            {/* PRODUCT INFO */}
            <div className="mt-8 px-4 sm:px-0 lg:mt-0 lg:col-span-3">

              <Eyebrow className="text-cyan-600">
                {product.subtitle}
              </Eyebrow>

              <H4 className="text-gray-900">
                {product.name}
              </H4>

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

              {/* DETAILS ACCORDION */}
              <section className="mt-6">
                <div className="divide-y divide-gray-200 border-t border-cyan-600/60">
                  {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 font-medium text-gray-900">
                            {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-cyan-600 group-open:block" />
                          </span>
                        </DisclosureButton>
                      </H3>

                      <DisclosurePanel className="pb-6">
                        <p className="text-gray-600 text-base">
                          {detail.description}
                        </p>
                      </DisclosurePanel>
                    </Disclosure>
                  ))}
                </div>
              </section>
            </div>
          </div>
        </div>
      </main>

      {/* BOTTOM LINE */}
      <div className="w-full border-b border-gray-200" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
    </div>
  )
}