import React, { useState } from 'react';
import { ChevronRight, Shield, TrendingUp, BarChart3, Users, CheckCircle, AlertTriangle, ArrowRight, Menu, X, Rocket, Database, Lock, Globe, Brain } from 'lucide-react';

const ArkaviaPresentation = () => {
  const [activeTab, setActiveTab] = useState('vision');
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const sections = [
    { id: 'vision', label: 'Vision & Contexte' },
    { id: 'approche', label: 'Positionnement' },
    { id: 'trajectoire', label: 'Trajectoire 3 Phases' },
    { id: 'pilotes', label: 'Pilotes Sobovi' },
    { id: 'next', label: 'Prochaines Étapes' }
  ];

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

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800">
      {/* Navigation */}
      <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-sm z-50 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 h-16 items-center">
            <div className="flex items-center space-x-2">
              <div className="bg-indigo-600 p-1.5 rounded-lg">
                <Brain className="h-6 w-6 text-white" />
              </div>
              <span className="font-bold text-xl tracking-tight text-slate-900">Arkavia</span>
              <span className="hidden sm:inline-block text-slate-400">|</span>
              <span className="hidden sm:inline-block text-slate-500 text-sm font-medium">Groupe Bernard / Sobovi</span>
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8">
              {sections.map((section) => (
                <button
                  key={section.id}
                  onClick={() => scrollToSection(section.id)}
                  className={`text-sm font-medium transition-colors duration-200 ${
                    activeTab === section.id 
                      ? 'text-indigo-600' 
                      : 'text-slate-500 hover:text-slate-900'
                  }`}
                >
                  {section.label}
                </button>
              ))}
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-500 hover:text-slate-700">
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-slate-100 py-2">
            {sections.map((section) => (
              <button
                key={section.id}
                onClick={() => scrollToSection(section.id)}
                className="block w-full text-left px-4 py-3 text-base font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600"
              >
                {section.label}
              </button>
            ))}
          </div>
        )}
      </nav>

      <main className="pt-16">
        
        {/* Hero Section */}
        <section id="vision" className="relative bg-gradient-to-br from-slate-900 to-indigo-900 text-white py-24 lg:py-32 overflow-hidden">
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop')] bg-cover bg-center opacity-10"></div>
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div className="max-w-3xl">
              <div className="inline-flex items-center space-x-2 bg-indigo-500/20 border border-indigo-400/30 rounded-full px-4 py-1.5 mb-6 backdrop-blur-sm">
                <span className="flex h-2 w-2 rounded-full bg-indigo-400"></span>
                <span className="text-sm font-medium text-indigo-100">Proposition d'accompagnement • 07/01/2026</span>
              </div>
              <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-6 leading-tight">
                IA Souveraine,<br />
                <span className="text-indigo-400">Progressive</span> et Industrialisable
              </h1>
              <p className="text-xl text-slate-300 mb-8 leading-relaxed max-w-2xl">
                Une approche pragmatique pour sécuriser l'usage de l'IA, générer des gains rapides chez Sobovi et préparer une industrialisation alignée avec la trajectoire Data/SI du Groupe.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <button 
                  onClick={() => scrollToSection('trajectoire')}
                  className="bg-indigo-600 hover:bg-indigo-500 text-white px-8 py-3.5 rounded-lg font-semibold transition-all shadow-lg hover:shadow-indigo-500/30 flex items-center justify-center gap-2"
                >
                  Découvrir la trajectoire <ArrowRight className="h-5 w-5" />
                </button>
                <div className="flex items-center gap-2 px-6 py-3.5 text-slate-300 border border-slate-700 rounded-lg backdrop-blur-sm bg-white/5">
                  <Shield className="h-5 w-5 text-emerald-400" />
                  <span className="font-medium">Sécurité & Souveraineté garanties</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Diagnostic Key Points */}
        <section 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 font-bold text-slate-900 mb-4">Ce que nous retenons</h2>
              <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                L'objectif n'est pas de "faire de l'IA", mais de créer un avantage opérationnel mesurable sans perturber la migration ERP.
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              <div className="bg-slate-50 p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-6">
                  <AlertTriangle className="h-6 w-6 text-amber-600" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Priorité Continuité</h3>
                <p className="text-slate-600 leading-relaxed">
                  La migration ERP et l'uniformisation des données restent structurantes. L'IA ne doit pas être un frein mais un accélérateur ciblé.
                </p>
              </div>

              <div className="bg-slate-50 p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-6">
                  <X className="h-6 w-6 text-red-600" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Leçons du passé</h3>
                <p className="text-slate-600 leading-relaxed">
                  Éviter le syndrome "Marlin" (ambition large, ROI flou). Privilégier un cadrage strict, périmètre réduit et KPIs dès le départ.
                </p>
              </div>

              <div className="bg-slate-50 p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mb-6">
                  <TrendingUp className="h-6 w-6 text-emerald-600" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Opportunité Sobovi</h3>
                <p className="text-slate-600 leading-relaxed">
                  Terrain idéal pour des <em>quick wins</em> : B2B, enjeux stocks/marges, export (Mercosur) et pression concurrentielle montante.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Positionnement */}
        <section id="approche" className="py-20 bg-slate-50 border-t border-slate-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold text-slate-900 mb-6">Positionnement Arkavia</h2>
                <div className="space-y-6">
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 mt-1">
                      <div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center border border-indigo-200">
                        <Users className="h-4 w-4 text-indigo-600" />
                      </div>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-slate-900">Complémentaire de Thélio</h4>
                      <p className="text-slate-600 mt-1">
                        Nous ne refaisons pas le diagnostic. Nous sommes la couche d'<strong>exécution</strong> : gouvernance, conduite du changement et delivery.
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 mt-1">
                      <div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center border border-indigo-200">
                        <Lock className="h-4 w-4 text-indigo-600" />
                      </div>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-slate-900">Obsession de la soutenabilité</h4>
                      <p className="text-slate-600 mt-1">
                        Sécurité, souveraineté et maîtrise des coûts. Pas de "bricolage" branché sur l'ERP. Nous travaillons AVEC la DSI pour éviter le Shadow IT.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 mt-1">
                      <div className="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center border border-indigo-200">
                        <CheckCircle className="h-4 w-4 text-indigo-600" />
                      </div>
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-slate-900">Engagement de méthode</h4>
                      <p className="text-slate-600 mt-1">
                        Pas d'assistants publics connectés au CRM "pour voir". Pas de sur-mesure gratuit si un standard existe.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="bg-white p-8 rounded-2xl shadow-lg border border-slate-100">
                 <h3 className="text-xl font-bold text-slate-900 mb-6 border-b pb-4">Principes de Souveraineté</h3>
                 <div className="space-y-4">
                   <div className="p-4 bg-slate-50 rounded-lg border-l-4 border-emerald-500">
                     <span className="font-bold text-slate-900 block mb-1">Modèles Européens / Open-Weight</span>
                     <span className="text-sm text-slate-600">Option privilégiée pour l'indépendance technologique.</span>
                   </div>
                   <div className="p-4 bg-slate-50 rounded-lg border-l-4 border-blue-500">
                     <span className="font-bold text-slate-900 block mb-1">Faible Sensibilité</span>
                     <span className="text-sm text-slate-600">API hébergées en UE avec clauses contractuelles strictes.</span>
                   </div>
                   <div className="p-4 bg-slate-50 rounded-lg border-l-4 border-indigo-600">
                     <span className="font-bold text-slate-900 block mb-1">Données Sensibles</span>
                     <span className="text-sm text-slate-600">Infrastructure maîtrisée (Cloud souverain/privé), chiffrement et journalisation.</span>
                   </div>
                 </div>
              </div>
            </div>
          </div>
        </section>

        {/* Trajectoire Timeline */}
        <section id="trajectoire" 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 font-bold text-slate-900 mb-4">Trajectoire Proposée</h2>
              <p className="text-lg text-slate-600">Une approche en 3 temps pour des résultats visibles sans dépendance.</p>
            </div>

            <div className="relative">
              {/* Timeline Connector Line (Desktop) */}
              <div className="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-slate-200 -translate-y-1/2 z-0"></div>

              <div className="grid md:grid-cols-3 gap-8 relative z-10">
                {/* Phase 0 */}
                <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:border-indigo-300 transition-colors group">
                  <div className="w-12 h-12 bg-slate-800 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4 group-hover:bg-indigo-600 transition-colors">0</div>
                  <h3 className="text-lg font-bold text-slate-900 mb-2">Cadrage & Alignement</h3>
                  <p className="text-sm font-semibold text-indigo-600 mb-4">2 semaines</p>
                  <ul className="space-y-2 text-sm text-slate-600">
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Plan IA 90 jours</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Cartographie usages/risques</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Gouvernance & Backlog</li>
                  </ul>
                </div>

                {/* Phase 1 */}
                <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:border-indigo-300 transition-colors group">
                  <div className="w-12 h-12 bg-slate-800 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4 group-hover:bg-indigo-600 transition-colors">1</div>
                  <h3 className="text-lg font-bold text-slate-900 mb-2">Sécuriser & Industrialiser</h3>
                  <p className="text-sm font-semibold text-indigo-600 mb-4">4-6 semaines</p>
                  <ul className="space-y-2 text-sm text-slate-600">
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Charte IA & Politique outils</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Kit de déploiement</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Parcours formation ciblé</li>
                  </ul>
                </div>

                {/* Phase 2 */}
                <div className="bg-white p-6 rounded-xl border-2 border-indigo-100 shadow-md hover:border-indigo-300 transition-colors group">
                  <div className="w-12 h-12 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">2</div>
                  <div className="absolute top-4 right-4 bg-indigo-100 text-indigo-800 text-xs font-bold px-2 py-1 rounded-full">FOCUS</div>
                  <h3 className="text-lg font-bold text-slate-900 mb-2">Pilote Sobovi</h3>
                  <p className="text-sm font-semibold text-indigo-600 mb-4">8-10 semaines</p>
                  <ul className="space-y-2 text-sm text-slate-600">
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Livraison 1-2 Cas d'usage</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> MVP environnement sécurisé</li>
                    <li className="flex items-start"><ChevronRight className="h-4 w-4 text-indigo-500 mr-1 mt-0.5 flex-shrink-0" /> Documentation d'exploitation</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Pilotes Sobovi */}
        <section id="pilotes" className="py-20 bg-slate-900 text-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mb-12">
              <h2 className="text-3xl font-bold mb-4">Focus : Pilotes Sobovi</h2>
              <p className="text-slate-400 max-w-2xl">
                Deux cas d'usage cadrés, mesurables et compatibles avec une donnée en cours d'unification.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {/* Case 1 */}
              <div className="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-indigo-500 transition-all duration-300">
                <div className="flex items-center gap-4 mb-6">
                  <div className="p-3 bg-indigo-500/20 rounded-lg">
                    <Globe className="h-8 w-8 text-indigo-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold">Copilote Commercial Export</h3>
                    <span className="text-sm text-indigo-300">Mercosur & Autres zones</span>
                  </div>
                </div>
                
                <div className="space-y-6">
                  <div>
                    <h4 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">Objectif Business</h4>
                    <p className="text-slate-200">Accélérer prospection et conversion B2B via un assistant qui structure la connaissance et standardise les offres.</p>
                  </div>
                  
                  <div>
                    <h4 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">Fonctionnalités</h4>
                    <ul className="space-y-2 text-slate-300 text-sm">
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Synthèse catalogues, incoterms, deals historiques.</li>
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Génération emails multilingues & argumentaires.</li>
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Préparation réponses appels d'offres.</li>
                    </ul>
                  </div>

                  <div className="pt-4 border-t border-slate-700">
                    <div className="flex items-center gap-2 text-sm text-slate-400">
                      <Shield className="h-4 w-4" />
                      <span>RAG sécurisé sur base documentaire interne. Pas de fuite de données.</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Case 2 */}
              <div className="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-indigo-500 transition-all duration-300">
                <div className="flex items-center gap-4 mb-6">
                  <div className="p-3 bg-emerald-500/20 rounded-lg">
                    <BarChart3 className="h-8 w-8 text-emerald-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold">Observatoire Prix & Stocks</h3>
                    <span className="text-sm text-emerald-300">Aide à la décision</span>
                  </div>
                </div>
                
                <div className="space-y-6">
                  <div>
                    <h4 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">Objectif Business</h4>
                    <p className="text-slate-200">Sécuriser la marge et améliorer la rotation des stocks via des signaux simples (écarts marché, vieillissement).</p>
                  </div>
                  
                  <div>
                    <h4 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-2">Approche Anti-Tunnel</h4>
                    <ul className="space-y-2 text-slate-300 text-sm">
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Périmètre réduit (Top 100-300 refs, 3-5 marchés).</li>
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Sources externes budgétées et ciblées.</li>
                      <li className="flex gap-2"><CheckCircle className="h-4 w-4 text-emerald-400 shrink-0" /> Alerting seuils & protocole de décision.</li>
                    </ul>
                  </div>

                  <div className="pt-4 border-t border-slate-700">
                    <div className="flex items-center gap-2 text-sm text-slate-400">
                      <TrendingUp className="h-4 w-4" />
                      <span>Validation de valeur avant élargissement global.</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Next Steps CTA */}
        <section id="next" className="py-24 bg-indigo-600 text-white text-center">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl font-bold mb-8">Prochaines Étapes Immédiates</h2>
            
            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 text-left grid md:grid-cols-3 gap-6 mb-12">
              <div className="flex flex-col">
                <span className="text-indigo-200 text-sm font-bold uppercase mb-2">Étape 1</span>
                <h4 className="text-xl font-bold mb-2">Revue Express</h4>
                <p className="text-indigo-100 text-sm">60-90 min. Diagnostic Thélio + Point DSI. Identifier les contraintes non négociables.</p>
              </div>
              <div className="flex flex-col border-t md:border-t-0 md:border-l border-white/20 pt-6 md:pt-0 md:pl-6">
                <span className="text-indigo-200 text-sm font-bold uppercase mb-2">Étape 2</span>
                <h4 className="text-xl font-bold mb-2">Atelier Sobovi</h4>
                <p className="text-indigo-100 text-sm">2h. Avec DG/Commerce/Ops. Valider les 2 pilotes, KPI et données disponibles.</p>
              </div>
              <div className="flex flex-col border-t md:border-t-0 md:border-l border-white/20 pt-6 md:pt-0 md:pl-6">
                <span className="text-indigo-200 text-sm font-bold uppercase mb-2">Étape 3</span>
                <h4 className="text-xl font-bold mb-2">Lancement Phase 0</h4>
                <p className="text-indigo-100 text-sm">Production du Plan IA 90 jours et mise en place de la gouvernance.</p>
              </div>
            </div>

            <button className="bg-white text-indigo-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-indigo-50 transition-colors shadow-lg flex items-center gap-2 mx-auto">
              <Rocket className="h-5 w-5" />
              Lancer la Phase 0
            </button>
            <p className="mt-6 text-indigo-200 text-sm">Arkavia en partenariat avec Vado Innovation</p>
          </div>
        </section>

        {/* Footer */}
        <footer className="bg-slate-900 text-slate-500 py-8 border-t border-slate-800">
          <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm">
            <p>© 2026 Arkavia. Tous droits réservés.</p>
            <p>Confidentiel - Groupe Bernard / Sobovi</p>
          </div>
        </footer>

      </main>
    </div>
  );
};

export default ArkaviaPresentation;