www_projectmycelium_com/src/pages/home/HomeHosting.tsx

import { useId } from 'react'
import { Container } from '../../components/Container'
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'

/* ✅ Custom Icons */

function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path
        d="M16 7
           L23 11
           L25 19
           L19 25
           L13 25
           L7 19
           L9 11
           Z"
        fill="#737373"
      />
      <circle cx={16} cy={16} r={2} fill="#171717" />
      <line x1="16" y1="9"  x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <line x1="9"  y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
    </svg>
  )
}

function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
      <line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
      <circle cx={16} cy={8} r={2} fill="#171717" />
      <circle cx={13} cy={17} r={1.5} fill="#171717" />
      <circle cx={19} cy={17} r={1.5} fill="#171717" />
      <line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
    </svg>
  )
}

function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
      <rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
      <path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
    </svg>
  )
}

function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path
        d="
          M16 8
          l8 4
          v6
          c0 4 -3 7 -8 9
          c-5 -2 -8 -5 -8 -9
          v-6
          l8 -4
        "
        fill="#737373"
      />
      <path
        d="M13 18l2 2l4 -4"
        stroke="#171717"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

/* ✅ Updated Feature List */

const features = [
  {
    name: 'Kubernetes Clusters',
    description: 'Deploy and scale containerized apps across your own hardware.',
    icon: KubernetesIcon,
  },
  {
    name: 'AI Agents & LLM Runtimes',
    description: 'Run open-source models locally, securely, and offline.',
    icon: AIAgentsIcon,
  },
  {
    name: 'S3-Compatible Storage',
    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
    icon: S3StorageIcon,
  },
  {
    name: 'Mesh VPN & Zero-Trust Networking',
    description: 'Securely connect all your devices and remote locations.',
    icon: VPNIcon,
  },
]

/* ✅ Component */

export function HomeHosting() {
  return (
    <section
      id="comingsoon"
      aria-label="Features"
      className="py-20 sm:py-32 relative isolate overflow-hidden"
      style={{
        backgroundImage: "url('/images/bg2.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      }}
    >
      {/* ✅ Soft overlay for readable text */}
      <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />

      <Container className="relative z-10">
        <div className="mx-auto max-w-4xl sm:text-center">
          <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
          <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            Expanding the Network Layer
          </H3>
          <P className="mt-6 text-lg text-gray-600">
            The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
            These enhancements deepen autonomy and improve real-world usability.
          </P>
        </div>

        <ul
          role="list"
          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm  sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
        >
          {features.map((feature) => (
            <li
              key={feature.name}
              className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
            >
              <feature.icon className="h-12 w-12" />
              <p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
              <p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}