app.py

import React, { useState } from 'react';
import { 
  Cpu, 
  Zap, 
  Database, 
  MessageSquare, 
  ArrowRight, 
  CheckCircle2, 
  LayoutDashboard, 
  Settings, 
  BarChart3 
} from 'lucide-react';

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

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100">
      {/* --- NAVBAR --- */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">S</div>
            <span className="text-xl font-bold tracking-tight">Samuel Systems</span>
          </div>
          <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
            <a href="#soluciones" className="hover:text-blue-600 transition">Soluciones</a>
            <a href="#stack" className="hover:text-blue-600 transition">Tecnología</a>
            <a href="#pricing" className="hover:text-blue-600 transition">Planes</a>
            <a 
              href="#contacto" 
              className="px-4 py-2 bg-slate-900 text-white rounded-full hover:bg-slate-800 transition"
            >
              Agendar Demo
            </a>
          </div>
        </div>
      </nav>

      {/* --- HERO SECTION --- */}
      <header className="relative pt-20 pb-32 px-6 overflow-hidden">
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold mb-6 border border-blue-100">
            <Zap size={14} /> Automatización Potenciada por IA
          </div>
          <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight mb-6 text-slate-900 leading-tight">
            Tu empresa funcionando en <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
              Piloto Automático
            </span>
          </h1>
          <p className="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            Diseñamos ecosistemas digitales a medida conectando herramientas premium. 
            Elimina el trabajo manual, reduce errores humanos y escala sin contratar más personal.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="#contacto" className="w-full sm:w-auto px-8 py-4 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
              Empezar ahora <ArrowRight size={18} />
            </a>
            <a href="#soluciones" className="w-full sm:w-auto px-8 py-4 bg-white text-slate-700 border border-slate-200 rounded-xl font-semibold hover:bg-slate-50 transition">
              Ver cómo funciona
            </a>
          </div>
        </div>
        
        {/* Background decoration */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-blue-100 rounded-full blur-3xl opacity-30 -z-10 pointer-events-none" />
      </header>

      {/* --- TECH STACK (Premium Tools) --- */}
      <section id="stack" className="py-12 border-y border-slate-200 bg-white">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <p className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-8">
            Integramos las herramientas más potentes del mercado
          </p>
          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-500">
            {/* Logos representados con texto estilizado para este ejemplo */}
            <span className="text-xl font-bold flex items-center gap-2"><Cpu size={20}/> OpenAI (GPT-4)</span>
            <span className="text-xl font-bold flex items-center gap-2"><LayoutDashboard size={20}/> Airtable</span>
            <span className="text-xl font-bold flex items-center gap-2"><Settings size={20}/> Make / Zapier</span>
            <span className="text-xl font-bold flex items-center gap-2"><MessageSquare size={20}/> Slack / Teams</span>
            <span className="text-xl font-bold flex items-center gap-2"><Database size={20}/> Notion</span>
          </div>
        </div>
      </section>

      {/* --- FEATURES & USE CASES --- */}
      <section id="soluciones" className="py-24 px-6 max-w-6xl mx-auto">
        <div className="mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Más que scripts, creamos sistemas.</h2>
          <p className="text-lg text-slate-600 max-w-2xl">
            No hacemos "parches". Construimos flujos de datos robustos que conectan tus departamentos.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Card 1 */}
          <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group">
            <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition">
              <MessageSquare size={24} />
            </div>
            <h3 className="text-xl font-bold mb-3">Atención al Cliente IA</h3>
            <p className="text-slate-600">
              Chatbots entrenados con tu data que responden correos y WhatsApps 24/7, filtran leads y agendan reuniones automáticamente.
            </p>
          </div>

          {/* Card 2 */}
          <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group">
            <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition">
              <BarChart3 size={24} />
            </div>
            <h3 className="text-xl font-bold mb-3">Dashboards & Reporting</h3>
            <p className="text-slate-600">
              Consolidamos datos de ventas, marketing y operaciones en tiempo real en Airtable o Looker Studio. Adiós a los Excel manuales.
            </p>
          </div>

          {/* Card 3 */}
          <div className="bg-white p-8 rounded-2xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all group">
            <div className="w-12 h-12 bg-teal-50 text-teal-600 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition">
              <Zap size={24} />
            </div>
            <h3 className="text-xl font-bold mb-3">Operaciones & HR</h3>
            <p className="text-slate-600">
              Onboarding de empleados, generación de contratos, facturación automática y gestión de inventarios sin intervención humana.
            </p>
          </div>
        </div>
      </section>

      {/* --- HOW WE WORK (The System) --- */}
      <section className="py-24 bg-slate-900 text-white px-6">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">¿Cómo es el proceso?</h2>
            <p className="text-slate-400">Dejamos tu sistema funcionando en semanas, no meses.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center relative">
            {/* Connector Line (Desktop only) */}
            <div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-slate-800 -z-10"></div>

            <div className="relative">
              <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">1</div>
              <h4 className="text-xl font-semibold mb-2">Auditoría</h4>
              <p className="text-sm text-slate-400">Analizamos tus procesos manuales actuales y detectamos cuellos de botella.</p>
            </div>
            <div className="relative">
              <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">2</div>
              <h4 className="text-xl font-semibold mb-2">Diseño</h4>
              <p className="text-sm text-slate-400">Creamos el mapa de arquitectura seleccionando las herramientas ideales.</p>
            </div>
            <div className="relative">
              <div className="w-24 h-24 mx-auto bg-blue-600 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 shadow-lg shadow-blue-900/50 z-10">3</div>
              <h4 className="text-xl font-semibold mb-2">Desarrollo</h4>
              <p className="text-sm text-slate-400">Construimos las integraciones, conectamos APIs y configuramos la IA.</p>
            </div>
            <div className="relative">
              <div className="w-24 h-24 mx-auto bg-slate-800 rounded-full border-4 border-slate-900 flex items-center justify-center text-2xl font-bold mb-4 z-10">4</div>
              <h4 className="text-xl font-semibold mb-2">Soporte</h4>
              <p className="text-sm text-slate-400">Monitoreamos el sistema para asegurar que funcione sin errores.</p>
            </div>
          </div>
        </div>
      </section>

      {/* --- PRICING --- */}
      <section id="pricing" className="py-24 px-6 max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Inversión transparente</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          
          {/* Starter Plan */}
          <div className="p-8 rounded-2xl border border-slate-200 bg-white">
            <h3 className="text-xl font-semibold text-slate-500 mb-2">Starter</h3>
            <div className="text-4xl font-bold mb-6">$500 <span className="text-lg font-normal text-slate-500">/setup</span></div>
            <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Ideal para automatizar una tarea específica y repetitiva.</p>
            <ul className="space-y-4 mb-8">
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> 1 Flujo automatizado simple</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> Integración de 2 herramientas</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-green-500"/> Soporte por email</li>
            </ul>
            <button className="w-full py-3 rounded-lg border border-slate-300 font-semibold hover:bg-slate-50 transition">Elegir Starter</button>
          </div>

          {/* Pro Plan (Highlighted) */}
          <div className="p-8 rounded-2xl border-2 border-blue-600 bg-white shadow-2xl relative transform md:-translate-y-4">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium">Más Popular</div>
            <h3 className="text-xl font-semibold text-blue-600 mb-2">Business System</h3>
            <div className="text-4xl font-bold mb-6">$1,500 <span className="text-lg font-normal text-slate-500">/setup</span></div>
            <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Para empresas que buscan optimizar un departamento entero.</p>
            <ul className="space-y-4 mb-8">
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Hasta 5 flujos complejos</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Integración con OpenAI (GPT-4)</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> Dashboard de control</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-blue-600"/> 1 mes de mantenimiento incluido</li>
            </ul>
            <button className="w-full py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">Solicitar Business</button>
          </div>

          {/* Enterprise Plan */}
          <div className="p-8 rounded-2xl border border-slate-200 bg-white">
            <h3 className="text-xl font-semibold text-slate-500 mb-2">Enterprise</h3>
            <div className="text-4xl font-bold mb-6">A Medida</div>
            <p className="text-sm text-slate-600 mb-6 pb-6 border-b border-slate-100">Transformación digital completa y consultoría continua.</p>
            <ul className="space-y-4 mb-8">
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> Flujos ilimitados</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> Desarrollo de Apps internas</li>
              <li className="flex gap-3 text-sm"><CheckCircle2 size={18} className="text-slate-400"/> SLA Prioritario</li>
            </ul>
            <button className="w-full py-3 rounded-lg border border-slate-300 font-semibold hover:bg-slate-50 transition">Hablar con Ventas</button>
          </div>

        </div>
        <p className="text-center mt-8 text-sm text-slate-500">* Los precios pueden variar según la complejidad. Ofrecemos planes de mantenimiento mensual opcionales.</p>
      </section>

      {/* --- CONTACT FORM --- */}
      <section id="contacto" className="py-24 bg-slate-50 border-t border-slate-200">
        <div className="max-w-3xl mx-auto px-6">
          <div className="bg-white p-8 md:p-12 rounded-3xl shadow-lg border border-slate-100">
            <h2 className="text-3xl font-bold mb-2 text-center">¿Listo para automatizar?</h2>
            <p className="text-center text-slate-600 mb-10">Cuéntanos tu reto actual y te diremos si podemos resolverlo.</p>
            
            <form className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Nombre</label>
                  <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="text" placeholder="Tu nombre" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Email Corporativo</label>
                  <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="email" placeholder="nombre@empresa.com" />
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">¿Qué herramientas usas hoy?</label>
                <input className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition" type="text" placeholder="Ej: Excel, Gmail, Trello..." />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">Describe tu proceso manual actual</label>
                <textarea
                  className="w-full p-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
                  rows="4"
                  placeholder="Ej: Recibo facturas por mail, las paso a Excel manualmente y luego..."
                ></textarea>
              </div>

              <button
                type="submit"
                className="w-full bg-slate-900 text-white py-4 px-6 rounded-xl font-bold text-lg hover:bg-slate-800 transition shadow-lg"
              >
                Solicitar Auditoría Gratuita
              </button>
              <p className="text-xs text-center text-slate-400 mt-4">Sin compromiso. Respondemos en menos de 24hs.</p>
            </form>
          </div>
        </div>
      </section>

      {/* --- FOOTER --- */}
      <footer className="bg-white border-t border-slate-200 py-12 px-6 text-center">
        <div className="flex justify-center items-center gap-2 mb-6">
          <div className="w-6 h-6 bg-blue-600 rounded flex items-center justify-center text-white font-bold text-xs">S</div>
          <span className="font-bold text-slate-900">Samuel Systems</span>
        </div>
        <p className="text-slate-500 text-sm mb-6">
          © {new Date().getFullYear()} Samuel Systems. Automatización inteligente para negocios modernos.
        </p>
        <div className="flex justify-center gap-6 text-sm text-slate-400">
          <a href="#" className="hover:text-slate-900">Privacidad</a>
          <a href="#" className="hover:text-slate-900">Términos</a>
          <a href="#" className="hover:text-slate-900">LinkedIn</a>
        </div>
      </footer>
    </div>
  );
}