const techStack = [
  {
    category: 'Frontend',
    technologies: [
      { name: 'Next.js 16', description: 'React framework with App Router' },
      { name: 'Expo 54', description: 'React Native framework' },
      { name: 'React 19', description: 'Latest React with Server Components' },
      {
        name: 'Tailwind CSS v4',
        description: 'Utility-first CSS framework',
      },
      { name: 'shadcn/ui', description: 'Beautiful component library' },
    ],
  },
  {
    category: 'Backend',
    technologies: [
      { name: 'Convex', description: 'Self-hosted reactive backend' },
      {
        name: '@convex-dev/auth',
        description: 'Multi-provider authentication',
      },
      { name: 'UseSend', description: 'Self-hosted email service' },
      { name: 'File Storage', description: 'Built-in file uploads' },
    ],
  },
  {
    category: 'Developer Tools',
    technologies: [
      { name: 'Turborepo', description: 'High-performance build system' },
      { name: 'TypeScript', description: 'Type-safe development' },
      { name: 'Bun', description: 'Fast package manager and runtime' },
      { name: 'ESLint + Prettier', description: 'Code quality tools' },
      { name: 'Docker', description: 'Containerized deployment' },
    ],
  },
];

export const TechStack = () => (
  <section id='tech-stack' className='border-border/40 bg-muted/30 border-t'>
    <div className='container mx-auto px-4 py-24'>
      <div className='mx-auto max-w-6xl'>
        <div className='mb-16 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
            Modern Tech Stack
          </h2>
          <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
            Built with the latest and greatest tools for maximum productivity
            and performance.
          </p>
        </div>

        <div className='grid gap-12 md:grid-cols-3'>
          {techStack.map((stack) => (
            <div key={stack.category}>
              <h3 className='mb-6 text-xl font-semibold'>{stack.category}</h3>
              <ul className='space-y-4'>
                {stack.technologies.map((tech) => (
                  <li key={tech.name}>
                    <div className='text-foreground font-medium'>
                      {tech.name}
                    </div>
                    <div className='text-muted-foreground text-sm'>
                      {tech.description}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);