import React, { useState } from 'react';
import { ShieldCheck, TrendingUp, Droplets, Users, Target, Activity, ShoppingBag, ArrowRight, HeartPulse, Sparkles } from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('promo');

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 selection:bg-teal-200">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-2">
              <Droplets className="h-8 w-8 text-teal-500" />
              <span className="text-2xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-blue-600">
                Nutekids
              </span>
            </div>
            <div className="flex space-x-4">
              <button 
                onClick={() => setActiveTab('promo')}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === 'promo' ? 'bg-teal-100 text-teal-800 shadow-inner' : 'text-slate-500 hover:bg-slate-100'}`}
              >
                La Revolución
              </button>
              <button 
                onClick={() => setActiveTab('mercado')}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === 'mercado' ? 'bg-blue-100 text-blue-800 shadow-inner' : 'text-slate-500 hover:bg-slate-100'}`}
              >
                Business Case
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        {/* --- VISTA PROMOCIONAL --- */}
        {activeTab === 'promo' && (
          <div className="space-y-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
            
            {/* Hero Section */}
            <section className="relative rounded-3xl overflow-hidden bg-gradient-to-br from-teal-500 to-blue-600 text-white shadow-2xl">
              <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9zdmc+')] opacity-30"></div>
              <div className="relative z-10 px-8 py-20 md:py-32 flex flex-col items-center text-center">
                <span className="mb-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold tracking-wide bg-white/20 text-white uppercase backdrop-blur-sm">
                  <Sparkles className="w-4 h-4 mr-2" />
                  El Néctar del Mañana
                </span>
                <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 drop-shadow-lg">
                  Salud sin sellos,<br />sabor sin límites.
                </h1>
                <p className="max-w-2xl text-lg md:text-2xl text-teal-50 mb-10 leading-relaxed font-light">
                  La primera bebida funcional pediátrica en México diseñada con inulina de agave. Refrescante, deliciosa y totalmente libre de advertencias para proteger a quienes más amas.
                </p>
                <div className="flex flex-col sm:flex-row gap-4">
                  <button className="px-8 py-4 text-lg font-bold rounded-full bg-white text-teal-600 hover:bg-teal-50 hover:scale-105 transition-all shadow-lg flex items-center justify-center">
                    <ShoppingBag className="mr-2" /> Comprar Multipack
                  </button>
                  <button onClick={() => setActiveTab('mercado')} className="px-8 py-4 text-lg font-bold rounded-full bg-blue-700/30 border border-white/50 text-white hover:bg-blue-700/50 backdrop-blur-md transition-all flex items-center justify-center">
                    Ver Análisis Clínico <ArrowRight className="ml-2" />
                  </button>
                </div>
              </div>
            </section>

            {/* Beneficios Core */}
            <section className="py-12">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-slate-800">El poder del <span className="text-teal-500">Clean Label</span></h2>
                <p className="mt-4 text-slate-600 max-w-2xl mx-auto">Combinamos la pureza de la naturaleza mexicana con la ciencia de vanguardia para crear una formulación perfecta.</p>
              </div>
              
              <div className="grid md:grid-cols-3 gap-8">
                <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
                  <div className="w-14 h-14 bg-teal-100 text-teal-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <Droplets size={28} />
                  </div>
                  <h3 className="text-xl font-bold mb-3">Inulina de Agave</h3>
                  <p className="text-slate-600 leading-relaxed">Fibra prebiótica extraída del agave mexicano. Aporta dulzor natural (30% de la sacarosa) y aplana la curva glucémica postprandial.</p>
                </div>
                
                <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
                  <div className="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <ShieldCheck size={28} />
                  </div>
                  <h3 className="text-xl font-bold mb-3">Cero Sellos (NOM-051)</h3>
                  <p className="text-slate-600 leading-relaxed">Navegamos la regulación con elegancia. Sin edulcorantes sintéticos, sin azúcares añadidos. Libre de octágonos negros y leyendas precautorias.</p>
                </div>

                <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group">
                  <div className="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <HeartPulse size={28} />
                  </div>
                  <h3 className="text-xl font-bold mb-3">Salud Metabólica</h3>
                  <p className="text-slate-600 leading-relaxed">Restaura el microbioma y reduce la inflamación celular. La aliada perfecta para infancias con prediabetes, diabetes tipo 1 y 2.</p>
                </div>
              </div>
            </section>

          </div>
        )}

        {/* --- VISTA ANÁLISIS DE MERCADO --- */}
        {activeTab === 'mercado' && (
          <div className="space-y-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
            
            {/* Tesis de Inversión */}
            <section className="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden">
               <div className="absolute top-0 right-0 p-12 opacity-10 pointer-events-none">
                 <Activity size={300} />
               </div>
               <div className="relative z-10 max-w-3xl">
                 <h2 className="text-sm font-bold tracking-widest text-teal-400 uppercase mb-3">Tesis de Inversión</h2>
                 <h3 className="text-4xl md:text-5xl font-extrabold mb-6 leading-tight">Navegando un <span className="text-blue-400">Océano Azul</span> en la Crisis</h3>
                 <p className="text-lg text-slate-300 mb-6 leading-relaxed">
                   La regulación punitiva (NOM-051) y el inminente cierre del ecosistema escolar (marzo 2025) a productos con sellos han paralizado a las corporaciones tradicionales. Esto abre un monopolio potencial para Nutekids.
                 </p>
                 <ul className="space-y-4">
                   <li className="flex items-start">
                     <ShieldCheck className="text-teal-400 mr-3 mt-1 flex-shrink-0" />
                     <span className="text-slate-200"><strong>Inmunidad Regulatoria:</strong> Sin edulcorantes penados, podemos usar marketing infantil lúdico.</span>
                   </li>
                   <li className="flex items-start">
                     <TrendingUp className="text-teal-400 mr-3 mt-1 flex-shrink-0" />
                     <span className="text-slate-200"><strong>Doble Validación:</strong> El niño lo elige por valor aspiracional; el padre lo compra por certeza clínica.</span>
                   </li>
                 </ul>
               </div>
            </section>

            {/* Dimensionamiento de Mercado */}
            <section>
              <h2 className="text-3xl font-bold text-slate-800 mb-8 flex items-center">
                <Target className="mr-3 text-blue-600"/> Dimensionamiento del Mercado (Año 2)
              </h2>
              <div className="grid md:grid-cols-3 gap-6">
                <div className="bg-white rounded-2xl p-6 border-t-4 border-slate-200 shadow-sm">
                  <div className="text-sm font-bold text-slate-500 uppercase mb-2">TAM (Total Addressable)</div>
                  <div className="text-4xl font-black text-slate-800 mb-2">2.2M</div>
                  <p className="text-sm text-slate-600">Población 5-15 años con alteraciones glucémicas a nivel nacional.</p>
                  <div className="mt-4 pt-4 border-t border-slate-100 text-slate-400 font-mono text-sm">$8.58B MXN</div>
                </div>
                
                <div className="bg-white rounded-2xl p-6 border-t-4 border-blue-400 shadow-md transform md:-translate-y-2">
                  <div className="text-sm font-bold text-blue-500 uppercase mb-2">SAM (Serviceable)</div>
                  <div className="text-4xl font-black text-blue-900 mb-2">594k</div>
                  <p className="text-sm text-slate-600">NSE A/B, C+, C en áreas metropolitanas urbanas (45% x 60%).</p>
                  <div className="mt-4 pt-4 border-t border-slate-100 text-slate-400 font-mono text-sm">$2.31B MXN</div>
                </div>

                <div className="bg-white rounded-2xl p-6 border-t-4 border-teal-500 shadow-lg transform md:-translate-y-4">
                  <div className="text-sm font-bold text-teal-600 uppercase mb-2">SOM (Obtainable)</div>
                  <div className="text-4xl font-black text-teal-900 mb-2">29.7k</div>
                  <p className="text-sm text-slate-600">Captura realista (5% del SAM) hacia el Año 2 de operación.</p>
                  <div className="mt-4 pt-4 border-t border-slate-100 text-teal-600 font-mono font-bold text-lg">$115.8M MXN</div>
                </div>
              </div>
            </section>

            {/* Perfiles Psicográficos */}
            <section className="bg-slate-100 rounded-3xl p-8 md:p-12">
              <h2 className="text-3xl font-bold text-slate-800 mb-8 flex items-center">
                <Users className="mr-3 text-teal-600"/> Segmentación Psicográfica
              </h2>
              <div className="grid md:grid-cols-2 gap-8">
                <div className="bg-white p-6 rounded-2xl shadow-sm">
                  <h3 className="text-xl font-bold text-slate-800 border-b pb-3 mb-4 flex justify-between">
                    El "Shopper" (Padres)
                    <span className="text-xs bg-slate-100 px-2 py-1 rounded text-slate-500">Decisor</span>
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold text-teal-700">El Gestor Clínico (Diabetes Tipo 1)</h4>
                      <p className="text-sm text-slate-600 mt-1">NSE A/B. Hipervigilante. Mide ratios de insulina. Busca trazabilidad y validación de origen natural.</p>
                    </div>
                    <div>
                      <h4 className="font-semibold text-blue-700">El Protector Preventivo (Prediabetes/Obesidad)</h4>
                      <p className="text-sm text-slate-600 mt-1">NSE C/C+. Conocimiento pragmático. Su heurística de compra es la ausencia de sellos negros (PROFECO).</p>
                    </div>
                  </div>
                </div>

                <div className="bg-white p-6 rounded-2xl shadow-sm border-2 border-dashed border-teal-200">
                  <h3 className="text-xl font-bold text-slate-800 border-b pb-3 mb-4 flex justify-between">
                    El "Consumer" (Niños)
                    <span className="text-xs bg-teal-100 px-2 py-1 rounded text-teal-700">Usuario Final</span>
                  </h3>
                  <p className="text-sm text-slate-600 mb-4 italic">"Vivir con diabetes implica alienación constante. Beben agua simple o líquidos que parecen geriátricos."</p>
                  <div className="bg-slate-50 p-4 rounded-xl">
                    <h4 className="font-semibold text-slate-800 mb-2 text-sm">La Solución Nutekids:</h4>
                    <ul className="text-sm text-slate-600 space-y-2">
                      <li>✅ Autorización legal para mascotas animadas.</li>
                      <li>✅ Envases con "cool factor" (Códigos QR/AR).</li>
                      <li>✅ Validación Hedónica (Escala de 5 puntos).</li>
                    </ul>
                  </div>
                </div>
              </div>
            </section>

            {/* Estrategia Go-To-Market */}
            <section>
              <h2 className="text-3xl font-bold text-slate-800 mb-8">Estrategia Go-to-Market (GTM)</h2>
              <div className="space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
                
                {/* Fase 1 */}
                <div className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
                  <div className="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-200 group-[.is-active]:bg-teal-500 text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10 font-bold">1</div>
                  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                    <div className="text-teal-500 font-bold text-sm mb-1">Meses 1-6</div>
                    <h3 className="font-bold text-lg mb-2">Tracción Digital & D2C</h3>
                    <p className="text-sm text-slate-600">Venta exclusiva en línea mediante "Kits de Supervivencia Escolar" (Multipack 24 piezas) a $600 MXN para traspasar la barrera de costos logísticos.</p>
                  </div>
                </div>

                {/* Fase 2 */}
                <div className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
                  <div className="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-200 group-[.is-active]:bg-blue-500 text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10 font-bold">2</div>
                  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                    <div className="text-blue-500 font-bold text-sm mb-1">Meses 7-12</div>
                    <h3 className="font-bold text-lg mb-2">Invasión al Canal Moderno</h3>
                    <p className="text-sm text-slate-600">Supermercados y Farmacias. Emplazamiento estratégico en Zonas de Nutrición Especializada, rehusando el pasillo de refrescos genéricos. Tecnología UHT en empaque.</p>
                  </div>
                </div>

                {/* Fase 3 */}
                <div className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
                  <div className="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-200 group-[.is-active]:bg-orange-500 text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10 font-bold">3</div>
                  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                    <div className="text-orange-500 font-bold text-sm mb-1">Meses 13-18</div>
                    <h3 className="font-bold text-lg mb-2">Conquista del Ecosistema Escolar</h3>
                    <p className="text-sm text-slate-600">Tras el veto de marzo 2025, mapeo hiperlocal de corredores escolares. Posicionamiento en cooperativas y misceláneas en un radio de 500m de escuelas.</p>
                  </div>
                </div>

              </div>
            </section>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-12 mt-20 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center space-x-2 mb-4 md:mb-0">
             <Droplets className="h-6 w-6 text-teal-500" />
             <span className="text-xl font-bold text-slate-200">Nutekids</span>
          </div>
          <div className="text-center md:text-right text-sm">
            <p>Proyecto Académico - Análisis de Mercado Estratégico</p>
            <p className="mt-1 opacity-70">Equipo: Ángel Antonio, Valeria, Keydi Zúñiga, Carol, Bruno.</p>
            <p className="mt-2 text-xs opacity-50">Preparatoria - Grado Segundo A. México.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;