// mb-splash.jsx — animated opening / splash screen shown before the app

function SplashScreen({ onDone, logo = "uploads/logomorarbem2.png" }) {
  const [leaving, setLeaving] = React.useState(false);
  React.useEffect(() => {
    const t1 = setTimeout(() => setLeaving(true), 2500);
    const t2 = setTimeout(() => onDone && onDone(), 3100);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div style={{
      position: "absolute", inset: 0, zIndex: 90, overflow: "hidden",
      background: "radial-gradient(120% 90% at 50% 18%, #2A2E6E 0%, #181B57 46%, #0E1136 100%)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      opacity: leaving ? 0 : 1, transform: leaving ? "scale(1.04)" : "scale(1)",
      transition: "opacity .6s ease, transform .6s ease",
    }}>
      {/* soft drifting glow blobs */}
      <div className="mbsp-blob" style={{ position: "absolute", width: 360, height: 360, top: "-12%", left: "-18%", background: "radial-gradient(circle, rgba(86,124,255,.45), transparent 65%)", filter: "blur(8px)" }} />
      <div className="mbsp-blob mbsp-blob2" style={{ position: "absolute", width: 420, height: 420, bottom: "-16%", right: "-22%", background: "radial-gradient(circle, rgba(63,84,217,.4), transparent 65%)", filter: "blur(8px)" }} />

      {/* expanding ripple rings (echo of the hand + wave logo) */}
      <div style={{ position: "absolute", width: 230, height: 230, display: "flex", alignItems: "center", justifyContent: "center", marginTop: -10 }}>
        {[0, 1, 2].map(i => (
          <span key={i} className="mbsp-ring" style={{ animationDelay: (i * 0.9) + "s" }} />
        ))}
      </div>

      {/* logo */}
      <div className="mbsp-logo" style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", alignItems: "center" }}>
        <img src={logo} alt="Morar Bem" style={{ width: 200, height: 200, objectFit: "contain", filter: "brightness(0) invert(1) drop-shadow(0 14px 40px rgba(8,10,40,.55))" }} />
      </div>

      {/* tagline near the bottom */}
      <div className="mbsp-tag" style={{ position: "absolute", left: 0, right: 0, bottom: 88, textAlign: "center", zIndex: 3, font: "600 15px var(--ui)", letterSpacing: ".02em", color: "rgba(255,255,255,.92)" }}>
        O melhor da cidade na palma da sua mão
      </div>

      {/* animated wave band near the bottom */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 150, overflow: "hidden", opacity: .55 }}>
        <svg className="mbsp-wave" viewBox="0 0 1440 150" preserveAspectRatio="none" style={{ position: "absolute", bottom: 0, width: "200%", height: "100%" }}>
          <path d="M0,70 C 180,20 360,120 720,70 C 1080,20 1260,120 1440,70 L1440,150 L0,150 Z" fill="rgba(120,150,255,.30)" />
          <path d="M0,95 C 200,55 420,135 720,95 C 1020,55 1240,135 1440,95 L1440,150 L0,150 Z" fill="rgba(86,124,255,.30)" />
        </svg>
      </div>

      {/* loading shimmer */}
      <div style={{ position: "absolute", bottom: 54, left: "50%", transform: "translateX(-50%)", width: 132, height: 4, borderRadius: 999, background: "rgba(255,255,255,.16)", overflow: "hidden", zIndex: 3 }}>
        <div className="mbsp-bar" style={{ height: "100%", width: "40%", borderRadius: 999, background: "linear-gradient(90deg, transparent, #fff, transparent)" }} />
      </div>

      <style>{`
        @keyframes mbspLogo { 0% { opacity: 0; transform: scale(.82); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
        .mbsp-logo { animation: mbspLogo 1.1s cubic-bezier(.2,.8,.25,1) both; }
        @keyframes mbspTag { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
        .mbsp-tag { animation: mbspTag .7s ease .55s both; }
        @keyframes mbspRing { 0% { transform: scale(.35); opacity: .55; } 80% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
        .mbsp-ring { position: absolute; width: 230px; height: 230px; border-radius: 999px; border: 1.5px solid rgba(150,175,255,.5); animation: mbspRing 2.7s ease-out infinite; }
        @keyframes mbspBar { 0% { transform: translateX(-160%); } 100% { transform: translateX(420%); } }
        .mbsp-bar { animation: mbspBar 1.3s ease-in-out infinite; }
        @keyframes mbspWave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .mbsp-wave { animation: mbspWave 7s linear infinite; }
        @keyframes mbspBlob { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,18px); } }
        .mbsp-blob { animation: mbspBlob 6s ease-in-out infinite; }
        .mbsp-blob2 { animation-duration: 7.5s; }
        @media (prefers-reduced-motion: reduce) {
          .mbsp-logo, .mbsp-tag, .mbsp-ring, .mbsp-bar, .mbsp-wave, .mbsp-blob { animation: none !important; }
          .mbsp-logo { opacity: 1; } .mbsp-tag { opacity: 1; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { SplashScreen });
