import { motion } from 'framer-motion';

const credits = [
  // Fonts
  { name: 'Minecraftia', by: 'Andrew Tyler - CDN Fonts', url: 'https://www.cdnfonts.com/minecraftia.font' },
  { name: 'Pixelify Sans', by: 'Stefie Justprince - Google Fonts', url: 'https://fonts.google.com/specimen/Pixelify+Sans' },

  // Core Frameworks & Libraries
  { name: 'ECharts', by: 'Apache ECharts', url: 'https://echarts.apache.org/en/index.html' },
  { name: 'Framer Motion', by: 'Framer - Animation Library', url: 'https://www.framer.com/motion/' },
  { name: 'React', by: 'Meta Open Source', url: 'https://react.dev/' },
  { name: 'React Hook Form', by: 'Daisuke Hirayama', url: 'https://react-hook-form.com/' },
  { name: 'React Router', by: 'Remix Software', url: 'https://reactrouter.com/' },
  { name: 'Recharts', by: 'Recharts Group', url: 'https://recharts.org/' },
  { name: 'TanStack Query', by: 'TanStack', url: 'https://tanstack.com/query/latest' },
  { name: 'TypeScript', by: 'Microsoft', url: 'https://www.typescriptlang.org/' },
  { name: 'Vite', by: 'Evan You and Vite Contributors', url: 'https://vitejs.dev/' },
  { name: 'Zod', by: 'Colin McDonnell', url: 'https://zod.dev/' },

  // UI Components & Styling
  { name: 'clsx', by: 'Luke Edwards', url: 'https://github.com/lukeed/clsx' },
  { name: 'Lucide Icons', by: 'Lucide Contributors', url: 'https://lucide.dev/' },
  { name: 'Radix UI', by: 'WorkOS', url: 'https://www.radix-ui.com/' },
  { name: 'shadcn/ui', by: 'Shadcn', url: 'https://ui.shadcn.com/' },
  { name: 'Tailwind CSS', by: 'Tailwind Labs', url: 'https://tailwindcss.com/' },
  { name: 'Tailwind Merge', by: 'dcastil', url: 'https://github.com/dcastil/tailwind-merge' },

  // Development & Tooling
  { name: 'Autoprefixer', by: 'Can I use & PostCSS', url: 'https://github.com/postcss/autoprefixer' },
  { name: 'ESLint', by: 'OpenJS Foundation', url: 'https://eslint.org/' },
  { name: 'PostCSS', by: 'PostCSS Team', url: 'https://postcss.org/' },
  { name: 'Webpack', by: 'Webpack Contributors', url: 'https://webpack.js.org/' },
];

const Credits = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-6"
    >
      <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
        Credits
      </h1>
      
      <p className="font-pixel text-foreground/80">
        Thanks to everyone who made this possible:
      </p>

      <div className="grid gap-3">
        {credits.map((credit, index) => (
          <motion.a
            key={credit.name}
            href={credit.url}
            target="_blank"
            rel="noopener noreferrer"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.1 }}
            className="p-4 border border-primary/30 hover:border-primary transition-all duration-300 hover:box-glow block"
          >
            <h3 className="font-minecraft text-lg text-primary text-glow">
              {credit.name}
            </h3>
            <p className="font-pixel text-sm text-foreground/60">by {credit.by}</p>
          </motion.a>
        ))}
      </div>

      {/* ASCII Art */}
      <pre className="font-mono text-[8px] md:text-[10px] text-primary/30 leading-tight text-center mt-6 select-none">
{`   _____
  /     \\
 | () () |
  \\  ^  /
   |||||
   |||||  "thx for stopping by"`}
      </pre>

      <div className="border border-primary p-4 bg-primary/10 box-glow mt-4">
        <p className="font-pixel text-primary text-center">
          {'>'} Thank you for visiting! {'<'}
        </p>
      </div>
    </motion.div>
  );
};

export default Credits;
