import { H2, H4, CP } from '@/components/UI/Texts'

const features = [
  {
    name: 'Capital & Growth Support',
    description:
      'Access mission-aligned funding for ventures building decentralized, sovereign digital infrastructure, with capital models designed to help impactful projects scale.',
    href: '#',
  },
  {
    name: 'Legal & Operational Autonomy',
    description:
      'Operate through streamlined, innovation-friendly structures in our digital free zone, giving global teams transparent, borderless, and efficient ways to build and grow.',
    href: '#',
  },
  {
    name: 'Infrastructure Empowerment',
    description:
      'Build on sovereign cloud, decentralized compute, and agentic AI tools while collaborating with a network of ventures sharing infrastructure, and resources.',
    href: '#',
  },
]

export function About() {
  return (
    <div className="bg-transparent py-24 lg:pt-32 lg:pb-12">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-4xl lg:mx-0">
          <H2 className="text-void">
            Enabling an Interconnected Ecosystem to Enhance Collective Intelligence Through Collaboration.
          </H2>
         
        </div>
        <div className="mx-auto mt-12 max-w-2xl  lg:max-w-none">
          <dl className="grid max-w-xl grid-cols-1 gap-x-8 lg:gap-y-16 gap-y-8 lg:max-w-none lg:grid-cols-3">
            {features.map((feature) => (
              <div key={feature.name} className="flex flex-col">
                <div className="my-8 h-[2px] w-3/4 bg-gray-300 overflow-hidden">
                  <div className="h-full w-full bg-green animate-draw-line" />
                </div>
                <dt className="font-semibold max-w-sm lg:max-w-xs">
                  <H4 className="text-void">{feature.name}</H4>
                </dt>
                <dd className="mt-8 flex flex-auto flex-col max-w-sm lg:max-w-xs">
                  <CP className="flex-auto text-void">{feature.description}</CP>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}
