"use client";

import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import { Link } from "@/i18n/navigation";
import { useLocale } from "next-intl";
import { useRouter, usePathname } from "@/i18n/navigation";
import FlagIcon from "@/components/ui/FlagIcon";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";

function ComingSoonContent() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const toggleLanguage = () => {
    const newLocale = locale === "en" ? "es" : "en";
    const queryString = searchParams.toString();
    const pathnameWithQuery = queryString ? `${pathname}?${queryString}` : pathname;
    router.replace(pathnameWithQuery, { locale: newLocale });
  };

  return (
    <main className="min-h-screen bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#dceef5] flex flex-col">
      {/* Header */}
      <header className="flex items-center justify-between px-8 py-6 max-w-7xl mx-auto w-full">
        <Link href="/" className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition">
          <Image src={mbhsLogo} alt="MBHS" width={40} height={40} className="rounded-lg" />
          <span className="text-2xl font-extrabold text-gray-900">MBHS</span>
        </Link>
        <button
          onClick={toggleLanguage}
          className="flex items-center gap-1.5 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-white/60 rounded-lg transition cursor-pointer"
        >
          <FlagIcon locale={locale as "en" | "es"} />
          <span className="font-medium">{locale.toUpperCase()}</span>
        </button>
      </header>

      {/* Main Content */}
      <div className="flex-1 flex flex-col items-center justify-center px-6 text-center">
        {/* Decorative circles */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-[#3B9EC9]/10 blur-3xl" />
          <div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-[#3B9EC9]/10 blur-3xl" />
        </div>

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

          {/* Launching Tomorrow — highlighted banner */}
          <div className="inline-flex items-center gap-3 px-6 py-3 rounded-2xl bg-[#3B9EC9] shadow-lg shadow-[#3B9EC9]/30 mb-8">
            <span className="w-2.5 h-2.5 rounded-full bg-white animate-pulse" />
            <span className="text-white text-sm font-bold tracking-widest uppercase">
              {locale === "en" ? "🚀 Launching Tomorrow" : "🚀 Lanzamiento Mañana"}
            </span>
          </div>

          {/* Tagline */}
          <h1 className="text-5xl sm:text-6xl font-extrabold text-gray-900 mb-5 leading-tight tracking-tight">
            {locale === "en" ? (
              <>Smarter Screening.<br /><span className="text-[#3B9EC9]">Better Outcomes.</span></>
            ) : (
              <>Evaluación Inteligente.<br /><span className="text-[#3B9EC9]">Mejores Resultados.</span></>
            )}
          </h1>

          {/* Launch message */}
          <p className="text-lg font-semibold text-gray-700 mb-4">
            {locale === "en"
              ? "The platform goes live tomorrow — your practice is about to change."
              : "La plataforma estará disponible mañana — su práctica está a punto de cambiar."}
          </p>

          {/* Description */}
          <p className="text-base text-gray-500 leading-relaxed mb-12 max-w-lg mx-auto">
            {locale === "en"
              ? "MBHS delivers clinically validated behavioral health screening in under 3 minutes. Designed for therapists, primary care teams, and care professionals who demand accuracy."
              : "MBHS ofrece evaluaciones de salud conductual clínicamente validadas en menos de 3 minutos. Diseñado para terapeutas y equipos de atención primaria que exigen precisión."}
          </p>

          {/* Features preview */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12">
            {[
              { icon: "⚡", label: locale === "en" ? "3-Min Screening" : "Evaluación 3 Min" },
              { icon: "🧠", label: locale === "en" ? "9 Behavioral Scales" : "9 Escalas Conductuales" },
              { icon: "🔒", label: locale === "en" ? "100% Confidential" : "100% Confidencial" },
            ].map((f) => (
              <div
                key={f.label}
                className="flex items-center gap-3 px-5 py-4 rounded-2xl bg-white border border-[#3B9EC9]/20 shadow-sm"
              >
                <span className="text-2xl">{f.icon}</span>
                <span className="text-sm font-medium text-gray-700">{f.label}</span>
              </div>
            ))}
          </div>

          {/* Back to home */}
          <Link
            href="/"
            className="inline-flex items-center gap-2 px-8 py-3.5 bg-[#3B9EC9] hover:bg-[#2D8AB5] text-white font-medium rounded-full transition text-sm shadow-md shadow-[#3B9EC9]/30"
          >
            <svg className="w-4 h-4 rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
            </svg>
            {locale === "en" ? "Back to Home" : "Volver al Inicio"}
          </Link>
        </div>
      </div>

      {/* Footer */}
      <footer className="px-8 py-6 text-center">
        <p className="text-gray-400 text-sm">
          © {new Date().getFullYear()} MBHS. {locale === "en" ? "All rights reserved." : "Todos los derechos reservados."}
        </p>
      </footer>
    </main>
  );
}

export default function ComingSoonPage() {
  return (
    <Suspense>
      <ComingSoonContent />
    </Suspense>
  );
}