"use client";

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

/* ✅ Custom Icons (unchanged) */

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>
  )
}

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,
  },
]

export function HomeHosting() {
  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 content 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">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 lg:max-w-none lg:grid-cols-4 md:gap-y-10"
            >
              {features.map((feature) => (
                <li
                  key={feature.name}
                  className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
                    hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
                >
                  <feature.icon className="h-14 w-14" />
                  <h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
                  <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
                </li>
              ))}
            </ul>
          </Container>

        </div>
      {/* ✅ Bottom horizontal line with 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>
  )
}