"use client";
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { BentoGrid } from "@/components/ui/BentoGrid";
import Link from "next/link";
import Image from "next/image";
import { useLanguage } from "@/context/LanguageContext";

export default function ServiciosPage() {
  const { t } = useLanguage();

  return (
    <div className="w-full">
      {/* Hero de Servicios */}
      <section className="max-w-7xl mx-auto px-6 lg:px-12 pt-20 pb-24 md:pt-32 md:pb-24">
        <Badge>{t.servicios.heroBadge || "Cartera de Servicios"}</Badge>

        <h1 className="text-[40px] md:text-[56px] lg:text-[64px] font-extrabold text-ocean leading-[1.05] tracking-tight max-w-5xl mb-16">
          {t.servicios.hero}
        </h1>

        {/* Descripción en dos columnas */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20  pt-12"> 
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
              {t.servicios.cat1}
            </h2>
            <p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
              {t.servicios.cat1Desc}
            </p>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
              {t.servicios.cat2}
            </h2>
            <p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
              {t.servicios.cat2Desc}
            </p>
          </motion.div>
        </div>
      </section>

      {/* Grid Bento de Servicios */}
      <section className="w-full bg-white pb-32">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <BentoGrid>
            
            {/* Imagen 1 */}
            <Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.1}>
              <div className="relative w-full h-full">
                <Image 
                  src="https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=2069&auto=format&fit=crop" 
                  alt={t.servicios.items.consultoria} 
                  fill 
                  className="object-cover"
                />
              </div>
            </Card>

            {/* Consultoría */}
            <Card variant="ice" className="min-h-[300px] md:min-h-[400px] justify-center group border border-crisp" delay={0.2}>
              <h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.consultoria}</h3>
              <p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
                {t.servicios.consultoriaDesc}
              </p>
              <div className="mt-auto">
                <Link href="/contacto">
                  <Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
                    {t.servicios.btnGo || "Ir a la página"}
                  </Button>
                </Link>
              </div>
            </Card>

            {/* Red de Campo */}
            <Card variant="white" className="min-h-[300px] md:min-h-[400px] justify-center border border-crisp" delay={0.3}>
              <h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.red}</h3>
              <p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
                {t.servicios.redDesc}
              </p>
              <div className="mt-auto">
                <Link href="/contacto">
                  <Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
                    {t.servicios.btnGo || "Ir a la página"}
                  </Button>
                </Link>
              </div>
            </Card>

            {/* Estudios (Bloque destacado) */}
            <Card variant="navy" className="md:col-span-2 min-h-[300px] md:min-h-[400px] justify-center border border-navy" delay={0.4}>
              <h3 className="text-[40px] font-extrabold text-white mb-6">{t.servicios.items.estudios}</h3>
              <p className="text-[18px] text-white/80 font-medium leading-[1.6] max-w-md mb-10">
                {t.servicios.estudiosDesc}
              </p>
              <div className="mt-auto">
                <Link href="/contacto">
                  <Button variant="outline" className="bg-ocean border-ocean text-white hover:bg-white hover:text-ocean hover:border-white transition-all w-full sm:w-auto">
                    {t.servicios.btnGo || "Ir a la página"}
                  </Button>
                </Link>
              </div>
            </Card>

            {/* Imagen 2 */}
            <Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.5}>
              <div className="relative w-full h-full">
                <Image 
                  src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" 
                  alt={t.servicios.items.estudios} 
                  fill 
                  className="object-cover"
                />
              </div>
            </Card>

          </BentoGrid>
        </div>
      </section>
    </div>
  );
}