"use client";
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/Badge";
import { ContactoForm } from "@/components/forms/ContactoForm";
import { FiMapPin, FiMail, FiPhone } from "react-icons/fi";
import { useLanguage } from "@/context/LanguageContext";

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

  const infoContacto = [
    {
      icon: <FiMapPin />,
      label: t.contacto.info.address,
      value: "Av. de Madrid, 138, Sants-Montjuïc, 08028 Barcelona",
      href: "https://www.google.com/maps/search/?api=1&query=Av.+de+Madrid,+138,+08028+Barcelona",
    },
    {
      icon: <FiMail />,
      label: t.contacto.info.email,
      value: "jordi@itemopina.com",
      href: "mailto:jordi@itemopina.com",
      isEmail: true,
    },
    {
      icon: <FiPhone />,
      label: t.contacto.info.phone,
      value: "650 066 923",
      href: "tel:+34650066923",
    },
  ];

  // Lógica para resaltar la última palabra del título en color ocean
  const titleWords = t.contacto.heroTitle.split(" ");
  const lastWord = titleWords.pop();
  const mainTitle = titleWords.join(" ");

  return (
    <section className="w-full flex-grow py-16 md:py-24">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
          
          {/* Columna de Información */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            className="lg:col-span-5 flex flex-col justify-start"
          >
            <Badge>{t.contacto.badge || "Contacto Directo"}</Badge>

            <h1 className="text-[48px] md:text-[64px] font-extrabold text-navy leading-[1.05] tracking-tight mb-6">
              {mainTitle} <br />
              <span className="text-ocean">{lastWord}</span>
            </h1>
            
            <p className="text-[16px] text-navy/70 leading-[1.6] font-medium mb-12 max-w-md">
              {t.contacto.heroDesc}
            </p>

            <div className="space-y-8  pt-8">
              {infoContacto.map((item, idx) => (
                <div key={idx}>
                  <h4 className="text-[13px] font-extrabold text-sky uppercase tracking-widest mb-2 flex items-center gap-2">
                    <span className="text-ocean">{item.icon}</span>
                    {item.label}
                  </h4>
                  <a 
                    href={item.href}
                    target={item.href.startsWith("http") ? "_blank" : undefined}
                    rel="noopener noreferrer"
                    className={`text-navy font-bold leading-relaxed hover:text-ocean transition-colors ${
                      item.isEmail ? "text-[18px] text-ocean" : "text-[16px]"
                    }`}
                  >
                    {item.value}
                  </a>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Columna del Formulario */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="lg:col-span-7 bg-white rounded-[32px] border border-crisp p-8 md:p-12 lg:p-16"
          >
            <h3 className="text-[24px] font-extrabold text-navy mb-8">
              {t.contacto.form.title}
            </h3>
            <ContactoForm />
          </motion.div>

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