import React, { useState, useEffect } from 'react';
import { MessageCircle, ArrowRight } from 'lucide-react';

const App = () => {
  const [loading, setLoading] = useState(true);
  const [fillHeight, setFillHeight] = useState(0);

  // URL da imagem da logo atualizada (B-me)
  const logoUrl = "https://i.ibb.co/jvnMBWPP/b-me-de-essa-logo-em-p-Photoroom.png";

  // Links de redirecionamento
  const links = [
    { id: 1, label: "Fale com Kassia", url: "https://wa.me/message/EAQ5LVQ2BRA7L1" },
    { id: 2, label: "Fale com Fabricia", url: "https://wa.me/message/NLZHGGG3SSIBG1" }
  ];

  useEffect(() => {
    // Animação de preenchimento de 0 a 100 em 3 segundos
    const duration = 3000;
    const interval = 30; 
    const step = 100 / (duration / interval);

    const fillTimer = setInterval(() => {
      setFillHeight((prev) => {
        if (prev >= 100) {
          clearInterval(fillTimer);
          setLoading(false);
          return 100;
        }
        return prev + step;
      });
    }, interval);

    return () => clearInterval(fillTimer);
  }, []);

  const handleRedirect = (url) => {
    window.location.href = url;
  };

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-[#FF007F] overflow-hidden font-sans p-6 text-center">
      {/* Background Decorativo */}
      <div className="absolute top-[-10%] left-[-5%] w-[70%] h-[70%] bg-pink-400 rounded-full blur-[120px] opacity-25"></div>
      <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-pink-300 rounded-full blur-[120px] opacity-15"></div>

      <div className="relative z-10 flex flex-col items-center justify-center w-full max-w-sm">
        
        {/* Container da Logo - Tamanho reduzido para melhor centralização */}
        <div className="relative p-4 mb-2 flex justify-center items-center">
          {/* Brilho de fundo (Glow) */}
          <div 
            className="absolute inset-0 bg-white rounded-full blur-[60px] transition-opacity duration-1000"
            style={{ opacity: loading ? (fillHeight / 300) : 0.4 }}
          ></div>
          
          {/* Tamanho da logo reduzido de 56/72 para 40/48 */}
          <div className="relative z-10 w-40 h-40 md:w-48 md:h-48">
            {/* Versão da Logo em "Silhueta" (Fundo) */}
            <img 
              src={logoUrl} 
              alt="B-me Logo Shadow" 
              className="absolute inset-0 w-full h-full object-contain opacity-20 grayscale brightness-0"
              style={{
                filter: 'drop-shadow(0 0 2px rgba(255,255,255,0.5))'
              }}
            />

            {/* Versão da Logo que vai SENDO FORMADA (Preenchimento) */}
            <div 
              className="absolute inset-0 w-full overflow-hidden transition-all duration-300"
              style={{ 
                height: `${fillHeight}%`,
                top: 'auto',
                bottom: 0,
                transition: 'height 0.1s linear'
              }}
            >
              <img 
                src={logoUrl} 
                alt="B-me Logo Fill" 
                className="absolute bottom-0 w-full h-40 md:h-48 object-contain"
                style={{
                  filter: `
                    drop-shadow(2px 0 0 white) 
                    drop-shadow(-2px 0 0 white) 
                    drop-shadow(0 2px 0 white) 
                    drop-shadow(0 -2px 0 white)
                    drop-shadow(0 0 15px rgba(255,255,255,0.8))
                  `
                }}
              />
              
              {/* Linha de brilho na ponta do preenchimento */}
              {loading && (
                <div 
                  className="absolute top-0 left-0 w-full h-0.5 bg-white shadow-[0_0_10px_white] z-20"
                ></div>
              )}
            </div>
          </div>
        </div>

        {/* Menu de Atendimento (Aparece após a formação completa) */}
        {!loading && (
          <div className="w-full space-y-3 animate-in fade-in zoom-in-95 duration-700 mt-6">
            <h2 className="text-white text-[10px] tracking-[0.4em] uppercase mb-4 font-black opacity-90 drop-shadow-sm">
              Escolha seu canal
            </h2>
            
            {links.map((link) => (
              <button
                key={link.id}
                onClick={() => handleRedirect(link.url)}
                className="w-full group relative flex items-center justify-between bg-white text-[#FF007F] p-4 rounded-[1.5rem] shadow-[0_15px_30px_rgba(0,0,0,0.15)] transition-all duration-300 active:scale-95 overflow-hidden"
              >
                <div className="flex items-center gap-3">
                  <div className="bg-[#FF007F] p-2.5 rounded-xl text-white shadow-md">
                    <MessageCircle size={20} strokeWidth={2.5} />
                  </div>
                  <span className="font-black text-base tracking-tight uppercase italic">{link.label}</span>
                </div>
                <ArrowRight size={18} className="opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all text-[#FF007F]" />
                
                {/* Reflexo Shine */}
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Rodapé Fixo */}
      <div className="absolute bottom-8 text-white/70 text-[10px] tracking-[0.6em] uppercase font-black">
        MAKE10_JUA
      </div>
    </div>
  );
};

export default App;