import { motion } from 'framer-motion';
import Image from 'next/image';

export default function About() {
  const team = [
    {
      name: 'Michael Stüve',
      role: 'CEO & Lead Developer',
      image: '/team/michael.png',
    },
  ];

  return (
    <div className="py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl font-bold mb-6">Über Pixelbrew</h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Seit 2025 sind wir spezialisiert auf die Entwicklung innovativer Apps und Spiele. 
            Unser Ziel ist es, kreative und fesselnde digitale Erlebnisse zu schaffen, die Nutzer begeistern.
          </p>
        </motion.div>

        <div className="flex justify-center mb-16">
          {team.map((member, index) => (
            <motion.div
              key={member.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
              className="text-center"
            >
              <div className="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden">
                <Image
                  src={member.image}
                  alt={member.name}
                  fill
                  className="object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold">{member.name}</h3>
              <p className="text-gray-600">{member.role}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}
