import { useId } from 'react'
import { PencilSquareIcon, PhotoIcon, UserGroupIcon, FaceSmileIcon, SparklesIcon, RocketLaunchIcon } from '@heroicons/react/20/solid'

import { Container } from '@/components/Container'

const features = [
  {
    name: 'Post statuses, with photos',
    description:
      'With unlimited attachments per post, you can share photos, videos, and more.',
    icon: PhotoIcon,
  },
  {
    name: 'Follow people anywhere on the fediverse',
    description:
      'Keep up with your friends and collect them into lists to customise what posts you see!',
    icon: UserGroupIcon,
  },
  {
    name: 'React to your friends’ posts',
    description:
      'Have something to say, but not something you can put into words? React to posts with emojis!',
    icon: FaceSmileIcon,
  },
  {
    name: 'Post Misskey Markdown',
    description:
      'Create fancy animations with rich markup!',
    icon: SparklesIcon,
  },
  {
    name: 'Edit your posts, as many times as you want',
    description:
      'There\'s no limit to how many times you can edit your posts, so you can make sure they\'re perfect!',
    icon: PencilSquareIcon,
  },
  {
    name: 'Enjoy a substantial speed upgrade',
    description:
      'Akkoma is consistently 30-50% faster than Pleroma when handling common operations!',
    icon: RocketLaunchIcon,
  },
]

export function SecondaryFeatures() {
  return (
    <section
      id="secondary-features"
      aria-label="Features for building a portfolio"
      className="py-20 sm:py-32"
    >
      <Container>
        <div className="mx-auto max-w-2xl sm:text-center">
          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
            What can I do with Akkoma?
          </h2>
        </div>
        <ul
          role="list"
          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
        >
          {features.map((feature) => (
            <li
              key={feature.name}
              className="rounded-2xl border border-gray-200 p-8"
            >
              <feature.icon className="h-8 w-8" />
              <h3 className="mt-6 font-semibold text-gray-900">
                {feature.name}
              </h3>
              <p className="mt-2 text-gray-700">{feature.description}</p>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}