components/Hero.js

import { ChevronRight, ShieldCheck } from 'lucide-react';

export default function Hero() {
  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center px-6 pt-20 text-center">
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 opacity-20">
        <div className="w-px h-12 bg-gradient-to-b from-aurora-cyan to-transparent animate-pulse"></div>
      </div>
      
      <div className="max-w-4xl w-full z-10">
        <span className="clinical-text mb-6 block text-aurora-cyan">
          Lokalisert i Trondheim | Tilgjengelig for prosjektbasert arbeid
        </span>
        <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8 leading-[1.1]">
          Flerspråklig AI-kvalitet,<br/>
          Lokalisering og Tolking for<br/>
          grensekryssende team.
        </h1>
        <p className="text-lg md:text-xl text-stone-gray max-w-2xl mx-auto mb-12 leading-relaxed">
          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="flex flex-col sm:flex-row items-center justify-center gap-4">
          <button className="group relative px-8 py-4 bg-aurora-cyan text-nordic-navy font-semibold rounded-full flex items-center gap-2 transition-transform hover:scale-105">
            Diskuter et prosjekt <ChevronRight className="w-4 h-4" />
          </button>
          <button className="group relative px-8 py-4 border border-white/20 text-ice-white font-semibold rounded-full flex items-center gap-2 hover:bg-white/10 transition-all hover:scale-105">
            <ShieldCheck className="w-4 h-4" /> Se kvalifikasjoner
          </button>
        </div>
      </div>
    </section>
  );
}