import {
  GlobeAltIcon,
  UsersIcon,
  CommandLineIcon,
  ShieldCheckIcon,
  SparklesIcon,
} from '@heroicons/react/24/outline'

const foundations = [
  {
    id: 1,
    title: 'Planet First',
    description:
      'We act with respect for the Earth. Each initiative supports regeneration and uses natural resources responsibly. Every venture should leave the planet better than it found it.',
    icon: GlobeAltIcon,
  },
  {
    id: 2,
    title: 'People First',
    description:
      'Empowering people to own their digital lives through shared ownership, inclusive governance, and lifelong learning so everyone can grow and take part.',
    icon: UsersIcon,
  },
]

const tools = [
  {
    id: 3,
    title: 'Open Source',
    description:
      'Everything we build is open source. Anyone can use it, improve it, and connect to the ecosystem. Transparency keeps innovation honest.',
    icon: CommandLineIcon,
  },
  {
    id: 4,
    title: 'Simplicity',
    description:
      'Complex systems slow progress. We design modular, autonomous tools that remove unnecessary layers.',
    icon: SparklesIcon,
  },
  {
    id: 5,
    title: 'Authenticity',
    description:
      'We are restoring trust online. Sovereign digital tools verify people and information, building a culture of transparency and accountability.',
    icon: ShieldCheckIcon,
  },
]

export function HomePrinciples() {
  return (
    <div className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:max-w-none">
          <div className="text-center">
            <h2 className="h2-default  text-gray-900 ">
              The Foundation of Every Venture
            </h2>
            <p className="mt-4 p-default text-gray-600">
              We start every project with two essentials: protect the planet and empower people. Everything else follows from there.
            </p>
          </div>
          <div className="mt-12 space-y-12">
            <section>
              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Foundational Commitments</h3>
              <dl className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
                {foundations.map((item) => {
                  const Icon = item.icon

                  return (
                    <div
                      key={item.id}
                      className="flex items-start gap-4 rounded-2xl border border-gray-200/70 bg-white/90 p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
                    >
                      <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
                        <Icon aria-hidden="true" className="size-6 text-gray-900" />
                      </div>
                      <div className="space-y-2">
                        <h4 className="text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
                        <p className="text-base/7 text-gray-500">{item.description}</p>
                      </div>
                    </div>
                  )
                })}
              </dl>
            </section>
            <section>
              <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Tools We Deploy</h3>
              <p className="mt-3 p-default text-gray-600">
                With people and planet at the core, these are the principles that shape how we build and operate.
              </p>
              <dl className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {tools.map((item) => {
                  const Icon = item.icon

                  return (
                    <div
                      key={item.id}
                      className="flex flex-col items-center rounded-2xl border border-gray-200/70 bg-white/90 p-5 text-center shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
                    >
                      <div className="flex size-11 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
                        <Icon aria-hidden="true" className="size-6 text-gray-900" />
                      </div>
                      <h4 className="mt-4 text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
                      <p className="mt-2 text-base/7 text-gray-500">{item.description}</p>
                    </div>
                  )
                })}
              </dl>
            </section>
          </div>
        </div>
      </div>
    </div>
  )
}