components/Services.js

import { Brain, Globe, MessageSquare } from 'lucide-react';

export default function Services() {
  const services = [
    {
      icon: <Brain className="w-6 h-6 text-aurora-cyan" />,
      title: "AI Modell Evaluering & RLHF",
      desc: "Tester og finjusterer LLMer for å sikre nøyaktige, trygge og kulturelt tilpassede utdata for nordiske markeder."
    },
    {
      icon: <Globe className="w-6 h-6 text-aurora-cyan" />,
      title: "Lokalisering & Oversettelse",
      desc: "Tilpasser brukergrensesnitt, dokumentasjon og markedsføring til norske mottakere med høyt fokus på bransjespesifikk terminologi."
    },
    {
      icon: <MessageSquare className="w-6 h-6 text-aurora-cyan" />,
      title: "Profesjonell Tolking",
      desc: "Fasilitater sømløs flerspråklig kommunikasjon under kritiske forretningsmøter og tekniske forhandlinger."
    }
  ];

  return (
    <section className="py-32 px-6 max-w-7xl mx-auto">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {services.map((service, index) => (
          <div key={index} className="glass-card p-10 hover:-translate-y-1 transition-transform duration-300">
            <div className="w-12 h-12 rounded-lg bg-aurora-cyan/10 flex items-center justify-center mb-8">
              {service.icon}
            </div>
            <h3 className="text-2xl font-bold mb-4 leading-tight">{service.title}</h3>
            <p className="text-stone-gray leading-relaxed">{service.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}