import { motion } from 'framer-motion';
import Hero3D from './Hero3D';

export default function Hero() {
  return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden bg-nordic-navy">
      <Hero3D />
      
      {/* Overlay Gradient */}
      <div className="absolute inset-0 bg-gradient-to-t from-nordic-navy via-transparent to-transparent z-10" />
      
      <div className="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <p className="font-mono text-nordic-cyan text-sm md:text-base tracking-widest mb-6 uppercase opacity-80">
            Lokalisert i Trondheim | Tilgjengelig for prosjektbasert arbeid
          </p>
          
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-tight mb-6">
            Flerspråklig <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-nordic-cyan">AI-kvalitet</span>,<br />
            Lokalisering og Tolking
          </h1>
          
          <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-400 font-light">
            Jeg hjelper selskaper med å levere nøyaktig, kulturelt pålitelig og operasjonelt feilfritt flerspråklig arbeid på tvers av AI-evaluering, språkkvalitet og høytroende kommunikasjon.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row justify-center gap-4">
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="px-8 py-4 bg-nordic-cyan text-nordic-navy font-bold rounded text-lg shadow-[0_0_20px_rgba(0,229,255,0.3)] hover:shadow-[0_0_30px_rgba(0,229,255,0.5)] transition-all"
            >
              Diskuter et prosjekt
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.1)" }}
              whileTap={{ scale: 0.95 }}
              className="px-8 py-4 border border-white/20 text-white font-medium rounded text-lg hover:border-white/40 transition-all glass-panel"
            >
              Se kvalifikasjoner
            </motion.button>
          </div>
        </motion.div>
      </div>
    </section>
  );
}