// MarketSeven Premium Corporate Website - Versión Profesional
// Next.js + React + TailwindCSS
// Ready for Cloudflare Pages Deployment
// Diseño limpio, tipografía grande, sin símbolos de programación

import { useState, useRef, useEffect } from 'react';

export default function MarketSevenWebsite() {

  const logoUrl =
    "https://pub-57133e2e090a48599ca090d2b642ef86.r2.dev/ChatGPT%20Image%209%20may%202026%2C%2012_21_15.png";

  // Estados del asistente de ventas
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [messages, setMessages] = useState([
    { 
      id: 1, 
      text: "Bienvenido a MarketSeven. Soy su asesor comercial. ¿En qué puedo ayudarle hoy?", 
      sender: "bot",
      timestamp: new Date()
    }
  ]);
  const [inputMessage, setInputMessage] = useState("");
  const [isTyping, setIsTyping] = useState(false);
  const [showLeadForm, setShowLeadForm] = useState(false);
  const [leadSubmitted, setLeadSubmitted] = useState(false);
  const [leadData, setLeadData] = useState({
    name: "",
    email: "",
    company: "",
    phone: ""
  });
  
  const messagesEndRef = useRef(null);
  const inputRef = useRef(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  useEffect(() => {
    if (isChatOpen && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isChatOpen]);

  // Sistema de respuestas profesionales (sin caracteres especiales)
  const getBotResponse = (userMessage) => {
    const msg = userMessage.toLowerCase();
    
    if (msg.includes("hola") || msg.includes("buenas") || msg.includes("saludos")) {
      return "Bienvenido a MarketSeven. Soy su asesor comercial. ¿Le gustaría conocer nuestras soluciones de inteligencia artificial para comercio electrónico en Latinoamérica?";
    }
    
    if (msg.includes("servicio") || msg.includes("solución") || msg.includes("ofrecen") || msg.includes("hacen")) {
      return "MarketSeven desarrolla infraestructura digital completa. Nuestras áreas principales son sistemas de inteligencia artificial para medios, ecosistemas de comercio electrónico escalables, estrategia internacional y expansión digital. ¿Le gustaría que profundicemos en alguna de estas áreas?";
    }
    
    if (msg.includes("inversión") || msg.includes("invertir") || msg.includes("usdt") || msg.includes("capital")) {
      return "Agradecemos su interés en participar. MarketSeven acepta contribuciones en USDT a través de la red TRC20. Nuestro equipo de desarrollo de negocios puede ofrecerle una presentación detallada del modelo de participación. ¿Podría compartir sus datos para agendar una reunión?";
    }
    
    if (msg.includes("roadmap") || msg.includes("plan") || msg.includes("futuro") || msg.includes("etapa")) {
      return "Nuestra hoja de ruta contempla tres fases principales. La primera fase, actualmente en desarrollo, se enfoca en sistemas de contenido con inteligencia artificial. La segunda fase incorpora operaciones automatizadas de comercio electrónico. La tercera fase expande nuestras operaciones a toda la región latinoamericana. ¿Le interesaría recibir el documento completo?";
    }
    
    if (msg.includes("alianza") || msg.includes("partner") || msg.includes("colaboración") || msg.includes("socio")) {
      return "MarketSeven está abierto a alianzas estratégicas con socios tecnológicos, fondos de inversión y agencias de expansión global. Nuestro equipo de alianzas puede contactarle con una propuesta personalizada. ¿Me permite solicitar sus datos?";
    }
    
    if (msg.includes("contacto") || msg.includes("email") || msg.includes("teléfono") || msg.includes("hablar")) {
      return "Puede contactarnos a través de nuestro correo electrónico hello@marketseven.com. También puede dejarme sus datos y un ejecutivo se comunicará con usted en menos de 24 horas. ¿Cómo prefiere proceder?";
    }
    
    if (msg.includes("información") || msg.includes("más datos") || msg.includes("enviar") || msg.includes("documento")) {
      setShowLeadForm(true);
      return "Será un placer enviarle información detallada. Por favor, compártame sus datos para personalizar la información según su perfil de interés.";
    }
    
    return "Gracias por su mensaje. Para poder asistirle mejor, ¿podría indicarme si su interés es conocer nuestros servicios de inteligencia artificial, explorar oportunidades de inversión o establecer una alianza estratégica?";
  };

  const handleSendMessage = async () => {
    if (!inputMessage.trim()) return;

    const userMsg = {
      id: messages.length + 1,
      text: inputMessage,
      sender: "user",
      timestamp: new Date()
    };
    setMessages(prev => [...prev, userMsg]);
    setInputMessage("");
    setIsTyping(true);

    setTimeout(() => {
      const response = getBotResponse(userMsg.text);
      const botMsg = {
        id: messages.length + 2,
        text: response,
        sender: "bot",
        timestamp: new Date()
      };
      setMessages(prev => [...prev, botMsg]);
      setIsTyping(false);
      
      if (response.includes("comparta sus datos") || response.includes("dejarme sus datos")) {
        setShowLeadForm(true);
      }
    }, 1000);
  };

  const handleLeadSubmit = (e) => {
    e.preventDefault();
    console.log("Lead capturado:", leadData);
    
    const confirmationMsg = {
      id: messages.length + 1,
      text: `Gracias ${leadData.name}. Hemos recibido sus datos correctamente. Un ejecutivo de MarketSeven se pondrá en contacto con usted en las próximas 24 horas para continuar con la conversación.`,
      sender: "bot",
      timestamp: new Date()
    };
    setMessages(prev => [...prev, confirmationMsg]);
    setShowLeadForm(false);
    setLeadSubmitted(true);
    setLeadData({ name: "", email: "", company: "", phone: "" });
    setTimeout(() => setLeadSubmitted(false), 3000);
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  const formatTime = (date) => {
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  const quickQuestions = [
    "Servicios y soluciones",
    "Oportunidades de inversión",
    "Hoja de ruta",
    "Alianzas estratégicas"
  ];

  return (
    <div className="bg-white text-zinc-900 font-sans overflow-x-hidden">

      {/* HERO SECTION - Versión mejorada */}
      <section className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden bg-zinc-950">

        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1920&auto=format&fit=crop')",
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />

        <div className="absolute inset-0 bg-gradient-to-b from-black/80 to-black/50"></div>

        <div className="relative z-10 max-w-7xl mx-auto w-full">

          <div className="absolute top-8 left-0 md:left-4">
            <img
              src={logoUrl}
              alt="MarketSeven Logo"
              className="w-[130px] md:w-[170px] object-contain"
            />
          </div>

          <div className="max-w-4xl mx-auto text-center mt-20 md:mt-32">

            <p className="text-orange-400 text-sm md:text-base tracking-wider uppercase mb-6 font-semibold">
              Inteligencia Artificial para el Comercio Global
            </p>

            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white leading-tight mb-8">
              Construyendo el Futuro del Comercio Digital
            </h1>

            <p className="text-base md:text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
              MarketSeven desarrolla ecosistemas digitales escalables impulsados por inteligencia artificial, 
              automatización e infraestructura moderna de comercio electrónico para mercados emergentes en Latinoamérica.
            </p>

            <div className="flex flex-col sm:flex-row gap-5 justify-center mt-12">
              <button className="bg-orange-500 hover:bg-orange-400 transition-all duration-300 text-white px-10 py-4 rounded-full font-semibold text-lg shadow-xl">
                Alianzas Estratégicas
              </button>
              <button className="border border-white/30 hover:bg-white/10 transition-all duration-300 text-white px-10 py-4 rounded-full font-semibold text-lg">
                Información para Inversores
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* VISIÓN */}
      <section className="py-28 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-6xl font-bold text-zinc-900">
              Nuestra Visión
            </h2>
            <div className="w-24 h-1 bg-orange-500 mx-auto mt-6"></div>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-zinc-50 rounded-3xl p-10 shadow-lg border border-zinc-100">
              <div className="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">🧠</span>
              </div>
              <h3 className="text-2xl font-bold text-zinc-900 mb-4">Inteligencia Artificial</h3>
              <p className="text-zinc-600 leading-relaxed">
                Sistemas automatizados de contenido, creatividades publicitarias y campañas de adquisición escalables.
              </p>
            </div>

            <div className="bg-zinc-50 rounded-3xl p-10 shadow-lg border border-zinc-100">
              <div className="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">📦</span>
              </div>
              <h3 className="text-2xl font-bold text-zinc-900 mb-4">Ecommerce Escalable</h3>
              <p className="text-zinc-600 leading-relaxed">
                Ecosistemas de comercio electrónico con automatización, pagos internacionales e infraestructura de marketing.
              </p>
            </div>

            <div className="bg-zinc-50 rounded-3xl p-10 shadow-lg border border-zinc-100">
              <div className="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">🌎</span>
              </div>
              <h3 className="text-2xl font-bold text-zinc-900 mb-4">Expansión Regional</h3>
              <p className="text-zinc-600 leading-relaxed">
                Conectando oportunidades digitales en Latinoamérica con inversores estratégicos globales.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* INFRAESTRUCTURA DIGITAL */}
      <section className="py-28 px-6 bg-zinc-50">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-6xl font-bold text-zinc-900">
              Infraestructura Digital
            </h2>
            <div className="w-24 h-1 bg-orange-500 mx-auto mt-6"></div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1400&auto=format&fit=crop"
                className="h-80 w-full object-cover"
              />
              <div className="p-8">
                <h3 className="text-2xl font-bold text-zinc-900 mb-3">Sistemas de IA para Medios</h3>
                <p className="text-zinc-600 leading-relaxed">
                  Producción automatizada de contenido digital y activos multimedia para campañas de adquisición escalables.
                </p>
              </div>
            </div>

            <div className="bg-white rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1400&auto=format&fit=crop"
                className="h-80 w-full object-cover"
              />
              <div className="p-8">
                <h3 className="text-2xl font-bold text-zinc-900 mb-3">Crecimiento de Ecommerce</h3>
                <p className="text-zinc-600 leading-relaxed">
                  Ecosistemas escalables con automatización, pagos internacionales e infraestructura de marketing.
                </p>
              </div>
            </div>

            <div className="bg-white rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1400&auto=format&fit=crop"
                className="h-80 w-full object-cover"
              />
              <div className="p-8">
                <h3 className="text-2xl font-bold text-zinc-900 mb-3">Estrategia Internacional</h3>
                <p className="text-zinc-600 leading-relaxed">
                  Conexión de oportunidades de expansión digital con inversores estratégicos y socios globales.
                </p>
              </div>
            </div>

            <div className="bg-white rounded-3xl overflow-hidden shadow-xl">
              <img
                src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1400&auto=format&fit=crop"
                className="h-80 w-full object-cover"
              />
              <div className="p-8">
                <h3 className="text-2xl font-bold text-zinc-900 mb-3">Expansión Digital</h3>
                <p className="text-zinc-600 leading-relaxed">
                  Posicionamiento a largo plazo enfocado en adquisición de audiencia y tecnología moderna.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* HOJA DE RUTA */}
      <section className="py-28 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-4xl md:text-6xl font-bold text-zinc-900 leading-tight mb-8">
                Hoja de Ruta de Expansión
              </h2>
              <div className="bg-orange-50 rounded-3xl p-10 shadow-lg border border-orange-100">
                <p className="text-lg leading-relaxed text-zinc-700">
                  MarketSeven comienza desarrollando sistemas de contenido impulsados por inteligencia artificial, 
                  infraestructura de adquisición digital y estrategias escalables de comercio online. 
                  La primera fase se enfoca en crecimiento de audiencia y posicionamiento de medios. 
                  La segunda fase expande operaciones automatizadas de ecommerce y sistemas de pago internacionales. 
                  Los objetivos a largo plazo incluyen la expansión regional en Latinoamérica y alianzas estratégicas 
                  con inversores internacionales.
                </p>
              </div>
            </div>
            <div>
              <img
                src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1400&auto=format&fit=crop"
                className="rounded-3xl shadow-2xl w-full h-[500px] object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* APOYO ESTRATÉGICO */}
      <section className="py-28 px-6 bg-zinc-950 text-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-6xl font-bold text-white">
              Apoyo Estratégico
            </h2>
            <div className="w-24 h-1 bg-orange-500 mx-auto mt-6"></div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-10">
              <h3 className="text-2xl font-bold text-orange-400 mb-4">Participación Internacional</h3>
              <p className="text-gray-300 leading-relaxed">
                MarketSeven recibe apoyo estratégico de inversores, socios y colaboradores interesados en infraestructura escalable de comercio con inteligencia artificial.
              </p>
            </div>

            <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-10">
              <h3 className="text-2xl font-bold text-orange-400 mb-4">Contribuciones en USDT</h3>
              <p className="text-gray-300 leading-relaxed mb-6">
                Las contribuciones en USDT simplifican la participación internacional mientras apoyan el desarrollo tecnológico y las operaciones de expansión.
              </p>
              <div className="bg-black/50 border border-white/10 rounded-2xl p-6">
                <p className="text-sm text-gray-400 mb-2">Dirección de Wallet TRC20</p>
                <p className="text-base font-mono break-all text-orange-300">TXf4ExampleWalletAddressReplaceLater7890</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACTO */}
      <section className="py-28 px-6 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-6xl font-bold text-zinc-900 mb-6">
            Contáctenos
          </h2>
          <div className="w-24 h-1 bg-orange-500 mx-auto mb-12"></div>
          <div className="bg-zinc-50 rounded-3xl p-12 shadow-xl border border-zinc-100">
            <p className="text-xl text-zinc-600 mb-10 leading-relaxed">
              MarketSeven está abierto a conversaciones sobre alianzas estratégicas internacionales, inversiones y colaboraciones comerciales a largo plazo.
            </p>
            <div className="flex flex-col md:flex-row gap-5 justify-center">
              <button className="bg-zinc-900 hover:bg-zinc-800 text-white px-10 py-4 rounded-full font-semibold text-lg transition-all">
                hello@marketseven.com
              </button>
              <button className="border-2 border-zinc-200 hover:bg-zinc-100 px-10 py-4 rounded-full font-semibold text-lg transition-all">
                Presentación para Inversores
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-zinc-950 border-t border-white/10 py-12 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-center md:text-left">
            <p className="text-gray-500 text-sm tracking-wider uppercase">
              Inteligencia Artificial para Comercio Global
            </p>
            <p className="text-gray-600 text-sm mt-2">
              MarketSeven • Todos los derechos reservados 2026
            </p>
          </div>
          <img
            src={logoUrl}
            alt="MarketSeven Logo"
            className="w-24 md:w-28 object-contain opacity-80"
          />
        </div>
      </footer>

      {/* BOTÓN DEL ASISTENTE DE VENTAS */}
      <button
        onClick={() => setIsChatOpen(!isChatOpen)}
        className="fixed bottom-6 right-6 z-50 bg-orange-500 hover:bg-orange-400 transition-all duration-300 text-white rounded-full p-4 shadow-2xl hover:scale-105"
      >
        {!isChatOpen ? (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        ) : (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        )}
      </button>

      {/* VENTANA DEL CHAT - Diseño limpio y profesional */}
      {isChatOpen && (
        <div className="fixed bottom-24 right-6 z-50 w-[400px] max-w-[90vw] bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
          
          <div className="bg-gradient-to-r from-orange-500 to-orange-600 px-5 py-4 text-white">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
                <span className="text-orange-500 text-xl">M</span>
              </div>
              <div>
                <h3 className="font-bold text-lg">Asesor Comercial</h3>
                <p className="text-xs text-orange-100">Respuesta en segundos</p>
              </div>
            </div>
          </div>

          <div className="h-[400px] overflow-y-auto p-4 bg-gray-50 flex flex-col gap-3">
            {messages.map((msg) => (
              <div
                key={msg.id}
                className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
              >
                <div
                  className={`max-w-[85%] rounded-2xl px-4 py-3 ${
                    msg.sender === 'user'
                      ? 'bg-orange-500 text-white rounded-br-sm'
                      : 'bg-white border border-gray-200 text-gray-800 rounded-bl-sm shadow-sm'
                  }`}
                >
                  <p className="text-sm leading-relaxed">{msg.text}</p>
                  <p className={`text-[10px] mt-1 ${msg.sender === 'user' ? 'text-orange-100' : 'text-gray-400'}`}>
                    {formatTime(msg.timestamp)}
                  </p>
                </div>
              </div>
            ))}
            
            {isTyping && (
              <div className="flex justify-start">
                <div className="bg-white border border-gray-200 rounded-2xl rounded-bl-sm px-4 py-3">
                  <div className="flex gap-1">
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></span>
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></span>
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></span>
                  </div>
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

          {/* Formulario de captura */}
          {showLeadForm && !leadSubmitted && (
            <div className="border-t border-gray-200 p-4 bg-white">
              <form onSubmit={handleLeadSubmit} className="space-y-3">
                <h4 className="font-semibold text-gray-800">Información de contacto</h4>
                <input
                  type="text"
                  placeholder="Nombre completo"
                  required
                  value={leadData.name}
                  onChange={(e) => setLeadData({...leadData, name: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                />
                <input
                  type="email"
                  placeholder="Correo electrónico"
                  required
                  value={leadData.email}
                  onChange={(e) => setLeadData({...leadData, email: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                />
                <input
                  type="text"
                  placeholder="Empresa"
                  value={leadData.company}
                  onChange={(e) => setLeadData({...leadData, company: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                />
                <button
                  type="submit"
                  className="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 rounded-xl transition-colors"
                >
                  Enviar información
                </button>
              </form>
            </div>
          )}

          {/* Preguntas rápidas */}
          <div className="border-t border-gray-200 p-3 bg-white flex flex-wrap gap-2">
            {quickQuestions.map((question, idx) => (
              <button
                key={idx}
                onClick={() => {
                  setInputMessage(question);
                  handleSendMessage();
                }}
                className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-full transition-colors"
              >
                {question}
              </button>
            ))}
          </div>

          {/* Input */}
          <div className="border-t border-gray-200 p-3 bg-white flex gap-2">
            <input
              ref={inputRef}
              type="text"
              value={inputMessage}
              onChange={(e) => setInputMessage(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="Escriba su mensaje..."
              className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
            />
            <button
              onClick={handleSendMessage}
              disabled={!inputMessage.trim()}
              className="bg-orange-500 hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl px-4 transition-colors"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
              </svg>
            </button>
          </div>
        </div>
      )}

      <style jsx>{`
        @keyframes bounce {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-4px); }
        }
        .animate-bounce {
          animation: bounce 1.4s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
}