import React, { useState } from 'react';
import { Check, X, Download, HardDrive, Smartphone, WifiOff, FileArchive, MessageCircle, Music, Camera, Layers, Zap, Clock, Menu } from 'lucide-react';

export default function LandingPage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // ==========================================
  // 🎨 TEMA POCKETSV (Identity Match)
  // ==========================================
  // Basado en: Esmeralda -> Teal -> Cian Oceánico
  const theme = {
    // El degradado principal de la marca para textos y fondos
    gradientBg: "bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-600",
    gradientText: "bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 text-transparent bg-clip-text",
    
    // Botones con efecto "3D/Botón" sutil
    primaryButton: "bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-600 hover:from-emerald-600 hover:to-cyan-700 text-white shadow-lg shadow-teal-500/30 border-b-2 border-emerald-700/20 active:translate-y-0.5 transition-all duration-200",
    
    // Fondos y Acentos
    lightBg: "bg-slate-50", // Gris claro neutro
    cardBg: "bg-white",
    accentIcon: "text-teal-500", // Color intermedio para iconos
    
    // Tipografía
    headingFont: "font-sans font-bold tracking-tight"
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
    setIsMenuOpen(false);
  };

  return (
    <div className={`min-h-screen ${theme.lightBg} font-sans text-slate-800`}>
      
      {/* Navigation */}
      <nav className="fixed w-full bg-white/90 backdrop-blur-xl shadow-sm z-50 border-b border-slate-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            
            {/* LOGO AREA */}
            <div className="flex-shrink-0 flex items-center gap-3 cursor-pointer group" onClick={() => window.scrollTo(0,0)}>
              <img 
                src="PocketSV_Logo.jpg" 
                alt="PocketSV Logo" 
                className="h-12 w-auto object-contain"
                onError={(e) => {
                    e.target.style.display = 'none';
                    document.getElementById('fallback-logo').style.display = 'flex';
                }}
              />
              {/* Fallback Branding - Imita el Logo Wordmark */}
              <div id="fallback-logo" className="hidden flex-col justify-center leading-none">
                 <span className={`text-2xl ${theme.headingFont} ${theme.gradientText} drop-shadow-sm`}>PocketSV</span>
                 <span className="text-[10px] text-slate-400 font-bold tracking-[0.2em] uppercase pl-0.5">Studio</span>
              </div>
            </div>
            
            <div className="hidden md:flex space-x-8 items-center">
              <button onClick={() => scrollToSection('problema')} className="text-sm font-bold text-slate-500 hover:text-teal-600 transition">O Problema</button>
              <button onClick={() => scrollToSection('solucao')} className="text-sm font-bold text-slate-500 hover:text-teal-600 transition">Como Funciona</button>
              <button onClick={() => scrollToSection('precos')} className="text-sm font-bold text-slate-500 hover:text-teal-600 transition">Preços</button>
            </div>

            <div className="hidden md:flex">
              <button onClick={() => scrollToSection('contato')} className={`${theme.primaryButton} px-6 py-2.5 rounded-lg font-bold text-sm`}>
                Falar no WhatsApp
              </button>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-600 hover:text-teal-600 focus:outline-none p-2">
                <Menu size={28} />
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-slate-100 py-4 px-2 shadow-xl absolute w-full">
            <button onClick={() => scrollToSection('problema')} className="block w-full text-left px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 font-bold">O Problema</button>
            <button onClick={() => scrollToSection('solucao')} className="block w-full text-left px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 font-bold">Como Funciona</button>
            <button onClick={() => scrollToSection('precos')} className="block w-full text-left px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 font-bold">Preços</button>
            <button onClick={() => scrollToSection('contato')} className={`block w-full text-left px-4 py-3 rounded-lg font-bold mt-2 text-teal-700 bg-teal-50`}>Falar no WhatsApp</button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="pt-36 pb-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
        {/* Abstract Background Blobs to match Gradient */}
        <div className="absolute top-20 right-0 w-[500px] h-[500px] bg-gradient-to-br from-emerald-200/20 via-teal-200/20 to-cyan-200/20 rounded-full blur-3xl -z-10 animate-pulse"></div>
        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-gradient-to-tr from-cyan-100/30 to-emerald-100/30 rounded-full blur-3xl -z-10"></div>

        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8 text-center lg:text-left">
            <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white text-teal-700 text-xs font-bold uppercase tracking-wider border border-teal-100 shadow-sm`}>
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
              </span>
              Tecnologia 100% Offline
            </div>
            
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.15]">
              Pare de Pagar Aluguel pelos seus <span className={`${theme.gradientText} relative whitespace-nowrap`}>
                Tours Virtuais
              </span>.
            </h1>
            
            <p className="text-lg text-slate-600 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
              Transformamos suas fotos 360º em um Tour Virtual profissional entregue como um <b>arquivo definitivo</b>. Sem mensalidades. 100% Seu.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
              <button onClick={() => scrollToSection('precos')} className={`flex items-center justify-center gap-2 ${theme.primaryButton} px-8 py-4 rounded-xl font-bold text-lg`}>
                Ver Pacotes
                <Download size={20} />
              </button>
              <button onClick={() => scrollToSection('solucao')} className="flex items-center justify-center gap-2 bg-white text-slate-600 border border-slate-200 px-8 py-4 rounded-xl font-bold hover:border-teal-300 hover:text-teal-600 hover:bg-white transition shadow-sm hover:shadow-md">
                Como funciona?
              </button>
            </div>
            
            <p className="text-xs text-slate-400 flex items-center justify-center lg:justify-start gap-2 pt-2 font-medium">
              <Check size={14} className="text-emerald-500" /> Compatível con Insta360, Ricoh Theta, GoPro...
            </p>
          </div>
          
          <div className="relative perspective-1000">
            {/* Card Hero Image Representation */}
            <div className="relative bg-white p-3 rounded-3xl shadow-2xl shadow-teal-900/10 border border-slate-100 transform rotate-1 hover:rotate-0 transition duration-500">
               <div className="bg-slate-800 rounded-2xl overflow-hidden aspect-[4/3] relative group">
                  {/* Abstract UI of the Viewer */}
                  <div className="absolute top-4 left-4 z-10 flex gap-2">
                    <div className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-xs font-bold text-slate-700 shadow-sm flex items-center gap-2 border border-white/50">
                       <div className={`w-2 h-2 rounded-full ${theme.gradientBg}`}></div>
                       PocketSV Viewer
                    </div>
                  </div>
                  
                  {/* Background Panorama Placeholder */}
                  <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&q=80')] bg-cover bg-center opacity-80 mix-blend-overlay"></div>
                  <div className={`absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-60`}></div>
                  
                  {/* Hotspot Pulse */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-16 h-16 rounded-full border-2 border-white/30 flex items-center justify-center animate-pulse">
                       <div className="w-3 h-3 bg-white rounded-full shadow-[0_0_15px_rgba(255,255,255,0.8)]"></div>
                    </div>
                  </div>

                  {/* Floating Elements - The "File" Concept */}
                  <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md p-4 rounded-xl shadow-lg border border-white/50 flex items-center gap-4">
                     <div className={`h-12 w-12 ${theme.gradientBg} rounded-lg flex items-center justify-center text-white shadow-lg shadow-teal-500/20`}>
                        <FileArchive size={24} />
                     </div>
                     <div className="flex-1">
                        <div className="text-xs font-bold text-slate-400 uppercase tracking-wide">Arquivo Final</div>
                        <div className="text-sm font-bold text-slate-800">Tour_Residencial.zip</div>
                     </div>
                     <div className="px-3 py-1 bg-emerald-50 text-emerald-700 border border-emerald-100 text-[10px] font-bold rounded uppercase tracking-wider">
                        Propiedad 100%
                     </div>
                  </div>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* The Problem Section */}
      <section id="problema" className="py-24 bg-white relative">
        <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
          <h2 className="text-3xl font-extrabold text-slate-900 mb-6">O problema das plataformas atuais</h2>
          <p className="text-lg text-slate-600 mb-16 max-w-2xl mx-auto">Você paga caro pelo equipamento, faz todo o trabalho duro, e depois ainda vira refém de mensalidades?</p>
          
          <div className="grid md:grid-cols-2 gap-8">
            {/* Competitors Card */}
            <div className="bg-slate-50 p-8 rounded-3xl border border-slate-100 text-left relative overflow-hidden group hover:border-red-200 transition shadow-sm">
              <div className="absolute top-0 left-0 w-1.5 h-full bg-slate-300 group-hover:bg-red-400 transition-colors"></div>
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-2xl bg-white shadow-sm flex items-center justify-center text-slate-400">
                  <X size={24} />
                </div>
                <div>
                  <h3 className="font-bold text-slate-700 text-xl">Outras Plataformas</h3>
                  <p className="text-xs text-slate-400 font-bold uppercase tracking-wide">Modelo Aluguel</p>
                </div>
              </div>
              <ul className="space-y-4">
                <li className="flex items-start gap-3 text-slate-500 font-medium">
                  <X size={20} className="text-red-400 mt-0.5 flex-shrink-0" />
                  <span>Mensalidades eternas (SaaS)</span>
                </li>
                <li className="flex items-start gap-3 text-slate-500 font-medium">
                  <X size={20} className="text-red-400 mt-0.5 flex-shrink-0" />
                  <span>Se parar de pagar, perde tudo</span>
                </li>
              </ul>
            </div>

            {/* PocketSV Card - Highlighted with Gradient */}
            <div className="bg-white p-8 rounded-3xl border border-teal-100 text-left relative overflow-hidden group shadow-xl shadow-teal-900/5 transform md:-translate-y-4">
              <div className={`absolute top-0 left-0 w-2 h-full ${theme.gradientBg}`}></div>
              <div className="flex items-center gap-4 mb-6">
                <div className={`w-12 h-12 rounded-2xl ${theme.gradientBg} flex items-center justify-center text-white shadow-lg shadow-teal-500/30`}>
                  <Check size={24} strokeWidth={3} />
                </div>
                <div>
                  <h3 className="font-bold text-slate-900 text-xl">PocketSV Studio</h3>
                  <p className={`text-xs ${theme.gradientText} font-bold uppercase tracking-wide`}>Modelo Propriedade</p>
                </div>
              </div>
              <ul className="space-y-4">
                <li className="flex items-start gap-3 text-slate-700 font-bold">
                  <div className={`p-1 rounded-full ${theme.gradientBg} bg-opacity-10 text-white`}>
                     <Check size={12} strokeWidth={4} /> 
                  </div>
                  <span>Pagamento Único</span>
                </li>
                <li className="flex items-start gap-3 text-slate-700 font-bold">
                   <div className={`p-1 rounded-full ${theme.gradientBg} text-white`}>
                     <Check size={12} strokeWidth={4} /> 
                  </div>
                  <span>Arquivo Vitalício (Seu)</span>
                </li>
                <li className="flex items-start gap-3 text-slate-700 font-bold">
                   <div className={`p-1 rounded-full ${theme.gradientBg} text-white`}>
                     <Check size={12} strokeWidth={4} /> 
                  </div>
                  <span>Funciona 100% Offline</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="precos" className={`py-24 ${theme.lightBg} relative overflow-hidden`}>
        {/* Background gradient shapes */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-tr from-emerald-100/40 via-white to-cyan-100/40 rounded-full blur-3xl -z-10"></div>

        <div className="max-w-7xl mx-auto px-4 text-center relative z-10">
          <h2 className="text-3xl font-extrabold text-slate-900 mb-4">Investimento Único</h2>
          <p className="text-slate-600 mb-16 max-w-2xl mx-auto">Preços transparentes e definitivos.</p>

          <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto items-start">
            
            {/* --- PACK 1: EXPRESS --- */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-lg transition duration-300 flex flex-col h-full">
              <div className="p-8 pb-0">
                <h3 className="text-sm font-bold text-slate-400 uppercase tracking-widest">Express</h3>
                <div className="flex items-baseline justify-center mt-4 mb-2">
                  <span className="text-5xl font-extrabold text-slate-800 tracking-tight">150</span>
                  <span className="text-xl font-medium text-slate-400 ml-1">R$</span>
                </div>
                <p className="text-slate-400 text-sm font-medium mt-2">Simples e rápido.</p>
              </div>
              
              <div className="p-8 space-y-4 flex-1 text-left">
                <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
                  <Clock className="text-slate-400 w-5 h-5 flex-shrink-0" />
                  <span className="text-xs font-bold text-slate-600 uppercase">Entrega Flash: 2 Horas*</span>
                </div>
                <ul className="space-y-4 text-sm text-slate-600 font-medium">
                  <li className="flex gap-3"><Camera size={18} className="text-slate-300"/> Até <b>5 fotos</b> 360º</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Setas de Navegação</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Logo Corporativo</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Tripé Escondido (Logo)</li>
                </ul>
              </div>
              
              <div className="p-8 pt-0 mt-auto">
                <button onClick={() => window.open('https://wa.me/SEUNUMERO?text=Ola,%20quero%20um%20Tour%20Express', '_blank')} className="w-full py-3 rounded-lg border-2 border-slate-100 text-slate-600 font-bold hover:border-slate-300 hover:text-slate-800 transition">
                  Solicitar Express
                </button>
              </div>
            </div>

            {/* --- PACK 2: PROFESSIONAL (Hero - Gradient) --- */}
            <div className="bg-white rounded-2xl shadow-2xl shadow-teal-900/10 border-2 border-teal-500 overflow-hidden transform md:-translate-y-4 relative flex flex-col h-full">
              {/* Gradient Header */}
              <div className={`absolute top-0 inset-x-0 h-2 ${theme.gradientBg}`}></div>
              <div className="absolute top-4 right-4">
                 <span className={`bg-gradient-to-r from-emerald-100 to-cyan-100 text-teal-800 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wide border border-teal-200`}>Mais Vendido</span>
              </div>
              
              <div className="p-8 pb-0">
                <h3 className={`text-sm font-bold ${theme.gradientText} uppercase tracking-widest`}>Profissional</h3>
                <div className="flex items-baseline justify-center mt-4 mb-2">
                  <span className="text-6xl font-extrabold text-slate-900 tracking-tight">250</span>
                  <span className="text-xl font-medium text-slate-400 ml-1">R$</span>
                </div>
                <p className="text-slate-500 text-sm font-medium mt-2">El estándar de oro.</p>
              </div>
              
              <div className="p-8 space-y-4 flex-1 text-left">
                <div className={`flex items-center gap-3 p-3 bg-gradient-to-r from-emerald-50 to-cyan-50 border border-emerald-100 rounded-lg`}>
                  <Clock className="text-teal-600 w-5 h-5 flex-shrink-0" />
                  <span className="text-xs font-bold text-teal-800 uppercase">Entrega Flash: 2 Horas*</span>
                </div>
                <ul className="space-y-4 text-sm text-slate-600 font-medium">
                  <li className="flex gap-3"><Camera size={18} className="text-slate-300"/> Até <b>10 fotos</b> 360º</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Setas de Navegação</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Logo Corporativo</li>
                  <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Tripé Escondido (Nadir)</li>
                  <li className="flex gap-3 items-center pt-3 border-t border-slate-100">
                    <HardDrive size={18} className="text-emerald-500"/> 
                    <span className="text-slate-900 font-bold">Arquivo 100% Seu</span>
                  </li>
                </ul>
              </div>
              
              <div className="p-8 pt-0 mt-auto">
                <button onClick={() => window.open('https://wa.me/SEUNUMERO?text=Ola,%20quero%20um%20Tour%20Profissional', '_blank')} className={`w-full py-4 rounded-lg ${theme.primaryButton} shadow-xl`}>
                  Quero este
                </button>
              </div>
            </div>

            {/* --- PACK 3: EXPERIENCE --- */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-lg transition duration-300 flex flex-col h-full">
              <div className="p-8 pb-0">
                <h3 className="text-sm font-bold text-slate-400 uppercase tracking-widest">Experience</h3>
                <div className="flex items-baseline justify-center mt-4 mb-2">
                  <span className="text-5xl font-extrabold text-slate-800 tracking-tight">350</span>
                  <span className="text-xl font-medium text-slate-400 ml-1">R$</span>
                </div>
                <p className="text-slate-400 text-sm font-medium mt-2">Imersão total.</p>
              </div>
              
              <div className="p-8 space-y-4 flex-1 text-left">
                <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
                  <Clock className="text-slate-400 w-5 h-5 flex-shrink-0" />
                  <span className="text-xs font-bold text-slate-600 uppercase">Entrega Flash: 2 Horas*</span>
                </div>
                <ul className="space-y-4 text-sm text-slate-600 font-medium">
                   <li className="flex gap-3"><Camera size={18} className="text-slate-300"/> Até <b>10 fotos</b> 360º</li>
                   <li className="flex gap-3"><Check size={18} className={theme.accentIcon}/> Tudo do Profissional</li>
                   <li className="flex gap-3"><Music size={18} className={theme.accentIcon}/> <b>Som Ambiental</b></li>
                   <li className="flex gap-3"><Layers size={18} className={theme.accentIcon}/> Acabamento Premium</li>
                </ul>
              </div>
              
              <div className="p-8 pt-0 mt-auto">
                <button onClick={() => window.open('https://wa.me/SEUNUMERO?text=Ola,%20quero%20um%20Tour%20Experience', '_blank')} className="w-full py-3 rounded-lg border-2 border-slate-100 text-slate-600 font-bold hover:border-slate-300 hover:text-slate-800 transition">
                  Solicitar Experience
                </button>
              </div>
            </div>

          </div>
          
          <div className="mt-16 bg-white inline-block p-6 rounded-xl border border-slate-200 shadow-sm max-w-3xl">
             <div className="flex gap-4 items-start text-left">
                <div className="p-2 bg-emerald-50 rounded-lg text-emerald-600">
                   <Zap size={20} />
                </div>
                <p className="text-sm text-slate-500">
                   <strong className="text-slate-900 block mb-1">*Condição para Entrega Flash (2 Horas):</strong>
                   O prazo começa a contar após o recebimento dos arquivos organizados: Fotos 360º nomeadas em ordem de visita (ex: 01_Entrada.jpg, 02_Sala.jpg...) e Logo da empresa em alta qualidade.
                </p>
             </div>
          </div>
        </div>
      </section>

      {/* Footer / CTA Final */}
      <section id="contato" className="py-20 bg-slate-900 text-white text-center px-4 relative overflow-hidden">
        {/* Background Decorative Gradient */}
        <div className={`absolute top-0 left-0 w-full h-2 ${theme.gradientBg}`}></div>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-teal-900/30 rounded-full blur-3xl"></div>
        
        <div className="relative z-10 max-w-3xl mx-auto">
          <div className={`w-16 h-16 ${theme.gradientBg} rounded-2xl flex items-center justify-center mx-auto mb-8 shadow-xl shadow-teal-500/20`}>
             <MessageCircle size={32} className="text-white" />
          </div>
          <h2 className="text-3xl sm:text-4xl font-extrabold mb-6 tracking-tight">Pronto para ser dono do seu trabalho?</h2>
          <p className="text-slate-400 mb-10 text-lg">
            Garanta a propriedade intelectual dos seus tours e pare de gastar com aluguéis digitais hoje mesmo.
          </p>
          <button onClick={() => window.open('https://wa.me/SEUNUMERO', '_blank')} className="inline-flex items-center gap-3 bg-white text-slate-900 px-10 py-5 rounded-xl font-bold text-lg hover:bg-emerald-50 transition shadow-xl transform hover:scale-105">
            Falar com um Especialista
          </button>
        </div>
      </section>

      <footer className="bg-slate-950 text-slate-600 py-10 text-center text-sm border-t border-slate-900">
        <div className="flex justify-center items-center gap-2 mb-4 opacity-70 grayscale hover:grayscale-0 transition duration-500">
           <img src="PocketSV_Logo.jpg" alt="PocketSV" className="h-6 w-auto" />
        </div>
        <p>© 2024 PocketSV Studio. Todos os direitos reservados.</p>
      </footer>
    </div>
  );
}