"use client";

import { useMemo, useState } from "react";
import { motion } from "framer-motion";

type ServicesAndPricingProps = {
  lang: "es" | "en";
  onContact: () => void;
};

type ServiceCard = {
  id: string;
  icon: string;
  title: string;
  for: string;
  description: string[];
  sections?: { title: string; items: string[] }[];
  setup: string;
  monthly: number | null;
  term: string;
  features: string[];
  optional: string[];
  cta: string;
  popular?: boolean;
  subtext?: string;
};

const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0 },
};

const content = {
  es: {
    sectionTitle: "Servicios y Precios",
    sectionEyebrow: "Servicios y Precios",
    headline: "Convertimos tu web en un vendedor inteligente que trabaja 24/7",
    subheadline:
      "En 2026, los clientes esperan respuestas instantáneas, reservas sin fricción y experiencias personalizadas. Si tu web no puede hacerlo, están yendo a tu competencia.",
    yearlyLabel: "Pago anual",
    yearlyDesc: "Paga anual y ahorra 15%",
    saveLabel: "Descuento 15%",
    setupLabel: "Instalación",
    fromLabel: "Desde",
    perMonth: "/mes",
    billedAnnually: "(facturado anualmente)",
    examplesTitle: "Casos de uso reales en Costa del Sol",
    examplesCta: "Descubre tu plan ideal",
    fairUseNote: "Todos los planes incluyen un uso generoso de IA para un negocio típico. Se aplica una",
    fairUseLink: "política de uso justo",
    fairUseEnd: ", sin cargos sorpresa.",
    fairUseTitle: "Uso justo",
    fairUseQuestion: 'Qué significa "uso justo"?',
    close: "Cerrar",
    fairUseBody: [
      "Cada plan incluye suficientes mensajes de IA, llamadas y conversaciones de WhatsApp para un negocio típico de tu tamaño.",
      "Si tu uso se mantiene muy por encima de lo normal (por ejemplo, porque añades nuevas marcas, locales o campañas), haremos lo siguiente:",
    ],
    fairUseList: [
      "Te avisaremos primero.",
      "Te enviaremos un informe sencillo de uso.",
      "Te propondremos opciones (seguir igual con algunos límites o subir de plan / añadir más capacidad).",
    ],
    fairUseEndBody: "Nunca aplicamos cargos extra sin hablar contigo antes.",
    popular: "Más popular",
  },
  en: {
    sectionTitle: "Services & Pricing",
    sectionEyebrow: "Services & Pricing",
    headline: "Turn your website into a 24/7 intelligent salesperson",
    subheadline:
      "In 2026, customers expect instant answers, frictionless bookings, and personalized experiences. If your site can't deliver, they're going to your competitors.",
    yearlyLabel: "Pay yearly",
    yearlyDesc: "Pay yearly - Save 15%",
    saveLabel: "Save 15%",
    setupLabel: "Setup",
    fromLabel: "From",
    perMonth: "/month",
    billedAnnually: "(billed annually)",
    examplesTitle: "Real use cases on the Costa del Sol",
    examplesCta: "Find your ideal plan",
    fairUseNote: "All plans include generous AI usage for a typical business. A",
    fairUseLink: "fair use policy",
    fairUseEnd: " applies, no surprise charges.",
    fairUseTitle: "Fair use",
    fairUseQuestion: 'What does "fair use" mean?',
    close: "Close",
    fairUseBody: [
      "Each plan includes enough AI messages, calls and WhatsApp conversations for a typical business of your size.",
      "If your usage stays well above normal (e.g. you add new brands, locations or campaigns), we will:",
    ],
    fairUseList: [
      "Notify you first.",
      "Send you a simple usage report.",
      "Propose options (continue as-is with some limits, or upgrade / add capacity).",
    ],
    fairUseEndBody: "We never apply extra charges without speaking to you first.",
    popular: "Most popular",
  },
} as const;

const serviceCards: Record<"es" | "en", ServiceCard[]> = {
  es: [
    {
      id: "starter",
      icon: "💬",
      title: "AI Chat + Reservas Automatizadas",
      for: "Restaurantes, clínicas, negocios locales con web existente",
      description: [
        "¿Tu web pierde clientes fuera de horario? Tu sitio responde preguntas, toma reservas y captura leads mientras duermes.",
      ],
      sections: [
        {
          title: "Resultados típicos:",
          items: [
            "24/7 reservas sin intervención humana",
            "Reduce llamadas repetitivas en un 70%",
            "ROI positivo en el primer mes",
          ],
        },
      ],
      setup: "900 €",
      monthly: 299,
      term: "6-12 meses",
      features: [
        "Chat IA en la web (1 idioma)",
        "Reservas y captación de leads",
        "Analíticas básicas",
      ],
      optional: ["+WhatsApp (+100€/mes)", "+Idioma extra (+80€/mes)"],
      cta: "Empezar",
    },
    {
      id: "site",
      icon: "🌐",
      title: "Web Inteligente Completa",
      for: "Negocios listos para una web moderna + cerebro IA",
      description: [
        "Construimos tu nuevo sitio web Next.js (rápido, seguro, SEO) e integramos IA que vende, reserva y da soporte en español e inglés.",
      ],
      sections: [
        {
          title: "Incluye:",
          items: [
            "Sitio que convierte visitas en ventas",
            "Chat + WhatsApp incluidos",
            "2 idiomas desde el día uno",
            "Analíticas avanzadas",
          ],
        },
      ],
      setup: "3.500 €",
      monthly: 749,
      term: "6-12 meses",
      features: [
        "Todo lo de Starter",
        "Nuevo sitio web Next.js",
        "WhatsApp incluido",
        "2 idiomas (ES+EN)",
      ],
      optional: ["+Llamadas de voz (+150€/mes)", "+Ubicación extra (+120€/mes)"],
      cta: "Empezar",
      popular: true,
    },
    {
      id: "growth",
      icon: "🚀",
      title: "Partner Estratégico de IA",
      for: "Grupos de restaurantes, inmobiliarias, cadenas de alquiler",
      description: [
        "Socio estratégico: IA multicanal (web, WhatsApp, llamadas), integraciones CRM y consultoría mensual.",
      ],
      sections: [
        {
          title: "Incluye:",
          items: [
            "Todo lo de Smart Site",
            "Llamadas de voz incluidas",
            "Soporte multiubicación",
            "Integraciones CRM",
            "Llamada estratégica mensual",
          ],
        },
      ],
      setup: "5.000 €",
      monthly: 1950,
      term: "12 meses",
      features: [
        "Todo lo de Smart Site",
        "Llamadas de voz incluidas",
        "Integraciones CRM",
        "Soporte prioritario",
      ],
      optional: ["+Pack contenido IA (+200€/mes)"],
      cta: "Hablemos",
    },
    {
      id: "enterprise",
      icon: "🎯",
      title: "Enterprise / A medida",
      for: "Operaciones a escala con necesidades custom",
      description: [
        "Todo adaptado a tu operación: multimarca, white-label, account manager dedicado y SLA de rendimiento.",
      ],
      setup: "Personalizado",
      monthly: null,
      term: "Definimos el alcance contigo",
      features: [
        "Todo a medida",
        "Multimarca y white-label",
        "Account manager dedicado",
        "SLA de rendimiento",
      ],
      optional: [],
      cta: "Contactar",
      subtext: "Hablemos",
    },
  ],
  en: [
    {
      id: "starter",
      icon: "💬",
      title: "AI Chat + Automated Bookings",
      for: "Restaurants, clinics, local businesses with existing websites",
      description: [
        "Is your website losing customers after hours? Your site answers questions, takes bookings, and captures leads while you sleep.",
      ],
      sections: [
        {
          title: "Typical results:",
          items: [
            "24/7 bookings without human intervention",
            "Reduce repetitive calls by 70%",
            "Positive ROI in the first month",
          ],
        },
      ],
      setup: "900 €",
      monthly: 299,
      term: "6-12 months",
      features: [
        "AI website chat (1 language)",
        "Booking & lead capture",
        "Basic analytics",
      ],
      optional: ["+WhatsApp (+100€/mo)", "+Extra language (+80€/mo)"],
      cta: "Get started",
    },
    {
      id: "site",
      icon: "🌐",
      title: "Full Smart Website",
      for: "Businesses ready for a modern site + AI brain",
      description: [
        "We build your new Next.js website (fast, secure, SEO) and integrate AI that sells, books, and supports in Spanish and English.",
      ],
      sections: [
        {
          title: "Includes:",
          items: [
            "Site that converts visits into sales",
            "Chat + WhatsApp included",
            "2 languages from day one",
            "Advanced analytics",
          ],
        },
      ],
      setup: "3,500 €",
      monthly: 749,
      term: "6-12 months",
      features: [
        "Everything in Starter",
        "New Next.js website",
        "WhatsApp included",
        "2 languages (ES+EN)",
      ],
      optional: ["+Voice calls (+150€/mo)", "+Extra location (+120€/mo)"],
      cta: "Get started",
      popular: true,
    },
    {
      id: "growth",
      icon: "🚀",
      title: "AI Strategy Partner",
      for: "Restaurant groups, real estate teams, rental chains",
      description: [
        "Strategic partner: multichannel AI (web, WhatsApp, calls), CRM integrations, monthly consulting.",
      ],
      sections: [
        {
          title: "Includes:",
          items: [
            "Everything in Smart Site",
            "Voice calls included",
            "Multi-location support",
            "CRM integrations",
            "Monthly strategy call",
          ],
        },
      ],
      setup: "5,000 €",
      monthly: 1950,
      term: "12 months",
      features: [
        "Everything in Smart Site",
        "Voice calls included",
        "CRM integrations",
        "Priority support",
      ],
      optional: ["+AI content pack (+200€/mo)"],
      cta: "Let's talk",
    },
    {
      id: "enterprise",
      icon: "🎯",
      title: "Enterprise / Custom",
      for: "Large-scale operations with custom needs",
      description: [
        "Everything tailored: multi-brand, white-label, dedicated account manager, performance SLA.",
      ],
      setup: "Custom",
      monthly: null,
      term: "Let us scope it",
      features: [
        "Everything tailored",
        "Multi-brand & white-label",
        "Dedicated account manager",
        "Performance SLAs",
      ],
      optional: [],
      cta: "Contact us",
      subtext: "Let's talk",
    },
  ],
};

const examples = {
  es: [
    { title: "🍽️ Restaurantes", text: "Reservas a las 3 AM, respuestas sobre alérgenos, sugerencias de platos." },
    { title: "🏠 Inmobiliarias", text: "IA responde dudas, agenda visitas, cualifica leads." },
    { title: "🚗 Rent a Car", text: "Cotiza y reserva en 3 idiomas sin intervención humana." },
  ],
  en: [
    { title: "🍽️ Restaurants", text: "Reservations at 3 AM, allergy answers, dish suggestions." },
    { title: "🏠 Real Estate", text: "AI answers questions, books viewings, qualifies leads." },
    { title: "🚗 Rent a Car", text: "Quote and book in 3 languages with no human intervention." },
  ],
};

export default function ServicesAndPricing({
  lang,
  onContact,
}: ServicesAndPricingProps) {
  const [yearly, setYearly] = useState(false);
  const [showFairUse, setShowFairUse] = useState(false);

  const t = content[lang];
  const cards = serviceCards[lang];

  const formatMonthly = (value: number) => {
    const price = yearly ? Math.round(value * 0.85) : value;
    return `${price} €${t.perMonth}`;
  };

  return (
    <section
      id="services"
      className="mx-auto w-full max-w-6xl px-6 py-20"
    >
      <motion.div
        variants={fadeUp}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.7 }}
      >
        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/70">
          {t.sectionEyebrow}
        </p>
        <h2 className="mt-4 text-3xl font-bold sm:text-4xl">
          {t.sectionTitle}
        </h2>
        <p className="mt-4 max-w-3xl text-base text-white/85">
          {t.subheadline}
        </p>
      </motion.div>

      <div className="mt-6 flex flex-col items-center justify-between gap-4 rounded-2xl border border-white/15 bg-white/10 p-5 text-center backdrop-blur sm:flex-row">
        <div>
          <p className="text-sm font-semibold text-white/90">{t.yearlyLabel}</p>
          <p className="mt-1 text-sm text-white/75">{t.yearlyDesc}</p>
        </div>
        <button
          type="button"
          onClick={() => setYearly((prev) => !prev)}
          className="flex items-center gap-3 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-sm font-semibold text-white"
        >
          <span>{t.saveLabel}</span>
          <span
            className={`relative block h-6 w-11 rounded-full transition ${
              yearly ? "bg-brand-pink" : "bg-white/20"
            }`}
          >
            <span
              className={`absolute left-1 top-1 h-4 w-4 rounded-full bg-white transition ${
                yearly ? "translate-x-5" : ""
              }`}
            />
          </span>
        </button>
      </div>

      <div className="mt-10 grid gap-6 lg:grid-cols-2 xl:grid-cols-4">
        {cards.map((card, index) => (
          <motion.div
            key={card.id}
            variants={fadeUp}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.2 }}
            transition={{ duration: 0.5, delay: index * 0.08 }}
            className={`flex flex-col rounded-2xl border p-6 backdrop-blur transition hover:border-white/30 ${
              card.popular
                ? "border-brand-pink bg-white/12 shadow-purple-soft"
                : "border-white/15 bg-white/8"
            }`}
          >
            {card.popular && (
              <span className="mb-3 inline-flex w-fit rounded-full bg-brand-pink/25 px-3 py-0.5 text-xs font-semibold text-white">
                {t.popular}
              </span>
            )}
            <div className="flex items-center gap-3">
              <span className="text-2xl">{card.icon}</span>
              <h3 className="text-lg font-semibold">{card.title}</h3>
            </div>
            <p className="mt-2 text-sm text-white/70">{card.for}</p>

            <div className="mt-4 space-y-2 text-sm text-white/90">
              {card.description.map((p, i) => (
                <p key={i}>{p}</p>
              ))}
            </div>

            {card.sections?.map((section) => (
              <div key={section.title} className="mt-4">
                <p className="text-xs font-semibold text-white/85">
                  {section.title}
                </p>
                <ul className="mt-2 space-y-1 text-xs text-white/80">
                  {section.items.map((item) => (
                    <li key={item}>• {item}</li>
                  ))}
                </ul>
              </div>
            ))}

            <div className="mt-6 rounded-xl border border-white/15 bg-white/5 px-4 py-3">
              <p className="text-xs text-white/70">
                {t.setupLabel}: <span className="font-semibold text-white">{card.setup}</span>
              </p>
              <p className="mt-1 text-xl font-bold text-brand-pink">
                {card.monthly === null
                  ? card.subtext
                  : card.monthly !== null
                  ? `${t.fromLabel} ${formatMonthly(card.monthly)}`
                  : null}
              </p>
              <p className="mt-1 text-xs text-white/60">
                {card.term}
                {card.monthly !== null && yearly && (
                  <span className="block">{t.billedAnnually}</span>
                )}
              </p>
            </div>

            <ul className="mt-4 space-y-1.5 text-sm text-white/85">
              {card.features.map((f) => (
                <li key={f}>✓ {f}</li>
              ))}
            </ul>
            {card.optional.length > 0 && (
              <p className="mt-3 text-xs text-white/60">
                {card.optional.join(" · ")}
              </p>
            )}

            <button
              onClick={onContact}
              className="mt-auto mt-6 w-full rounded-lg bg-brand-pink py-2.5 text-sm font-semibold text-white transition hover:bg-[#ff7bc0]"
            >
              {card.cta}
            </button>
          </motion.div>
        ))}
      </div>

      <div className="mt-16 rounded-2xl border border-white/15 bg-white/10 p-8 backdrop-blur">
        <h3 className="text-xl font-semibold">{t.examplesTitle}</h3>
        <div className="mt-6 grid gap-4 md:grid-cols-3">
          {examples[lang].map((ex) => (
            <div
              key={ex.title}
              className="rounded-xl border border-white/10 bg-white/5 p-4"
            >
              <p className="text-lg">{ex.title}</p>
              <p className="mt-2 text-sm text-white/80">"{ex.text}"</p>
            </div>
          ))}
        </div>
        <div className="mt-6 flex justify-center">
          <button
            onClick={onContact}
            className="rounded-lg bg-brand-pink px-6 py-3 text-sm font-semibold text-white transition hover:bg-[#ff7bc0]"
          >
            {t.examplesCta}
          </button>
        </div>
      </div>

      <p className="mt-6 text-center text-xs text-white/70">
        {t.fairUseNote}{" "}
        <button
          type="button"
          onClick={() => setShowFairUse(true)}
          className="font-semibold text-white underline decoration-white/60 underline-offset-2"
        >
          {t.fairUseLink}
        </button>
        {t.fairUseEnd}
      </p>

      {showFairUse && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
            className="absolute inset-0 bg-black/60"
            onClick={() => setShowFairUse(false)}
          />
          <div className="relative z-10 w-full max-w-lg rounded-2xl border border-white/20 bg-[#4a3572] p-8 text-white shadow-xl">
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-xs uppercase tracking-widest text-white/70">
                  {t.fairUseTitle}
                </p>
                <h3 className="mt-2 text-xl font-bold">{t.fairUseQuestion}</h3>
              </div>
              <button
                onClick={() => setShowFairUse(false)}
                className="rounded-full border border-white/40 px-3 py-1 text-xs font-semibold text-white/80 hover:bg-white/10"
              >
                {t.close}
              </button>
            </div>
            <div className="mt-6 space-y-3 text-sm text-white/85">
              {t.fairUseBody.map((p) => (
                <p key={p}>{p}</p>
              ))}
              <ol className="list-decimal space-y-2 pl-5">
                {t.fairUseList.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ol>
              <p className="font-medium">{t.fairUseEndBody}</p>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}