import { motion } from 'motion/react';
import { Cpu } from 'lucide-react';

export default function Slide1Title() {
  return (
    <div className="flex flex-col items-center justify-center text-center py-6 sm:py-10 max-w-3xl mx-auto">
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: 0.1, duration: 0.5 }}
        className="relative mb-10"
      >
        <div className="w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-emerald-500/15 border-dashed flex items-center justify-center animate-[spin_40s_linear_infinite]" />
        <div className="absolute inset-2 rounded-full border border-emerald-500/30 flex items-center justify-center animate-[spin_20s_linear_infinite_reverse]" />
        <div className="absolute inset-4 rounded-full border-2 border-emerald-500/60 border-t-transparent border-b-transparent flex items-center justify-center animate-[spin_8s_linear_infinite]" />
        <div className="absolute inset-0 m-auto w-12 h-12 rounded-full bg-emerald-950/40 border border-emerald-500/50 flex items-center justify-center">
          <Cpu className="w-5 h-5 text-emerald-400 animate-pulse" />
        </div>
      </motion.div>

      <p className="text-emerald-500 font-mono text-xs sm:text-sm tracking-widest uppercase font-bold text-glow mb-4">
        INTRODUCTION
      </p>

      <h1 className="font-display font-extrabold text-3xl sm:text-4xl md:text-5xl lg:text-5xl text-white tracking-tight leading-tight uppercase font-glow mb-5">
        The Sovereign Business Engine
      </h1>

      <div className="h-[2px] w-24 bg-gradient-to-r from-transparent via-emerald-500 to-transparent mb-6" />

      <p className="text-slate-400 font-sans text-base sm:text-lg md:text-xl font-light leading-relaxed max-w-xl">
        Unlock Secure, Zero-Cost Local AI for Algarve Entrepreneurs, Nomads & Content Creators
      </p>

      <div className="mt-12 flex flex-wrap gap-3 font-mono text-[10px] text-slate-400 justify-center">
        <span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ PRIVATE INTEL</span>
        <span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ DECENTRALISED</span>
        <span className="px-3 py-1.5 rounded-full bg-slate-950 border border-emerald-900/30">✓ 0% SAAS TRANSACTION</span>
      </div>
    </div>
  );
}