"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 Link from "next/link";
import { useLanguage } from "@/context/LanguageContext";

export default function NosotrosPage() {
  const { t, locale } = useLanguage();

  // Dividimos el título para aplicar el color al final (Desde 2004 / Des de 2004 / Since 2004)
  const titleParts = t.nosotros.title.split('.');

  return (
    <div className="w-full">
      {/* Hero Narrativo */}
      <section className="max-w-5xl mx-auto px-6 lg:px-12 pt-24 pb-20 md:pt-32 md:pb-24 text-center">
        <Badge>{t.nosotros.badge}</Badge>

        <h1 className="text-[48px] md:text-[64px] lg:text-[80px] font-extrabold text-navy leading-[1.00] tracking-tight mb-8">
          {titleParts[0]}.<br />
          <span className="text-ocean">{titleParts[1]}</span>
        </h1>
        
        <p className="text-[18px] md:text-[22px] text-navy/70 leading-[1.6] font-medium max-w-3xl mx-auto">
          {t.nosotros.desc}
        </p>
      </section>

      {/* Sección Historia (Layout Asimétrico) */}
      <section className="w-full bg-ice/10 border-t border-crisp py-24">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col md:flex-row gap-16 lg:gap-24">
          
          <div className="md:w-1/3">
            <div className="sticky top-32">
              <h2 className="text-[32px] md:text-[40px] font-extrabold text-navy leading-[1.1] mb-6">
                {t.nosotros.history.title}
              </h2>
              <p className="text-[16px] text-navy/60 font-medium leading-[1.6]">
                {locale === 'en' ? "Get to know us. From our foundation in Barcelona to our national consolidation." : 
                 locale === 'ca' ? "Coneix-nos. Des de la nostra fundació a Barcelona fins a la nostra consolidació nacional." : 
                 "Conócenos. Desde nuestra fundación en Barcelona hasta nuestra consolidación a nivel nacional."}
              </p>
            </div>
          </div>

          <div className="md:w-2/3 space-y-10 text-[18px] text-navy/80 font-medium leading-[1.7]">
            <motion.p 
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              {t.nosotros.history.p1}
            </motion.p>
            <motion.p 
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
            >
              {t.nosotros.history.p2}
            </motion.p>
            <motion.p 
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
            >
              {t.nosotros.history.p3}
            </motion.p>
          </div>
        </div>
      </section>

      {/* Sección Misión con Cards horizontales */}
      <section className="w-full bg-white pt-24 pb-12 border-t border-crisp">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-ocean mb-12">
            {locale === 'en' ? "Our Mission" : locale === 'ca' ? "La nostra Missió" : "Nuestra Misión"}
          </h2>

          <div className="space-y-6">
            <Card variant="none" className="flex-row items-center gap-12 group py-12" delay={0.1}>
              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">01.</div>
              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m1Title}</h3>
                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
                  {t.nosotros.mission.m1Desc}
                </p>
              </div>
            </Card>

            <Card variant="none" className="flex-row items-center gap-12 group py-12" delay={0.2}>
              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">02.</div>
              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m2Title}</h3>
                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
                  {t.nosotros.mission.m2Desc}
                </p>
              </div>
            </Card>

            <Card variant="none" className="flex-row items-center gap-12 group py-12 border-b border-crisp" delay={0.3}>
              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">03.</div>
              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m3Title}</h3>
                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
                  {t.nosotros.mission.m3Desc}
                </p>
              </div>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Final */}
      <section className="w-full bg-white py-24">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <div className="w-full bg-navy rounded-[32px] p-12 md:p-20 text-center flex flex-col items-center">
            <h2 className="text-[40px] md:text-[56px] font-extrabold text-white tracking-tight leading-[1.1] mb-6 max-w-2xl">
              {locale === 'en' ? "A team ready to understand your market." : 
               locale === 'ca' ? "Un equip disposat a entendre el teu mercat." : 
               "Un equipo dispuesto a entender tu mercado."}
            </h2>
            <p className="text-[18px] text-white/70 font-medium mb-10 max-w-lg">
              {locale === 'en' ? "Let's talk about your next research project. Tell us what you need to discover." : 
               locale === 'ca' ? "Parlem del teu proper projecte de recerca. Explica'ns què necessites descobrir." : 
               "Hablemos de tu próximo proyecto de investigación. Cuéntanos qué necesitas descubrir."}
            </p>
            <Link href="/contacto">
              <Button variant="outline" className="bg-white border-white text-navy hover:bg-ice transition-colors">
                {t.navbar.contacto}
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}