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

const foundations = [
  {
    name: 'Planet First',
    description:
      'Each initiative supports regeneration and uses natural resources responsibly. Every venture should leave the planet better than it found it.',
    iconSrc: '/assets/icons/foundation_icons/planet.svg',
    iconAlt: 'Planet First icon',
  },
  {
    name: 'People First',
    description:
      'Empowering people to own their digital lives through shared ownership, governance, and lifelong learning so everyone can participate.',
    iconSrc: '/assets/icons/foundation_icons/people.svg',
    iconAlt: 'People First icon',
  },
  {
    name: 'Open & Authentic',
    description:
      'By designing tools that are open source and transparent, we help restore trust online and ensure people, information, and systems remain accountable.',
    iconSrc: '/assets/icons/foundation_icons/open.svg',
    iconAlt: 'Open & Authentic icon',
  },
  {
    name: 'Simplicity',
    description:
      'Our ventures are designed to be modular and autonomous. Anyone should be able to connect, innovate, and contribute without friction.',
    iconSrc: '/assets/icons/foundation_icons/simplicity.svg',
    iconAlt: 'Simplicity icon',
  },
]

export function Foundation() {
  return (
    <div className="bg-transparent py-12">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 lg:gap-y-20 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-5">
          <div className="col-span-2">
            <H2>
              The Foundation of Every Venture
            </H2>
          </div>

          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
            {foundations.map((foundation) => (
              <div key={foundation.name}>
                <dt className="text-base/7 font-semibold text-gray-900">
                  <div className="mb-2 flex size-12 items-center justify-center rounded-lg bg-green/10">
                    <Image
                      src={foundation.iconSrc}
                      alt={foundation.iconAlt}
                      width={32}
                      height={32}
                      className={
                        foundation.name === 'Planet First'
                          ? 'h-10 w-10 object-contain'
                          : 'h-12 w-12 object-contain'
                      }
                    />
                  </div>
                  <H4>{foundation.name}</H4>
                </dt>
                <dd className="mt-4 text-base/7 text-gray-600">
                  <CP>{foundation.description}</CP>
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}
