const { useState, useEffect } = React;

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [step, setStep] = useState(1);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [missionData, setMissionData] = useState({
    objective: '',
    details: '',
    level: 'Débutant',
    budget: 'Gratuit',
    priority: 'Le meilleur rapport qualité/prix',
    sector: ''
  });

  const updateData = (field, value) => {
    setMissionData(prev => ({ ...prev, [field]: value }));
  };

  const nextStep = () => setStep(s => Math.min(s + 1, 4));
  const prevStep = () => setStep(s => Math.max(s - 1, 1));

  const submitMission = () => {
    setIsSubmitted(true);
  };

  const resetForm = () => {
    setIsModalOpen(false);
    setStep(1);
    setIsSubmitted(false);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100">
      {/* Navigation */}
      <header className="fixed top-0 w-full bg-white/80 backdrop-blur-md z-40 border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-[#0F172A] flex items-center justify-center text-white font-bold shadow-lg shadow-blue-900/20">
              LM
            </div>
            <span className="text-xl font-semibold tracking-tight">LAgentMarchand</span>
          </div>
          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
            <a href="#" className="hover:text-[#0F172A] transition-colors">Pourquoi nous</a>
            <a href="#" className="hover:text-[#0F172A] transition-colors">Comment ça marche</a>
            <a href="#" className="hover:text-[#0F172A] transition-colors">Comparatifs</a>
            <a href="#" className="hover:text-[#0F172A] transition-colors">FAQ</a>
            <button 
              onClick={() => setIsModalOpen(true)}
              className="px-5 py-2.5 rounded-full bg-white border border-[#0F172A] text-[#0F172A] hover:bg-slate-50 transition-all font-semibold"
            >
              Trouver mon IA
            </button>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <main className="pt-32">
        <section className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <div className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-xs font-bold uppercase tracking-wider border border-blue-100">
              Conseiller indépendant en IA
            </div>
            <h1 className="text-5xl md:text-6xl font-serif text-[#0F172A] leading-[1.1]">
              Trouvez l'Agent IA parfait pour votre business.
            </h1>
            <p className="text-xl text-slate-600 leading-relaxed max-w-xl">
              Confiez une mission. Nos agents intelligents recherchent, analysent et comparent les meilleures solutions pendant que vous restez concentré sur l'essentiel.
            </p>
            <div className="flex flex-wrap gap-4">
              <button 
                onClick={() => setIsModalOpen(true)}
                className="px-8 py-4 rounded-full bg-[#0F172A] text-white font-semibold shadow-xl shadow-blue-900/20 hover:scale-105 active:scale-95 transition-all"
              >
                Confier une mission
              </button>
              <button className="px-8 py-4 rounded-full bg-white border border-slate-200 text-slate-700 font-semibold hover:bg-slate-50 transition-all">
                Explorer le marché
              </button>
            </div>
            <div className="flex gap-6 pt-4">
              {["IA Vérifiées", "Indépendance", "Données Protégées"].map(check => (
                <div key={check} className="flex items-center gap-2 text-sm text-slate-500 font-medium">
                  <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
                  {check}
                </div>
              ))}
            </div>
          </div>
          <div className="relative group">
            <div className="absolute -inset-4 bg-gradient-to-tr from-blue-100 to-purple-100 rounded-[2rem] blur-2xl opacity-50 group-hover:opacity-70 transition-opacity"></div>
            <div className="relative aspect-square rounded-[2rem] bg-white border border-slate-100 shadow-2xl flex items-center justify-center overflow-hidden">
               <div className="text-slate-300 font-serif italic text-lg uppercase tracking-[0.2em]">Illustration Premium</div>
            </div>
          </div>
        </section>

        {/* Modal Form */}
        {isModalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 md:p-6">
            <div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onClick={resetForm}></div>
            <div className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
              <div className="h-2 bg-slate-100">
                <div 
                  className="h-full bg-gradient-to-r from-blue-600 to-purple-600 transition-all duration-500" 
                  style={{width: isSubmitted ? '100%' : `${(step/4)*100}%`}}
                ></div>
              </div>

              <div className="p-8 md:p-12">
                {!isSubmitted ? (
                  <>
                    <div className="flex justify-between items-start mb-8">
                      <div>
                        <h2 className="text-3xl font-serif text-[#0F172A] mb-2">Décrivez votre mission</h2>
                        <p className="text-slate-500">Étape {step} sur 4</p>
                      </div>
                      <button onClick={resetForm} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"/></svg>
                      </button>
                    </div>

                    <div className="min-h-[300px]">
                      {step === 1 && (
                        <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                          <div>
                            <label className="block text-sm font-semibold mb-2">Quel est votre objectif ?</label>
                            <input 
                              autoFocus 
                              value={missionData.objective}
                              onChange={(e) => updateData('objective', e.target.value)}
                              className="w-full px-4 py-4 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none transition-all text-lg"
                              placeholder="Ex: Rédiger mes CGV, Créer un logo..."
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-semibold mb-2">Précisions (contexte, contraintes)</label>
                            <textarea 
                              value={missionData.details}
                              onChange={(e) => updateData('details', e.target.value)}
                              className="w-full px-4 py-4 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none transition-all h-32 resize-none"
                              placeholder="Décrivez votre besoin plus en détail..."
                            />
                          </div>
                        </div>
                      )}

                      {step === 2 && (
                        <div className="space-y-8 animate-in slide-in-from-right-4 duration-300">
                          <div>
                            <label className="block text-sm font-semibold mb-4">Votre niveau d'expertise</label>
                            <div className="grid grid-cols-3 gap-3">
                              {['Débutant', 'Intermédiaire', 'Expert'].map(l => (
                                <button 
                                  key={l}
                                  onClick={() => updateData('level', l)}
                                  className={`py-3 rounded-xl border-2 transition-all font-medium ${missionData.level === l ? 'border-blue-600 bg-blue-50 text-blue-700' : 'border-slate-100 hover:border-slate-200 shadow-sm'}`}
                                >
                                  {l}
                                </button>
                              ))}
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm font-semibold mb-4">Budget envisagé</label>
                            <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
                              {['Gratuit', '< 20€', '20–100€', '100–500€', '∞'].map(b => (
                                <button 
                                  key={b}
                                  onClick={() => updateData('budget', b)}
                                  className={`py-2 rounded-lg border-2 transition-all text-sm font-medium ${missionData.budget === b ? 'border-blue-600 bg-blue-50 text-blue-700' : 'border-slate-100 hover:border-slate-200'}`}
                                >
                                  {b}
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      )}

                      {step === 3 && (
                        <div className="space-y-8 animate-in slide-in-from-right-4 duration-300">
                          <div>
                            <label className="block text-sm font-semibold mb-4">Priorité majeure</label>
                            <div className="grid grid-cols-1 gap-3">
                              {['Le plus simple', 'Le plus puissant', 'Le moins cher', 'Le plus rapide', 'Le meilleur rapport qualité/prix'].map(p => (
                                <button 
                                  key={p}
                                  onClick={() => updateData('priority', p)}
                                  className={`py-4 px-6 text-left rounded-xl border-2 transition-all font-medium flex justify-between items-center ${missionData.priority === p ? 'border-blue-600 bg-blue-50 text-blue-700' : 'border-slate-100 hover:border-slate-200'}`}
                                >
                                  {p}
                                  {missionData.priority === p && <div className="w-2 h-2 rounded-full bg-blue-600"></div>}
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      )}

                      {step === 4 && (
                        <div className="space-y-6 animate-in slide-in-from-right-4 duration-300">
                          <h3 className="font-semibold text-lg">Résumé de votre mission</h3>
                          <div className="grid grid-cols-2 gap-4 bg-slate-50 p-6 rounded-2xl border border-slate-100">
                            <div><p className="text-xs text-slate-400 uppercase font-bold">Objectif</p><p className="font-medium">{missionData.objective}</p></div>
                            <div><p className="text-xs text-slate-400 uppercase font-bold">Expertise</p><p className="font-medium">{missionData.level}</p></div>
                            <div><p className="text-xs text-slate-400 uppercase font-bold">Budget</p><p className="font-medium">{missionData.budget}</p></div>
                            <div><p className="text-xs text-slate-400 uppercase font-bold">Priorité</p><p className="font-medium">{missionData.priority}</p></div>
                          </div>
                          <p className="text-sm text-slate-500 italic">En cliquant sur "Lancer l'analyse", notre conseiller indépendant filtrera plus de 5000 IA pour vous.</p>
                        </div>
                      )}
                    </div>

                    <div className="flex justify-between mt-12">
                      <button 
                        onClick={prevStep}
                        className={`px-6 py-3 rounded-full font-semibold transition-all ${step === 1 ? 'opacity-0 pointer-events-none' : 'text-slate-400 hover:text-slate-600'}`}
                      >
                        Retour
                      </button>
                      <button 
                        onClick={step === 4 ? submitMission : nextStep}
                        className="px-10 py-4 rounded-full bg-[#0F172A] text-white font-bold shadow-lg hover:shadow-blue-900/10 hover:-translate-y-0.5 transition-all"
                      >
                        {step === 4 ? "Lancer l'analyse" : "Suivant"}
                      </button>
                    </div>
                  </>
                ) : (
                  <div className="text-left animate-in fade-in duration-500">
                    <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mb-6">
                       <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"/></svg>
                    </div>
                    <h2 className="text-3xl font-serif mb-2 text-[#0F172A]">Analyse terminée</h2>
                    <p className="text-slate-500 mb-8">Voici les meilleures recommandations pour votre mission : <span className="font-bold text-[#0F172A]">{missionData.objective}</span></p>

                    <div className="space-y-4">
                      {[
                        {name: 'Claude 3.5 Sonnet', score: 98, tag: 'Élite', desc: 'Le meilleur pour la rédaction et le raisonnement.'},
                        {name: 'ChatGPT Plus', score: 96, tag: 'Polyvalent', desc: 'Excellent pour la génération d’images et le Web.'},
                        {name: 'Mistral Large', score: 92, tag: 'Souverain', desc: 'Solution européenne haute performance.'}
                      ].map((ia, index) => (
                        <div key={ia.name} className="flex items-center justify-between p-5 bg-white border border-slate-100 rounded-2xl group hover:border-blue-200 transition-all shadow-sm">
                          <div className="flex items-center gap-4">
                            <div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center font-bold text-slate-400 tracking-tighter">0{index+1}</div>
                            <div>
                               <div className="flex items-center gap-2">
                                <span className="font-bold">{ia.name}</span>
                                <span className="text-[10px] bg-blue-50 text-blue-600 px-2 rounded-full font-bold uppercase">{ia.tag}</span>
                               </div>
                               <p className="text-xs text-slate-500">{ia.desc}</p>
                            </div>
                          </div>
                          <div className="text-center bg-blue-50 px-3 py-2 rounded-xl">
                            <div className="text-xs text-blue-400 font-bold uppercase leading-none">LAM Score</div>
                            <div className="text-xl font-serif text-blue-700 font-bold">{ia.score}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                    <button 
                      onClick={resetForm}
                      className="w-full mt-10 py-4 font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest text-xs"
                    >
                      Nouvelle mission
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Footer Inspired Section */}
        <footer className="bg-white border-t border-slate-100 py-20 mt-20">
          <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-12">
            <div className="col-span-1 md:col-span-1 space-y-4">
              <div className="flex items-center gap-2">
                 <div className="w-6 h-6 rounded bg-[#0F172A]"></div>
                 <span className="font-bold text-lg leading-none">LAgentMarchand</span>
              </div>
              <p className="text-sm text-slate-500 leading-relaxed">
                Votre conseiller indépendant pour trouver l’intelligence artificielle adaptée à vos besoins. Recommandations personnalisées, comparatifs détaillés, guides pratiques.
              </p>
            </div>
            <div>
              <h4 className="font-bold text-xs uppercase tracking-widest text-slate-400 mb-6 font-sans">Plateforme</h4>
              <ul className="space-y-4 text-sm text-slate-500 font-medium">
                <li className="hover:text-blue-600 cursor-pointer">Recommandation IA</li>
                <li className="hover:text-blue-600 cursor-pointer">Comparatifs</li>
                <li className="hover:text-blue-600 cursor-pointer">Toutes les catégories</li>
                <li className="hover:text-blue-600 cursor-pointer">Blog</li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold text-xs uppercase tracking-widest text-slate-400 mb-6 font-sans">Ressources</h4>
              <ul className="space-y-4 text-sm text-slate-500 font-medium">
                <li className="hover:text-blue-600 cursor-pointer">Guides d’IA</li>
                <li className="hover:text-blue-600 cursor-pointer">Tutoriels</li>
                <li className="hover:text-blue-600 cursor-pointer">Newsletter</li>
                <li className="hover:text-blue-600 cursor-pointer">Contact</li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold text-xs uppercase tracking-widest text-slate-400 mb-6 font-sans">Légal</h4>
              <ul className="space-y-4 text-sm text-slate-500 font-medium">
                <li className="hover:text-blue-600 cursor-pointer">Confidentialité</li>
                <li className="hover:text-blue-600 cursor-pointer">CGU</li>
                <li className="hover:text-blue-600 cursor-pointer">Cookies</li>
                <li className="hover:text-blue-600 cursor-pointer">À propos</li>
              </ul>
            </div>
          </div>
          <div className="max-w-7xl mx-auto px-6 pt-12 mt-12 border-t border-slate-50 flex justify-between items-center text-[10px] font-bold text-slate-400 uppercase tracking-widest">
            <span>© 2024 L'Agent Marchand. Tous droits réservés.</span>
            <div className="flex gap-4">
              <span>Linkedin</span>
              <span>Twitter</span>
              <span>YouTube</span>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('artifact_react'));