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

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

  // Helper para las etiquetas de los meses en el SVG según el idioma
  const months = {
    es: ["ENE", "MAR", "JUN", "SEP", "DIC"],
    ca: ["GEN", "MAR", "JUN", "SET", "DES"],
    en: ["JAN", "MAR", "JUN", "SEP", "DEC"]
  };

  return (
    <div className="w-full overflow-x-hidden">
      {/* Hero Section */}
      <section className="max-w-7xl mx-auto px-6 lg:px-12 pt-12 md:pt-20 pb-20 md:pb-32">
        <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-12">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="flex-1 w-full text-center lg:text-left"
          >
            <Badge>{t.home.badge}</Badge>
            <h1 className="text-[40px] sm:text-[56px] lg:text-[88px] font-extrabold text-navy leading-[1.1] lg:leading-[0.95] tracking-tight mb-6 md:mb-8">
              {/* Dividimos el título para mantener el salto de línea estético */}
              {locale === 'en' ? "The value" : locale === 'ca' ? "El valor" : "El valor"} <br />
              <span className="text-ocean">
                {locale === 'en' ? "of knowing." : locale === 'ca' ? "de saber." : "de saber."}
              </span>
            </h1>
            <p className="text-[16px] md:text-[20px] text-navy/70 leading-relaxed max-w-lg mx-auto lg:mx-0 mb-8 md:mb-10 font-medium">
              {t.home.description}
            </p>
            <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
              <Link href="/servicios" className="w-full sm:w-auto">
                <Button variant="primary" className="w-full">{t.home.btnServices}</Button>
              </Link>
              <Link href="/nosotros" className="w-full sm:w-auto">
                <Button variant="outline" className="w-full">{t.home.btnMethod}</Button>
              </Link>
            </div>
          </motion.div>

          {/* Gráfico Animado SVG */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1, delay: 0.2 }}
            className="flex-1 w-full max-w-[500px] lg:max-w-none shadow-2xl rounded-[20px] md:rounded-[28px] overflow-hidden border border-crisp"
          >
            <svg
              viewBox="0 0 800 420"
              xmlns="http://www.w3.org/2000/svg"
              className="w-full h-auto block"
              role="img"
              aria-label="Animación de estadísticas"
            >
              <defs>
                <linearGradient id="barGradient" x1="0" y1="1" x2="0" y2="0">
                  <stop offset="0%" stopColor="#03045E" />
                  <stop offset="100%" stopColor="#0077B6" />
                </linearGradient>

                <style>{`
                  .bg-svg { fill: #ffffff; }
                  .axis-svg { stroke: #03045E; stroke-width: 2; stroke-linecap: round; opacity: 0.2; }
                  .grid-svg { stroke: #CAF0F8; stroke-width: 1; stroke-dasharray: 4 8; }
                  .bar-svg { fill: url(#barGradient); rx: 8; transform-box: fill-box; transform-origin: bottom; animation: mutateBars 7s ease-in-out infinite; }
                  .bar-svg:nth-of-type(1) { animation-delay: 0s; }
                  .bar-svg:nth-of-type(2) { animation-delay: .15s; }
                  .bar-svg:nth-of-type(3) { animation-delay: .3s; }
                  .bar-svg:nth-of-type(4) { animation-delay: .45s; }
                  .bar-svg:nth-of-type(5) { animation-delay: .6s; }
                  .line-svg { fill: none; stroke: #00B4D8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: drawLine 7s ease-in-out infinite; }
                  .dot-svg { fill: #03045E; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulseDots 7s ease-in-out infinite; }
                  .dot-svg:nth-of-type(1) { animation-delay: .1s; }
                  .dot-svg:nth-of-type(2) { animation-delay: .2s; }
                  .dot-svg:nth-of-type(3) { animation-delay: .3s; }
                  .dot-svg:nth-of-type(4) { animation-delay: .4s; }
                  .dot-svg:nth-of-type(5) { animation-delay: .5s; }
                  .label-svg { font-family: 'Manrope', sans-serif; font-size: 14px; fill: #03045E; opacity: .5; font-weight: 600; }
                  .title-svg { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; fill: #03045E; text-transform: uppercase; letter-spacing: 1px; }
                  .metric-svg { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 800; fill: #0077B6; animation: fadeMetric 7s ease-in-out infinite; }
                  .chip-svg { fill: #CAF0F8; opacity: 0.3; }
                  .chipText-svg { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; fill: #0077B6; animation: chipShift 7s ease-in-out infinite; }

                  @keyframes mutateBars {
                    0%, 100% { transform: scaleY(.35); opacity: .4; }
                    20% { transform: scaleY(1); opacity: 1; }
                    40% { transform: scaleY(.62); opacity: .7; }
                    60% { transform: scaleY(.15); opacity: .3; }
                    80% { transform: scaleY(.9); opacity: .9; }
                  }
                  @keyframes drawLine {
                    0%, 22% { stroke-dashoffset: 520; opacity: 0; }
                    38%, 62% { stroke-dashoffset: 0; opacity: 1; }
                    78%, 100% { stroke-dashoffset: -520; opacity: 0; }
                  }
                  @keyframes pulseDots {
                    0%, 25% { opacity: 0; transform: scale(.2); }
                    42%, 62% { opacity: 1; transform: scale(1); }
                    82%, 100% { opacity: 0; transform: scale(.2); }
                  }
                  @keyframes fadeMetric {
                    0%, 18% { opacity: .4; }
                    28%, 50% { opacity: 1; }
                    65%, 100% { opacity: .55; }
                  }
                  @keyframes chipShift {
                    0%, 100% { opacity: .45; }
                    35%, 65% { opacity: 1; }
                  }
                `}</style>
              </defs>

              <rect className="bg-svg" width="800" height="420" rx="28" />
              <text className="title-svg" x="64" y="72">
                {locale === 'en' ? "REAL-TIME DATA" : locale === 'ca' ? "DADES EN TEMPS REAL" : "DATOS EN TIEMPO REAL"}
              </text>
              <text className="label-svg" x="64" y="98">
                {locale === 'en' ? "Trends and Projections" : locale === 'ca' ? "Tendències i Projeccions" : "Tendencias y Proyecciones"}
              </text>
              <rect className="chip-svg" x="610" y="52" width="126" height="38" rx="19" />
              <text className="chipText-svg" x="635" y="76">LIVE DATA</text>
              <text className="metric-svg" x="64" y="165">92.4%</text>
              <text className="label-svg" x="64" y="192">
                {locale === 'en' ? "analysis precision" : locale === 'ca' ? "precisió d'anàlisi" : "precisión de análisis"}
              </text>

              <line className="grid-svg" x1="250" y1="120" x2="720" y2="120" />
              <line className="grid-svg" x1="250" y1="180" x2="720" y2="180" />
              <line className="grid-svg" x1="250" y1="240" x2="720" y2="240" />
              <line className="grid-svg" x1="250" y1="300" x2="720" y2="300" />

              <line className="axis-svg" x1="250" y1="330" x2="720" y2="330" />
              <line className="axis-svg" x1="250" y1="110" x2="250" y2="330" />

              <rect className="bar-svg" x="295" y="150" width="48" height="180" />
              <rect className="bar-svg" x="380" y="205" width="48" height="125" />
              <rect className="bar-svg" x="465" y="125" width="48" height="205" />
              <rect className="bar-svg" x="550" y="185" width="48" height="145" />
              <rect className="bar-svg" x="635" y="95" width="48" height="235" />

              <path className="line-svg" d="M319 250 C350 210, 380 240, 404 220 C440 185, 470 160, 489 180 C525 215, 550 210, 574 190 C610 155, 640 120, 659 145" />

              <circle className="dot-svg" cx="319" cy="250" r="7" />
              <circle className="dot-svg" cx="404" cy="220" r="7" />
              <circle className="dot-svg" cx="489" cy="180" r="7" />
              <circle className="dot-svg" cx="574" cy="190" r="7" />
              <circle className="dot-svg" cx="659" cy="145" r="7" />

              {months[locale].map((month, i) => (
                <text key={i} className="label-svg" x={304 + (i * 85)} y="360">{month}</text>
              ))}
            </svg>
          </motion.div>
        </div>
      </section>

      {/* Grid de Propuesta de Valor */}
      <section className="bg-ice/10 py-16 md:py-24 border-t border-crisp">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <div className="mb-12 md:mb-16 max-w-2xl text-center md:text-left mx-auto md:mx-0">
            <h2 className="text-[32px] md:text-[40px] font-extrabold text-navy tracking-tight leading-[1.1] mb-4">
              {t.home.whyUs.title}
            </h2>
            <p className="text-[16px] md:text-[18px] text-navy/60 font-medium">
              {t.home.whyUs.desc}
            </p>
          </div>

          <BentoGrid>
            {/* Card 1 */}
            <Card variant="ice" className="md:col-span-2 min-h-[280px] md:min-h-[320px] justify-between group" delay={0.1}>
              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-ocean">
                01 / {locale === 'en' ? "Analysis" : locale === 'ca' ? "Anàlisi" : "Análisis"}
              </div>
              <div>
                <h3 className="text-[26px] md:text-[32px] font-extrabold text-navy mb-3 md:mb-4 leading-tight">
                  {t.home.whyUs.card1Title}
                </h3>
                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed max-w-md font-medium">
                  {t.home.whyUs.card1Desc}
                </p>
              </div>
            </Card>

            {/* Card 2 */}
            <Card variant="white" className="md:col-span-1 min-h-[280px] md:min-h-[320px] justify-between" delay={0.2}>
              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-sky">
                02 / {locale === 'en' ? "Coverage" : locale === 'ca' ? "Cobertura" : "Cobertura"}
              </div>
              <div>
                <h3 className="text-[26px] md:text-[28px] font-extrabold text-navy mb-3 md:mb-4">
                  {t.home.whyUs.card2Title}
                </h3>
                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed font-medium">
                  {t.home.whyUs.card2Desc}
                </p>
              </div>
            </Card>

            {/* Card 3 */}
            <Card variant="white" className="md:col-span-1 min-h-[280px] md:min-h-[320px] justify-between" delay={0.3}>
              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-sky">
                03 / {locale === 'en' ? "Flexibility" : locale === 'ca' ? "Flexibilitat" : "Flexibilidad"}
              </div>
              <div>
                <h3 className="text-[26px] md:text-[28px] font-extrabold text-navy mb-3 md:mb-4">
                  {t.home.whyUs.card3Title}
                </h3>
                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed font-medium">
                  {t.home.whyUs.card3Desc}
                </p>
              </div>
            </Card>

            {/* CTA Card */}
            <Card variant="navy" className="md:col-span-2 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-8 p-8 md:p-10" delay={0.4}>
              <div className="flex-1 text-center md:text-left">
                <h3 className="text-[26px] md:text-[32px] font-extrabold text-white mb-2 leading-tight">
                  {t.home.whyUs.ctaTitle}
                </h3>
                <p className="text-white/70 font-medium max-w-sm mx-auto md:mx-0">
                  {t.home.whyUs.ctaDesc}
                </p>
              </div>
              <Link href="/contacto" className="w-full md:w-auto">
                <Button variant="ocean" className="w-full md:w-auto whitespace-nowrap">
                  {t.home.whyUs.ctaBtn}
                </Button>
              </Link>
            </Card>
          </BentoGrid>
        </div>
      </section>
    </div>
  );
}