import { motion } from 'framer-motion';
import { Target } from 'lucide-react';

const Check = ({ className }: { className?: string }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
  </svg>
);

export function MissionApp() {
  return (
    <div className="min-h-full bg-gradient-to-br from-yellow-500 to-orange-500 p-3 md:p-6 flex items-center justify-center">
      <div className="text-center max-w-2xl">
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          className="w-16 h-16 md:w-24 md:h-24 mx-auto mb-4 md:mb-6 bg-black rounded-full flex items-center justify-center"
        >
          <Target className="w-8 h-8 md:w-12 md:h-12 text-yellow-400" />
        </motion.div>
        <h1 className="text-2xl md:text-4xl font-display text-black uppercase tracking-wider mb-3 md:mb-4">THE MISSION</h1>
        <p className="text-base md:text-lg text-black/80 mb-4 md:mb-6 leading-relaxed px-2 md:px-0">
          Build the <strong>neutral identity layer</strong> for the next generation of digital creators.
        </p>
        <p className="text-sm md:text-base text-black/70 mb-4 md:mb-6 px-4 md:px-0">
          No platform lock-in. No 30% cuts. Just architects, their work, and their audience.
        </p>
        <div className="flex flex-wrap gap-2 md:gap-4 justify-center text-black/60 text-xs md:text-sm">
          <span className="flex items-center gap-1">
            <Check className="w-3 h-3 md:w-4 md:h-4" /> Cross-Platform Identity
          </span>
          <span className="flex items-center gap-1">
            <Check className="w-3 h-3 md:w-4 md:h-4" /> Direct-to-Consumer
          </span>
          <span className="flex items-center gap-1">
            <Check className="w-3 h-3 md:w-4 md:h-4" /> Open Protocol
          </span>
        </div>
      </div>
    </div>
  );
}