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

const useTypewriter = (words: string[], speed = 110, pause = 1400) => {
  const [index, setIndex] = useState(0);
  const [subIndex, setSubIndex] = useState(0);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    setIndex(0);
    setSubIndex(0);
    setDeleting(false);
  }, [words]);

  useEffect(() => {
    const current = words[index] ?? "";
    if (!deleting && subIndex === current.length) {
      const timeout = setTimeout(() => setDeleting(true), pause);
      return () => clearTimeout(timeout);
    }
    if (deleting && subIndex === 0) {
      setDeleting(false);
      setIndex((prev) => (prev + 1) % words.length);
      return undefined;
    }

    const timeout = setTimeout(
      () => setSubIndex((prev) => prev + (deleting ? -1 : 1)),
      deleting ? speed * 0.6 : speed
    );
    return () => clearTimeout(timeout);
  }, [words, index, subIndex, deleting, speed, pause]);

  return words[index]?.substring(0, subIndex) ?? "";
};

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

type Language = "es" | "en";

const contentByLang = {
  es: {
    nav: {
      services: "Servicios",
      method: "Método",
      pricing: "Precios",
      contact: "Contacto",
      cta: "Agenda una demo",
    },
    hero: {
      badge:
        "Agencia de implementación de IA para negocios locales en España",
      title: "Tu negocio nunca duerme. Nosotros tampoco.",
      subtitle:
        "Implementamos IA que responde, vende y fideliza mientras tú descansas. Diseñado para",
      ctaPrimary: "Quiero automatizar mi negocio",
      ctaSecondary: "Ver casos reales",
      highlights: [
        "Setup en 48 horas",
        "ROI medible desde el primer mes",
        "Equipo bilingüe ES / EN",
      ],
      sectors: ["Restaurantes", "Clínicas", "Salones", "Inmobiliarias"],
    },
    services: {
      eyebrow: "Servicios",
      title: "IA lista para trabajar en tu negocio.",
      items: [
        {
          title: "Agentes de voz con IA",
          description:
            "Atiende llamadas 24/7, confirma reservas y responde preguntas sin perder oportunidades.",
        },
        {
          title: "Chatbots inteligentes",
          description:
            "Convierte visitas web en clientes con soporte inmediato y respuestas personalizadas.",
        },
        {
          title: "Webs inteligentes",
          description:
            "Sitios modernos y rápidos con IA integrada para captar, convencer y vender.",
        },
        {
          title: "Automatización de negocio",
          description:
            "Emails, recordatorios y CRM conectados para que tu equipo se enfoque en lo importante.",
        },
      ],
    },
    method: {
      eyebrow: "Cómo funciona",
      title: "Tu IA en marcha en tres pasos.",
      steps: [
        {
          title: "Diagnóstico inteligente",
          text: "Analizamos tus procesos y detectamos dónde la IA aporta más valor.",
        },
        {
          title: "Implementación exprés",
          text: "Configuramos agentes y flujos en días, no en meses.",
        },
        {
          title: "Crecimiento continuo",
          text: "Optimización semanal basada en datos reales de tu negocio.",
        },
      ],
    },
    pricing: {
      eyebrow: "Precios",
      title: "Planes claros para resultados medibles.",
      plans: [
        {
          name: "Impulso",
          price: "390€",
          desc: "Ideal para empezar con IA en un área clave.",
          features: [
            "1 solución IA",
            "Integración web básica",
            "Soporte por email",
          ],
        },
        {
          name: "Pro",
          price: "790€",
          desc: "El plan favorito para negocios en crecimiento.",
          features: [
            "2 soluciones IA",
            "Automatizaciones avanzadas",
            "Soporte prioritario",
          ],
          popular: true,
        },
        {
          name: "Elite",
          price: "1390€",
          desc: "Para operaciones que quieren IA en todo su embudo.",
          features: [
            "Soluciones IA ilimitadas",
            "Integraciones a medida",
            "Acompañamiento estratégico",
          ],
        },
      ],
      popularBadge: "Más popular",
      cta: "Empezar ahora",
    },
    stats: [
      { value: "24/7", label: "Atención automática" },
      { value: "3x", label: "Más reservas" },
      { value: "48h", label: "Tiempo medio de implementación" },
      { value: "+120", label: "Negocios locales servidos" },
    ],
    cta: {
      title: "Haz que tu negocio responda solo.",
      text:
        "Agenda una demo y descubre cómo SiteMente implementa IA real en tu operación diaria.",
      button: "Hablar con SiteMente",
    },
    footer: {
      tagline: "Parte de la familia HolaCompi.",
    },
  },
  en: {
    nav: {
      services: "Services",
      method: "Method",
      pricing: "Pricing",
      contact: "Contact",
      cta: "Book a demo",
    },
    hero: {
      badge:
        "AI implementation agency for local businesses in Spain",
      title: "Your business never sleeps. Neither do we.",
      subtitle:
        "We implement AI that responds, sells, and retains while you rest. Built for",
      ctaPrimary: "Automate my business",
      ctaSecondary: "See real results",
      highlights: [
        "Setup in 48 hours",
        "Measurable ROI in month one",
        "Bilingual team ES / EN",
      ],
      sectors: ["Restaurants", "Clinics", "Salons", "Real Estate"],
    },
    services: {
      eyebrow: "Services",
      title: "AI ready to work for your business.",
      items: [
        {
          title: "AI Voice Agents",
          description:
            "Answer calls 24/7, confirm bookings, and resolve questions without lost opportunities.",
        },
        {
          title: "AI Chat Widgets",
          description:
            "Turn website visits into customers with instant, personalized support.",
        },
        {
          title: "Smart Websites",
          description:
            "Modern, fast sites with built-in AI to capture, convince, and sell.",
        },
        {
          title: "Business Automation",
          description:
            "Emails, reminders, and CRM flows connected so your team stays focused.",
        },
      ],
    },
    method: {
      eyebrow: "How it works",
      title: "Your AI live in three steps.",
      steps: [
        {
          title: "Smart audit",
          text: "We map your workflows and pinpoint where AI adds the most value.",
        },
        {
          title: "Rapid implementation",
          text: "Agents and automations go live in days, not months.",
        },
        {
          title: "Continuous growth",
          text: "Weekly optimization based on real business data.",
        },
      ],
    },
    pricing: {
      eyebrow: "Pricing",
      title: "Clear plans for measurable results.",
      plans: [
        {
          name: "Starter",
          price: "€390",
          desc: "Ideal to launch AI in one key area.",
          features: [
            "1 AI solution",
            "Basic web integration",
            "Email support",
          ],
        },
        {
          name: "Pro",
          price: "€790",
          desc: "The go-to plan for growing businesses.",
          features: [
            "2 AI solutions",
            "Advanced automations",
            "Priority support",
          ],
          popular: true,
        },
        {
          name: "Elite",
          price: "€1,390",
          desc: "For operations that want AI across the full funnel.",
          features: [
            "Unlimited AI solutions",
            "Custom integrations",
            "Strategic guidance",
          ],
        },
      ],
      popularBadge: "Most popular",
      cta: "Get started",
    },
    stats: [
      { value: "24/7", label: "Automated support" },
      { value: "3x", label: "More bookings" },
      { value: "48h", label: "Average rollout time" },
      { value: "+120", label: "Local businesses served" },
    ],
    cta: {
      title: "Make your business respond on its own.",
      text:
        "Book a demo and see how SiteMente implements real AI in your daily operations.",
      button: "Talk to SiteMente",
    },
    footer: {
      tagline: "Part of the HolaCompi family.",
    },
  },
} as const satisfies Record<Language, object>;

export default function App() {
  const [lang, setLang] = useState<Language>("es");
  const [contactOpen, setContactOpen] = useState(false);
  const content = useMemo(() => contentByLang[lang], [lang]);
  const typed = useTypewriter(content.hero.sectors);

  return (
    <div className="font-sans text-white bg-brand-gradient">
      <header className="relative min-h-screen overflow-hidden">
        <div className="absolute inset-0">
          <div className="float-slow absolute -top-24 -left-24 h-72 w-72 rounded-full bg-white/20 blur-3xl" />
          <div className="float-medium absolute top-32 right-10 h-48 w-48 rounded-full bg-white/10 blur-2xl" />
          <div className="float-fast absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-white/10 blur-3xl" />
          <div className="float-medium absolute bottom-10 right-10 h-36 w-36 rounded-full bg-white/20 blur-2xl" />
        </div>

        <nav className="relative z-10 mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-6">
          <div className="text-xl font-bold tracking-wide">SiteMente</div>
          <div className="flex items-center gap-4">
            <div className="hidden items-center gap-6 text-sm font-medium md:flex">
              <a className="hover:text-white/80" href="#services">
                {content.nav.services}
              </a>
              <a className="hover:text-white/80" href="#method">
                {content.nav.method}
              </a>
              <a className="hover:text-white/80" href="#pricing">
                {content.nav.pricing}
              </a>
              <a className="hover:text-white/80" href="#contact">
                {content.nav.contact}
              </a>
            </div>
            <div className="flex items-center gap-3">
              <div className="flex rounded-full border border-white/40 bg-white/10 p-1 text-xs font-semibold">
                <button
                  onClick={() => setLang("es")}
                  className={`rounded-full px-3 py-1 transition ${
                    lang === "es"
                      ? "bg-white text-brand-purple-dark"
                      : "text-white/80 hover:text-white"
                  }`}
                >
                  ES
                </button>
                <button
                  onClick={() => setLang("en")}
                  className={`rounded-full px-3 py-1 transition ${
                    lang === "en"
                      ? "bg-white text-brand-purple-dark"
                      : "text-white/80 hover:text-white"
                  }`}
                >
                  EN
                </button>
              </div>
              <button
                onClick={() => setContactOpen(true)}
                className="rounded-lg border border-white/60 px-4 py-2 text-sm font-semibold transition hover:bg-white/10"
              >
                {content.nav.cta}
              </button>
              <button
                onClick={() => setContactOpen(true)}
                className="rounded-lg bg-brand-pink px-4 py-2 text-sm font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
              >
                {lang === "es" ? "Contactar" : "Contact"}
              </button>
            </div>
          </div>
        </nav>

        <div className="relative z-10 mx-auto flex w-full max-w-6xl flex-col items-start gap-10 px-6 pb-24 pt-10 md:pt-16">
          <motion.div
            variants={fadeUp}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.8 }}
            className="inline-flex items-center gap-2 rounded-full bg-white/20 px-4 py-1 text-sm backdrop-blur"
          >
            <span className="h-2 w-2 rounded-full bg-brand-pink" />
            {content.hero.badge}
          </motion.div>

          <motion.div
            variants={fadeUp}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.8, delay: 0.1 }}
            className="max-w-3xl"
          >
            <h1 className="text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
              {content.hero.title}
            </h1>
            <p className="mt-6 text-lg text-white/90 sm:text-xl">
              {content.hero.subtitle}{" "}
              <span className="font-semibold text-white">
                {typed}
                <span className="ml-1 inline-block h-6 w-1 animate-pulse bg-white align-middle" />
              </span>
            </p>
          </motion.div>

          <motion.div
            variants={fadeUp}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.8, delay: 0.2 }}
            className="flex flex-wrap gap-4"
          >
            <button
              onClick={() => setContactOpen(true)}
              className="rounded-lg bg-brand-pink px-6 py-3 text-base font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
            >
              {content.hero.ctaPrimary}
            </button>
            <button className="rounded-lg border border-white/80 px-6 py-3 text-base font-semibold text-white transition hover:bg-white/10">
              {content.hero.ctaSecondary}
            </button>
          </motion.div>

          <motion.div
            variants={fadeUp}
            initial="hidden"
            animate="visible"
            transition={{ duration: 0.8, delay: 0.3 }}
            className="grid w-full gap-4 md:grid-cols-3"
          >
            {content.hero.highlights.map((text) => (
              <div
                key={text}
                className="rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-medium backdrop-blur"
              >
                {text}
              </div>
            ))}
          </motion.div>
        </div>
      </header>

      <main className="bg-[#5e4a8a]">
        <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">
              {content.services.eyebrow}
            </p>
            <h2 className="mt-4 text-3xl font-bold sm:text-4xl">
              {content.services.title}
            </h2>
          </motion.div>

          <div className="mt-10 grid gap-6 md:grid-cols-2">
            {content.services.items.map((service, index) => (
              <motion.div
                key={service.title}
                variants={fadeUp}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.2 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="rounded-xl border border-white/20 bg-white/10 p-6 shadow-purple-soft backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)]"
              >
                <h3 className="text-xl font-semibold">
                  <span className="text-brand-pink">●</span> {service.title}
                </h3>
                <p className="mt-3 text-base text-white/90">
                  {service.description}
                </p>
              </motion.div>
            ))}
          </div>
        </section>

        <section
          id="method"
          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">
              {content.method.eyebrow}
            </p>
            <h2 className="mt-4 text-3xl font-bold sm:text-4xl">
              {content.method.title}
            </h2>
          </motion.div>

          <div className="mt-12 grid gap-8 md:grid-cols-3">
            {content.method.steps.map((step, index) => (
              <motion.div
                key={step.title}
                variants={fadeUp}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.2 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)]"
              >
                <div className="mb-4 h-1 w-12 rounded-full bg-brand-pink" />
                <h3 className="text-lg font-semibold">{step.title}</h3>
                <p className="mt-3 text-white/90">{step.text}</p>
              </motion.div>
            ))}
          </div>
        </section>

        <section
          id="pricing"
          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">
              {content.pricing.eyebrow}
            </p>
            <h2 className="mt-4 text-3xl font-bold sm:text-4xl">
              {content.pricing.title}
            </h2>
          </motion.div>

          <div className="mt-10 grid gap-6 lg:grid-cols-3">
            {content.pricing.plans.map((plan, index) => (
              <motion.div
                key={plan.name}
                variants={fadeUp}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.2 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className={`rounded-xl border bg-white/10 p-6 backdrop-blur transition duration-300 hover:-translate-y-2 hover:border-white/50 hover:bg-white/15 hover:shadow-[0_25px_50px_-20px_rgba(118,75,162,0.65)] ${
                  plan.popular
                    ? "border-brand-pink shadow-purple-soft"
                    : "border-white/20"
                }`}
              >
                {plan.popular && (
                  <div className="mb-4 inline-flex rounded-full bg-brand-pink/20 px-3 py-1 text-xs font-semibold text-white">
                    {content.pricing.popularBadge}
                  </div>
                )}
                <h3 className="text-xl font-semibold">{plan.name}</h3>
                <p className="mt-2 text-white/80">{plan.desc}</p>
                <p className="mt-6 text-3xl font-bold">{plan.price}</p>
                <ul className="mt-6 space-y-2 text-white/90">
                  {plan.features.map((feature) => (
                    <li key={feature}>• {feature}</li>
                  ))}
                </ul>
                <button
                  onClick={() => setContactOpen(true)}
                  className="mt-8 w-full rounded-lg bg-brand-pink px-4 py-2 text-sm font-semibold text-white transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
                >
                  {content.pricing.cta}
                </button>
              </motion.div>
            ))}
          </div>
        </section>

        <section 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 }}
            className="grid gap-6 rounded-2xl border border-white/20 bg-white/10 p-8 text-center backdrop-blur md:grid-cols-4"
          >
            {content.stats.map((stat) => (
              <div key={stat.label}>
                <p className="text-3xl font-bold text-brand-pink">
                  {stat.value}
                </p>
                <p className="mt-2 text-sm text-white/80">{stat.label}</p>
              </div>
            ))}
          </motion.div>
        </section>

        <section id="contact" className="bg-brand-gradient-dark py-20">
          <motion.div
            variants={fadeUp}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            transition={{ duration: 0.7 }}
            className="mx-auto flex w-full max-w-5xl flex-col items-start gap-6 px-6 md:flex-row md:items-center md:justify-between"
          >
            <div>
              <h2 className="text-3xl font-bold sm:text-4xl">
                {content.cta.title}
              </h2>
              <p className="mt-4 max-w-xl text-white/90">
                {content.cta.text}
              </p>
            </div>
            <button
              onClick={() => setContactOpen(true)}
              className="rounded-lg bg-brand-pink px-6 py-3 text-base font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
            >
              {content.cta.button}
            </button>
          </motion.div>
        </section>
      </main>

      <footer className="bg-brand-purple-dark">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-12 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-lg font-semibold">SiteMente</p>
            <p className="text-sm text-white/80">
              {content.footer.tagline}
            </p>
          </div>
          <div className="flex gap-6 text-sm text-white/80">
            <span>Madrid · Barcelona · Valencia</span>
            <span>hola@sitemente.ai</span>
          </div>
        </div>
      </footer>

      {contactOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => setContactOpen(false)}
          />
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className="relative z-10 w-full max-w-2xl rounded-2xl border border-white/20 bg-white/10 p-8 text-white shadow-purple-soft backdrop-blur"
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-sm uppercase tracking-[0.3em] text-white/70">
                  {lang === "es" ? "Formulario" : "Contact form"}
                </p>
                <h3 className="mt-3 text-2xl font-bold">
                  {lang === "es"
                    ? "Cuéntanos sobre tu negocio"
                    : "Tell us about your business"}
                </h3>
                <p className="mt-2 text-white/80">
                  {lang === "es"
                    ? "Te respondemos en menos de 24 horas."
                    : "We reply within 24 hours."}
                </p>
              </div>
              <button
                onClick={() => setContactOpen(false)}
                className="rounded-full border border-white/40 px-3 py-1 text-xs font-semibold text-white/80 transition hover:bg-white/10 hover:text-white"
              >
                {lang === "es" ? "Cerrar" : "Close"}
              </button>
            </div>

            <form
              action="https://formsubmit.co/hola@sitemente.com"
              method="POST"
              className="mt-8 grid gap-4"
            >
              <input type="hidden" name="_captcha" value="false" />
              <input type="hidden" name="_subject" value="Nuevo lead SiteMente" />
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-white/80">
                    {lang === "es" ? "Nombre" : "Name"}
                  </label>
                  <input
                    required
                    name="name"
                    placeholder={
                      lang === "es" ? "Tu nombre" : "Your name"
                    }
                    className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-white/80">
                    Email
                  </label>
                  <input
                    required
                    name="email"
                    type="email"
                    placeholder="hola@empresa.com"
                    className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
                  />
                </div>
              </div>
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-white/80">
                    {lang === "es" ? "Empresa" : "Company"}
                  </label>
                  <input
                    name="company"
                    placeholder={
                      lang === "es" ? "Nombre del negocio" : "Business name"
                    }
                    className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-white/80">
                    {lang === "es" ? "Teléfono" : "Phone"}
                  </label>
                  <input
                    name="phone"
                    placeholder="+34 600 000 000"
                    className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
                  />
                </div>
              </div>
              <div>
                <label className="text-sm font-semibold text-white/80">
                  {lang === "es" ? "Mensaje" : "Message"}
                </label>
                <textarea
                  required
                  name="message"
                  rows={4}
                  placeholder={
                    lang === "es"
                      ? "¿Qué quieres automatizar?"
                      : "What would you like to automate?"
                  }
                  className="mt-2 w-full rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-white placeholder:text-white/50 focus:border-white/60 focus:outline-none"
                />
              </div>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <p className="text-xs text-white/60">
                  {lang === "es"
                    ? "Al enviar, aceptas que te contactemos por email."
                    : "By submitting, you agree to be contacted by email."}
                </p>
                <button
                  type="submit"
                  className="rounded-lg bg-brand-pink px-6 py-3 text-sm font-semibold text-white shadow-purple-soft transition hover:-translate-y-1 hover:bg-[#ff7bc0]"
                >
                  {lang === "es" ? "Enviar mensaje" : "Send message"}
                </button>
              </div>
            </form>
          </motion.div>
        </div>
      )}
    </div>
  );
}
