"use client";

import Image from "next/image";
import Link from "next/link";
import { 
  ShieldCheckIcon, 
  TruckIcon, 
  ChartBarIcon, 
  UserGroupIcon,
  CheckCircleIcon,
  ArrowRightIcon,
  HeartIcon,
  CurrencyDollarIcon
} from "@heroicons/react/24/outline";

/**
 * Página inicial do SaveInMed
 * Apresenta informações sobre o projeto e opções de login/cadastro
 */
const HomePage = () => {

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex items-center">
              <Image
                src="/logo.png"
                alt="SaveInMed Logo"
                width={64}
                height={64}
                className="h-16 w-16"
              />
              <span className="ml-2 sm:ml-4 text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">SaveInMed</span>
            </div>

            {/* Botões de ação */}
            <div className="flex items-center space-x-2 sm:space-x-4">
              <Link
                href="/faq"
                className="text-gray-700 hover:text-blue-600 px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium transition-colors"
              >
                FAQ
              </Link>
              <Link
                href="/login"
                className="bg-white text-blue-600 px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-gray-50 transition-colors"
              >
                Entrar
              </Link>
              <Link
                href="/login?tab=cadastro"
                className="bg-blue-600 text-white px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-blue-700 transition-colors"
              >
                Cadastrar-se
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative py-24 lg:py-40 overflow-hidden">
        {/* Background Elements */}
        <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-blue-50/30"></div>
        <div className="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
        <div className="absolute bottom-0 left-0 w-80 h-80 bg-emerald-100/20 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
        
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            
            {/* Main Headline */}
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">
              <span className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                Marketplace para
              </span>
              <span className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-600 bg-clip-text text-transparent block mt-2">
                Farmácias 
              </span>
            </h1>
            
            {/* Subtitle */}
            <p className="text-xl lg:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed font-light">
              A plataforma inteligente que conecta farmácias, 
              <span className="font-medium text-gray-800"> otimizando compras, vendas e gestão de medicamentos</span> com segurança e eficiência.
            </p>
            
            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
              <Link
                href="/login?tab=cadastro"
                className="group bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-10 py-4 rounded-xl text-lg font-semibold transition-all duration-500 ease-out inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 min-w-[200px]"
              >
                Começar Agora
              </Link>
              <button
                onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
                className="group bg-white hover:bg-gray-50 border-2 border-gray-200 hover:border-gray-300 cursor-pointer text-gray-700 hover:text-gray-900 px-10 py-4 rounded-xl text-lg font-semibold transition-all duration-300 shadow-sm hover:shadow-md min-w-[200px]"
              >
                Saiba Mais
              </button>
            </div>
            
            {/* Social Proof */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 text-sm text-gray-500">
              <div className="flex items-center">
                <div className="flex -space-x-2 mr-3">
                  <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">F</div>
                  <div className="w-8 h-8 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">M</div>
                  <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">H</div>
                </div>
                <span className="font-medium">500+ farmácias conectadas</span>
              </div>
              <div className="hidden sm:block w-1 h-1 bg-gray-300 rounded-full"></div>
              <span className="font-medium">R$ 10M+ em transações processadas</span>
              <div className="hidden sm:block w-1 h-1 bg-gray-300 rounded-full"></div>
              <span className="font-medium">Disponível 24/7</span>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
              Por que escolher o SaveInMed?
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Nossa plataforma oferece soluções completas para modernizar e otimizar 
              sua operação no setor de saúde.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Feature 1 */}
            <div className="text-center p-6 rounded-lg hover:shadow-lg hover:shadow-blue-200 hover:border-blue-300 border border-transparent transition-all duration-300 cursor-pointer">
              <div className="w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <ShieldCheckIcon className="h-8 w-8 text-blue-600" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">Segurança Total</h3>
              <p className="text-gray-600">
                Plataforma segura e confiável com certificações para o setor de saúde.
              </p>
            </div>

            {/* Feature 2 */}
            <div className="text-center p-6 rounded-lg hover:shadow-lg hover:shadow-green-200 hover:border-green-300 border border-transparent transition-all duration-300 cursor-pointer">
              <div className="w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <TruckIcon className="h-8 w-8 text-green-600" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">Logística Inteligente</h3>
              <p className="text-gray-600">
                Sistema de entregas otimizado para medicamentos e equipamentos médicos.
              </p>
            </div>

            {/* Feature 3 */}
            <div className="text-center p-6 rounded-lg hover:shadow-lg hover:shadow-purple-200 hover:border-purple-300 border border-transparent transition-all duration-300 cursor-pointer">
              <div className="w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <ChartBarIcon className="h-8 w-8 text-purple-600" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">Relatórios Avançados</h3>
              <p className="text-gray-600">
                Dashboard completo com análises e insights para seu negócio.
              </p>
            </div>

            {/* Feature 4 */}
            <div className="text-center p-6 rounded-lg hover:shadow-lg hover:shadow-orange-200 hover:border-orange-300 border border-transparent transition-all duration-300 cursor-pointer">
              <div className="w-16 h-16 flex items-center justify-center mx-auto mb-4">
                <UserGroupIcon className="h-8 w-8 text-orange-600" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">Rede Conectada</h3>
              <p className="text-gray-600">
                Conecte-se com fornecedores e compradores em todo o país.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
                Transforme sua operação com tecnologia
              </h2>
              <p className="text-lg text-gray-600 mb-8">
                O SaveInMed oferece uma solução completa para farmácias e hospitais 
                modernizarem suas operações e aumentarem sua eficiência.
              </p>
              
              <div className="space-y-4">
                <div className="flex items-start">
                  <CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-gray-900">Gestão de Estoque Inteligente</h4>
                    <p className="text-gray-600">Controle automático de estoque com alertas de reposição.</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-gray-900">Compras Otimizadas</h4>
                    <p className="text-gray-600">Compare preços e encontre os melhores fornecedores.</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-gray-900">Vendas Digitais</h4>
                    <p className="text-gray-600">Expanda seu alcance com vendas online B2B.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 relative overflow-hidden">
              {/* Subtle background pattern */}
              <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-50 opacity-60 pointer-events-none"></div>

              <div className="relative z-10">
                <div className="text-center mb-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-1">Resultados Comprovados</h3>
                <p className="text-sm text-gray-500">Métricas reais que mostram o impacto do SaveInMed</p>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div
                  role="button"
                  tabIndex={0}
                  aria-label="500+ farmácias conectadas"
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
                  className="text-center p-4 rounded-xl bg-red-50 border border-red-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-200"
                  title="500+ farmácias conectadas"
                >
                  <div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
                  <HeartIcon className="h-6 w-6 text-red-600" />
                  </div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">500+</div>
                  <div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Farmácias Conectadas</div>
                </div>

                <div
                  role="button"
                  tabIndex={0}
                  aria-label="R$ 10M+ em transações"
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
                  className="text-center p-4 rounded-xl bg-emerald-50 border border-emerald-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-200"
                  title="R$ 10M+ em transações"
                >
                  <div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
                  <CurrencyDollarIcon className="h-6 w-6 text-emerald-600" />
                  </div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">R$ 10M+</div>
                  <div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Em Transações</div>
                </div>

                <div
                  role="button"
                  tabIndex={0}
                  aria-label="1000+ entregas realizadas"
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
                  className="text-center p-4 rounded-xl bg-indigo-50 border border-indigo-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-200"
                  title="1000+ entregas realizadas"
                >
                  <div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
                  <TruckIcon className="h-6 w-6 text-indigo-600" />
                  </div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">1000+</div>
                  <div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Entregas Realizadas</div>
                </div>

                <div
                  role="button"
                  tabIndex={0}
                  aria-label="Suporte 24/7"
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
                  className="text-center p-4 rounded-xl bg-blue-50 border border-blue-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200"
                  title="Suporte 24/7"
                >
                  <div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
                  <CheckCircleIcon className="h-6 w-6 text-blue-600" />
                  </div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">24/7</div>
                  <div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Suporte Disponível</div>
                </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </section>   

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <div className="flex items-center mb-4">
                <Image
                  src="/logo.png"
                  alt="SaveInMed Logo"
                  width={40}
                  height={40}
                  className="h-10 w-10"
                />
                <span className="ml-3 text-xl font-bold">SaveInMed</span>
              </div>
              <p className="text-gray-400 mb-4">
                Marketplace B2B para farmácias e hospitais. Conectando o setor de saúde 
                através de tecnologia inovadora.
              </p>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Suporte</h3>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">Contato</a></li>
                <li><Link href="/faq" className="hover:text-white transition-colors">FAQ</Link></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; {new Date().getFullYear()} SaveInMed. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;