import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

// --- Icons Components ---
interface IconProps {
  className?: string;
}

const IconCheck = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="20 6 9 17 4 12"></polyline></svg>
);
const IconArrowRight = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
);
const IconClock = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
);
const IconShield = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
);
const IconZap = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
);
const IconCpu = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
);
const IconMenu = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
);
const IconX = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
);
const IconChevronDown = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="6 9 12 15 18 9"></polyline></svg>
);
const IconLinkedin = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className={className}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
);
const IconCode = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
);
const IconUser = ({ className = "w-6 h-6" }: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
);

// --- Components ---

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "outline";
  className?: string;
}

const Button: React.FC<ButtonProps> = ({ children, variant = "primary", className = "", ...props }) => {
  const baseStyle = "inline-flex items-center justify-center px-6 py-3 border text-base font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-300 relative overflow-hidden group";
  
  const variants = {
    primary: "btn-gradient text-white border-transparent shadow-lg shadow-primary-500/20",
    secondary: "bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 hover:border-primary-200 hover:text-primary-700 backdrop-blur-sm shadow-sm",
    outline: "border-primary-500 text-primary-600 hover:bg-primary-50"
  };

  return (
    <button className={`${baseStyle} ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
};

interface SectionHeadingProps {
  title: string;
  subtitle?: string;
  align?: "center" | "left";
}

const SectionHeading: React.FC<SectionHeadingProps> = ({ title, subtitle, align = "center" }) => (
  <div className={`mb-16 ${align === "center" ? "text-center" : "text-left"}`}>
    <h2 className="text-3xl md:text-5xl font-display font-bold text-slate-900 mb-6 tracking-tight">
      {title}
    </h2>
    {subtitle && (
      <p className="text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed">
        {subtitle}
      </p>
    )}
  </div>
);

interface CardProps {
  children: React.ReactNode;
  className?: string;
}

const Card: React.FC<CardProps> = ({ children, className = "" }) => (
  <div className={`glass-card rounded-2xl p-8 ${className}`}>
    {children}
  </div>
);

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'Services', href: '#services' },
    { name: 'Cas d\'usage', href: '#use-cases' },
    { name: 'Méthode', href: '#method' },
    { name: 'Mon Histoire', href: '#story' },
  ];

  return (
    <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-white/80 backdrop-blur-xl border-b border-slate-200 shadow-sm' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          <div className="flex-shrink-0 flex items-center">
            <span className="text-2xl font-display font-bold text-slate-900 tracking-wider">
              HASSAN<span className="text-primary-600">SALEHI</span>
            </span>
          </div>
          
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a key={link.name} href={link.href} className="text-slate-600 hover:text-primary-600 transition-colors text-sm font-medium tracking-wide">
                {link.name}
              </a>
            ))}
            <Button variant="primary" className="!py-2 !px-5 text-sm font-semibold" onClick={() => document.getElementById('contact')!.scrollIntoView({behavior: 'smooth'})}>
              Réserver un audit
            </Button>
          </div>

          <div className="md:hidden flex items-center">
            <button onClick={() => setIsOpen(!isOpen)} className="text-slate-600 hover:text-primary-600 p-2">
              {isOpen ? <IconX /> : <IconMenu />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isOpen && (
        <div className="md:hidden bg-white border-b border-slate-200">
          <div className="px-4 pt-2 pb-6 space-y-2">
            {navLinks.map((link) => (
              <a key={link.name} href={link.href} className="block px-3 py-3 rounded-lg text-base font-medium text-slate-600 hover:text-primary-600 hover:bg-slate-50" onClick={() => setIsOpen(false)}>
                {link.name}
              </a>
            ))}
            <div className="pt-4">
              <Button variant="primary" className="w-full justify-center" onClick={() => { setIsOpen(false); document.getElementById('contact')!.scrollIntoView({behavior: 'smooth'}); }}>
                Réserver un audit
              </Button>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

const Hero = () => (
  <section className="relative min-h-screen flex items-center pt-20 pb-20 overflow-hidden bg-slate-50">
    {/* Animated Blobs Background (Pastel for Light Mode) */}
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      <div className="absolute top-0 -left-4 w-96 h-96 bg-accent-300 rounded-full mix-blend-multiply filter blur-[128px] opacity-40 animate-blob"></div>
      <div className="absolute top-0 -right-4 w-96 h-96 bg-primary-200 rounded-full mix-blend-multiply filter blur-[128px] opacity-40 animate-blob animation-delay-2000"></div>
      <div className="absolute -bottom-8 left-1/3 w-96 h-96 bg-purple-200 rounded-full mix-blend-multiply filter blur-[128px] opacity-40 animate-blob animation-delay-4000"></div>
      <div className="absolute inset-0 bg-grid opacity-100"></div>
    </div>

    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
      <div className="inline-flex items-center px-4 py-2 rounded-full border border-primary-500/30 bg-white/80 text-primary-700 text-sm font-semibold mb-8 animate-fade-in-up backdrop-blur-sm shadow-sm">
        <span className="flex h-2 w-2 rounded-full bg-primary-500 mr-2 animate-pulse"></span>
        Consultant Expert Automatisation & IA
      </div>
      
      <h1 className="text-4xl md:text-7xl lg:text-8xl font-display font-bold text-slate-900 leading-tight mb-8 animate-fade-in-up delay-100 tracking-tight">
        Je transforme vos process en <br/> <span className="gradient-text">moteurs de croissance</span>.
      </h1>
      
      <p className="mt-4 max-w-2xl mx-auto text-xl text-slate-600 mb-12 animate-fade-in-up delay-200 leading-relaxed font-light">
        Moi, c'est <span className="font-bold text-slate-900">Hassan</span>. Je ne vends pas du rêve, je construis des systèmes. J'aide les PME et ETI à reprendre le contrôle de leur temps grâce à l'automatisation intelligente.
      </p>
      
      <div className="flex flex-col sm:flex-row justify-center gap-6 animate-fade-in-up delay-300">
        <Button className="text-lg px-8 py-4" onClick={() => document.getElementById('contact')!.scrollIntoView({behavior: 'smooth'})}>
          Réserver un appel stratégique
        </Button>
        <Button variant="secondary" className="text-lg px-8 py-4" onClick={() => document.getElementById('story')!.scrollIntoView({behavior: 'smooth'})}>
          Qui suis-je ?
        </Button>
      </div>

      <div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto text-center">
        {[
          { icon: <IconClock className="w-5 h-5 text-primary-600" />, text: "Jusqu'à -40% temps de traitement" },
          { icon: <IconCheck className="w-5 h-5 text-primary-600" />, text: "Fiabilité des données & Zéro erreur" },
          { icon: <IconShield className="w-5 h-5 text-primary-600" />, text: "Architecture sécurisée & RGPD" },
        ].map((item, i) => (
          <div key={i} className="flex items-center justify-center space-x-3 text-slate-600 bg-white/60 py-4 px-6 rounded-full border border-slate-200 backdrop-blur-sm hover:bg-white transition-colors shadow-sm">
            {item.icon}
            <span className="text-sm font-semibold">{item.text}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TechStack = () => (
  <section className="py-20 bg-white border-y border-slate-100">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading 
        title="Ma boîte à outils" 
        subtitle="Je ne suis pas marié à un outil. Je choisis la meilleure arme pour chaque bataille."
      />
      
      <div className="grid md:grid-cols-4 gap-8">
        {[
          { title: "No-Code / Low-Code", tools: ["Make (Integromat)", "n8n", "Zapier", "Softr"] },
          { title: "CRM & Business", tools: ["Salesforce", "HubSpot", "Pipedrive", "Airtable"] },
          { title: "IA & Data", tools: ["OpenAI API", "Anthropic Claude", "Pinecone", "Python"] },
          { title: "Dev & API", tools: ["React/Node", "REST APIs", "Webhooks", "JSON"] },
        ].map((category, i) => (
          <div key={i} className="bg-slate-50 rounded-xl p-6 border border-slate-100 hover:border-primary-200 transition-colors">
            <h3 className="font-display font-bold text-slate-900 mb-4 pb-2 border-b border-slate-200">{category.title}</h3>
            <ul className="space-y-2">
              {category.tools.map((tool, idx) => (
                <li key={idx} className="flex items-center text-slate-600 text-sm">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary-400 mr-2"></div>
                  {tool}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Comparison = () => (
  <section className="py-24 bg-slate-50 relative">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading 
        title="Arrêtez de payer des humains pour faire le travail des robots" 
        subtitle="La réalité de 90% des entreprises aujourd'hui vs ce que je mets en place."
      />
      
      <div className="grid md:grid-cols-3 gap-8 mt-12">
        {[
          {
            title: "Silos de données",
            problem: "Vos équipes copient-collent des infos entre CRM, Excel et Email toute la journée.",
            solution: "Synchronisation temps réel : Vos outils dialoguent entre eux. Une entrée dans le CRM met à jour tout le reste."
          },
          {
            title: "Erreurs humaines",
            problem: "Factures oubliées, leads non rappelés, données erronées.",
            solution: "Fiabilité 100% : Des workflows logiques qui ne fatiguent jamais et ne font aucune faute de frappe."
          },
          {
            title: "Processus opaques",
            problem: "\"Seule Julie sait comment faire ça\". Si elle part, le process s'arrête.",
            solution: "Process documentés : Le savoir-faire est dans le système, pas seulement dans les têtes."
          }
        ].map((item, i) => (
          <Card key={i} className="group !border-l-0 relative overflow-hidden bg-white">
            <div className="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-primary-400 to-accent-500"></div>
            <h3 className="text-2xl font-bold text-slate-900 mb-6 group-hover:text-primary-600 transition-colors">{item.title}</h3>
            <div className="space-y-6">
              <div className="bg-red-50 p-4 rounded-lg text-sm text-red-700 border border-red-100">
                <span className="font-bold block mb-2 text-red-600 uppercase text-xs tracking-wider">Le Problème</span>
                {item.problem}
              </div>
              <div className="flex justify-center">
                <div className="bg-slate-50 p-2 rounded-full border border-slate-200">
                  <IconArrowRight className="text-slate-400 rotate-90 md:rotate-0 w-5 h-5" />
                </div>
              </div>
              <div className="bg-primary-50 p-4 rounded-lg text-sm text-primary-800 border border-primary-100 shadow-sm">
                <span className="font-bold block mb-2 text-primary-600 uppercase text-xs tracking-wider">Ma Solution</span>
                {item.solution}
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  </section>
);

const Services = () => (
  <section id="services" className="py-24 bg-white relative overflow-hidden">
    {/* Background accents */}
    <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-primary-50 to-transparent pointer-events-none"></div>

    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <SectionHeading 
        title="Comment je peux vous aider ?" 
        subtitle="Une approche chirurgicale : Audit > Solution > Implémentation."
      />
      
      <div className="grid md:grid-cols-3 gap-8">
        {[
          {
            icon: <IconClock className="w-8 h-8 text-white" />,
            color: "bg-blue-500",
            title: "Audit & Stratégie",
            desc: "Analyse complète de vos flux actuels. Identification des goulots d'étranglement et calcul du ROI potentiel."
          },
          {
            icon: <IconCpu className="w-8 h-8 text-white" />,
            color: "bg-primary-500",
            title: "Architecture & Automatisation",
            desc: "Construction de workflows complexes (Make/n8n) connectant vos outils existants (CRM, ERP, Marketing)."
          },
          {
            icon: <IconZap className="w-8 h-8 text-white" />,
            color: "bg-accent-500",
            title: "Intégration d'IA Générative",
            desc: "Implémentation d'agents IA pour le tri d'emails, l'analyse de documents ou le support niveau 1."
          }
        ].map((service, i) => (
          <Card key={i} className="group hover:-translate-y-2 transition-transform duration-300 bg-slate-50">
            <div className={`mb-6 ${service.color} w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg shadow-${service.color}/30`}>
              {service.icon}
            </div>
            <h3 className="text-2xl font-bold text-slate-900 mb-4">{service.title}</h3>
            <p className="text-slate-600 leading-relaxed">{service.desc}</p>
          </Card>
        ))}
      </div>
    </div>
  </section>
);

const UseCases = () => (
  <section id="use-cases" className="py-24 bg-slate-50">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading 
        title="Des résultats concrets par département" 
        subtitle="L'automatisation s'applique partout où il y a de la donnée."
      />

      <div className="grid md:grid-cols-2 gap-8 mt-10">
        {[
          {
            dept: "Support Client",
            icon: <IconShield className="w-6 h-6 text-primary-600" />,
            tasks: ["Tri automatique des tickets", "Réponses brouillons via IA", "Escalade Slack urgences"]
          },
          {
            dept: "Sales Ops",
            icon: <IconZap className="w-6 h-6 text-primary-600" />,
            tasks: ["Enrichissement automatique leads", "Scoring prédictif", "Génération contrats en 1 clic"]
          },
          {
            dept: "Finance & Admin",
            icon: <IconClock className="w-6 h-6 text-primary-600" />,
            tasks: ["OCR factures fournisseurs", "Réconciliation bancaire", "Relances impayés automatiques"]
          },
          {
            dept: "RH & Recrutement",
            icon: <IconCheck className="w-6 h-6 text-primary-600" />,
            tasks: ["Parsing de CV", "Pré-qualification automatique", "Onboarding (accès outils, mails)"]
          }
        ].map((item, i) => (
          <Card key={i} className="bg-white hover:border-primary-500/30">
            <div className="flex items-center gap-4 mb-6 border-b border-slate-100 pb-4">
              <div className="bg-primary-50 p-3 rounded-lg border border-primary-100">
                {item.icon}
              </div>
              <h3 className="text-xl font-bold text-slate-900">{item.dept}</h3>
            </div>
            <ul className="space-y-4">
              {item.tasks.map((task, idx) => (
                <li key={idx} className="flex items-start text-slate-600 group">
                  <span className="w-1.5 h-1.5 rounded-full bg-primary-500 mt-2 mr-3 group-hover:bg-accent-400 transition-colors"></span>
                  <span>{task}</span>
                </li>
              ))}
            </ul>
          </Card>
        ))}
      </div>
    </div>
  </section>
);

const Story = () => (
  <section id="story" className="py-24 bg-white relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-1/2 bg-slate-50 -skew-y-2 transform origin-top-left z-0"></div>
    
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div className="grid md:grid-cols-12 gap-12 items-start">
        
        {/* Profile Column */}
        <div className="md:col-span-4 lg:col-span-4">
          <div className="bg-white rounded-2xl shadow-xl shadow-slate-200/50 p-8 border border-slate-100 text-center sticky top-24">
            <div className="w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-primary-400 to-accent-500 p-1 mb-6">
              <div className="w-full h-full rounded-full bg-slate-100 flex items-center justify-center overflow-hidden">
                <span className="text-4xl font-display font-bold text-slate-400">HS</span>
                {/* Remplacez par <img src="votre-photo.jpg" alt="Hassan Salehi" className="w-full h-full object-cover" /> */}
              </div>
            </div>
            <h3 className="text-2xl font-display font-bold text-slate-900 mb-1">Hassan Salehi</h3>
            <p className="text-primary-600 font-medium mb-6">Expert Automatisation</p>
            
            <div className="space-y-4 text-left border-t border-slate-100 pt-6">
              <div className="flex items-center justify-between">
                <span className="text-slate-500 text-sm">Expérience</span>
                <span className="font-bold text-slate-900">5+ ans</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-slate-500 text-sm">Projets Livrés</span>
                <span className="font-bold text-slate-900">30+</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-slate-500 text-sm">Heures sauvées</span>
                <span className="font-bold text-slate-900">10k+</span>
              </div>
            </div>
            
            <div className="mt-8">
               <Button className="w-full text-sm" onClick={() => window.open('https://linkedin.com', '_blank')}>Suivez-moi sur LinkedIn</Button>
            </div>
          </div>
        </div>

        {/* Story Content Column */}
        <div className="md:col-span-8 lg:col-span-8 space-y-12">
          
          <div>
            <span className="text-primary-600 font-bold uppercase tracking-widest text-sm mb-2 block">Mon Parcours</span>
            <h2 className="text-4xl font-display font-bold text-slate-900 mb-6">De la frustration à l'innovation</h2>
            <div className="prose prose-lg text-slate-600">
              <p>
                Tout a commencé par un constat frustrant lors de mes premières expériences professionnelles : <strong className="text-slate-900">nous perdons un temps fou.</strong>
              </p>
              <p>
                Je voyais des équipes talentueuses passer des heures à copier-coller des données d'Excel vers un CRM, à trier manuellement des emails ou à générer des factures une par une. Ce n'était pas seulement une perte de temps, c'était une perte de potentiel humain.
              </p>
              <p>
                C'est là que j'ai découvert la puissance des API et du No-Code. J'ai commencé à automatiser mes propres tâches, puis celles de mes collègues. La réaction était toujours la même : <em className="text-primary-600">"Attends, tu as fait ça en 2 minutes ? Ça me prenait 2 jours."</em>
              </p>
              <p>
                Aujourd'hui, j'ai fait de cette passion mon métier. Je ne suis pas seulement un technicien, je suis un architecte de processus. Mon but n'est pas de remplacer l'humain, mais de le libérer des tâches robotiques pour qu'il puisse se concentrer sur ce qui compte vraiment : <strong>la stratégie, la créativité et la relation client.</strong>
              </p>
            </div>
          </div>

          <div>
             <span className="text-primary-600 font-bold uppercase tracking-widest text-sm mb-2 block">Ma Philosophie</span>
             <h3 className="text-2xl font-display font-bold text-slate-900 mb-6">Pourquoi travailler avec moi ?</h3>
             <div className="grid sm:grid-cols-2 gap-6">
               <div className="bg-slate-50 p-6 rounded-xl border border-slate-100">
                 <IconZap className="w-8 h-8 text-primary-500 mb-4" />
                 <h4 className="font-bold text-slate-900 mb-2">Pragmatisme > Hype</h4>
                 <p className="text-sm text-slate-600">Je n'utilise pas l'IA parce que c'est à la mode, mais parce que ça apporte un ROI mesurable. Si un simple script suffit, je ne vends pas une usine à gaz.</p>
               </div>
               <div className="bg-slate-50 p-6 rounded-xl border border-slate-100">
                 <IconShield className="w-8 h-8 text-primary-500 mb-4" />
                 <h4 className="font-bold text-slate-900 mb-2">Robustesse & Sécurité</h4>
                 <p className="text-sm text-slate-600">Une automatisation qui plante le vendredi soir n'est pas une solution. Je construis des systèmes avec gestion d'erreurs et logs détaillés.</p>
               </div>
               <div className="bg-slate-50 p-6 rounded-xl border border-slate-100">
                 <IconUser className="w-8 h-8 text-primary-500 mb-4" />
                 <h4 className="font-bold text-slate-900 mb-2">Pédagogie</h4>
                 <p className="text-sm text-slate-600">Je ne pars pas en vous laissant une "boîte noire". Je documente tout et je forme vos équipes pour que vous restiez maîtres de vos outils.</p>
               </div>
               <div className="bg-slate-50 p-6 rounded-xl border border-slate-100">
                 <IconCode className="w-8 h-8 text-primary-500 mb-4" />
                 <h4 className="font-bold text-slate-900 mb-2">Technique & Business</h4>
                 <p className="text-sm text-slate-600">Je parle le langage des développeurs (API, JSON) et celui des dirigeants (Marge, churn, conversion). Je fais le pont entre les deux.</p>
               </div>
             </div>
          </div>

        </div>
      </div>
    </div>
  </section>
);

const Method = () => (
  <section id="method" className="py-24 bg-white relative">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading 
        title="Une méthodologie rigoureuse" 
        subtitle="Zéro bricolage. Une approche d'ingénierie pour des systèmes robustes."
      />
      
      <div className="relative mt-20">
        {/* Connector Line */}
        <div className="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-slate-100 via-primary-200 to-slate-100 z-0"></div>
        
        <div className="grid md:grid-cols-4 gap-8 relative z-10">
          {[
            { step: "01", title: "Cartographie", desc: "Audit profond de vos processus pour comprendre 'qui fait quoi'." },
            { step: "02", title: "Prototypage", desc: "Création d'un POC rapide pour valider la faisabilité." },
            { step: "03", title: "Déploiement", desc: "Mise en production robuste, sécurisée et documentée." },
            { step: "04", title: "Optimisation", desc: "Formation des équipes et maintenance évolutive." },
          ].map((item, i) => (
            <div key={i} className="group">
              <div className="w-24 h-24 mx-auto bg-white border border-slate-200 rounded-full flex items-center justify-center text-2xl font-display font-bold text-transparent bg-clip-text bg-gradient-to-br from-primary-500 to-accent-600 mb-6 group-hover:scale-110 transition-transform duration-300 shadow-xl shadow-slate-200 z-10 relative">
                {item.step}
              </div>
              <div className="text-center p-6 rounded-xl hover:bg-slate-50 transition-colors">
                <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed">{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Offers = () => (
  <section id="offers" className="py-24 bg-slate-50">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading 
        title="Investissez dans votre croissance" 
        subtitle="Des offres claires, adaptées à votre niveau de maturité digitale."
      />

      <div className="grid md:grid-cols-3 gap-8 mt-12 items-start">
        {/* Pack 1 */}
        <Card className="flex flex-col h-full bg-white">
          <div className="mb-6">
            <span className="bg-slate-100 text-slate-600 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Diagnostic</span>
          </div>
          <h3 className="text-2xl font-bold text-slate-900 mb-2">Audit & Roadmap</h3>
          <p className="text-slate-600 text-sm mb-8 flex-grow">Pour les entreprises qui savent qu'elles perdent du temps mais ne savent pas par où commencer.</p>
          <div className="text-3xl font-bold text-slate-900 mb-8 font-display">Sur devis</div>
          <ul className="space-y-4 mb-8 text-slate-600 text-sm">
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Analyse outils & process (2h)</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Identification gains rapides</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Rapport d'audit complet</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Calcul du ROI estimé</li>
          </ul>
          <Button variant="secondary" className="w-full mt-auto">Demander un audit</Button>
        </Card>

        {/* Pack 2 - Highlighted */}
        <div className="relative transform md:-translate-y-6">
          <div className="absolute -inset-[2px] bg-gradient-to-r from-primary-400 via-accent-400 to-primary-400 rounded-2xl blur-sm opacity-50"></div>
          <Card className="relative h-full bg-white border-0 flex flex-col shadow-2xl shadow-primary-500/10">
            <div className="mb-6 flex justify-between items-center">
              <h3 className="text-2xl font-bold text-slate-900">Sprint Auto</h3>
              <span className="bg-gradient-to-r from-primary-500 to-accent-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Populaire</span>
            </div>
            <p className="text-slate-600 text-sm mb-8 flex-grow">Vous avez un problème précis à régler (ex: synchroniser CRM et Facturation).</p>
            <div className="text-3xl font-bold text-slate-900 mb-8 font-display">Sur devis</div>
            <ul className="space-y-4 mb-8 text-slate-700 text-sm font-medium">
              <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-accent-600" /> Développement workflow</li>
              <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-accent-600" /> Tests et recettes</li>
              <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-accent-600" /> Mise en production</li>
              <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-accent-600" /> Vidéo de formation</li>
            </ul>
            <Button variant="primary" className="w-full mt-auto shadow-lg shadow-accent-500/25">Lancer un sprint</Button>
          </Card>
        </div>

        {/* Pack 3 */}
        <Card className="flex flex-col h-full bg-white">
          <div className="mb-6">
            <span className="bg-slate-100 text-slate-600 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Transformation</span>
          </div>
          <h3 className="text-2xl font-bold text-slate-900 mb-2">Scale & Deploy</h3>
          <p className="text-slate-600 text-sm mb-8 flex-grow">Pour automatiser un département entier ou interconnecter tout l'écosystème.</p>
          <div className="text-3xl font-bold text-slate-900 mb-8 font-display">Sur devis</div>
          <ul className="space-y-4 mb-8 text-slate-600 text-sm">
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Architecture système complète</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Multiples workflows</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Dashboards monitoring</li>
            <li className="flex"><IconCheck className="w-5 h-5 mr-3 text-primary-600" /> Formation présentielle/visio</li>
          </ul>
          <Button variant="secondary" className="w-full mt-auto">Projet sur-mesure</Button>
        </Card>
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  
  const faqs = [
    { q: "Combien de temps faut-il pour automatiser un processus ?", a: "Un workflow simple peut être livré en 3 jours. Un écosystème complexe prend généralement 2 à 4 semaines." },
    { q: "Est-ce compatible avec mes logiciels actuels ?", a: "Si vos logiciels ont une API (c'est le cas de 99% des outils modernes comme Salesforce, HubSpot, Qonto...), oui. Sinon, des solutions existent." },
    { q: "Quel est le ROI attendu ?", a: "Mes clients constatent généralement un retour sur investissement en moins de 3 mois grâce au temps homme économisé." },
    { q: "Et si l'IA se trompe ?", a: "Nous mettons en place des garde-fous (Human-in-the-loop). L'IA ne \"décide\" pas seule des actions critiques (virements, suppression) sans validation." }
  ];

  return (
    <section className="py-24 bg-white">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading title="Questions Fréquentes" />
        
        <div className="space-y-4 mt-12">
          {faqs.map((faq, i) => (
            <div key={i} className={`border rounded-xl overflow-hidden transition-all duration-300 ${openIndex === i ? 'border-primary-500/50 bg-white' : 'border-slate-200 bg-white'}`}>
              <button 
                className="w-full flex justify-between items-center p-5 text-left transition-colors hover:bg-slate-50"
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
              >
                <span className={`font-semibold text-lg ${openIndex === i ? 'text-primary-700' : 'text-slate-800'}`}>{faq.q}</span>
                <IconChevronDown className={`w-5 h-5 text-slate-400 transform transition-transform duration-300 ${openIndex === i ? 'rotate-180 text-primary-500' : ''}`} />
              </button>
              <div 
                className={`overflow-hidden transition-all duration-300 ease-in-out ${openIndex === i ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`}
              >
                <div className="p-5 pt-0 text-slate-600 text-base leading-relaxed border-t border-slate-100 mt-2">
                  {faq.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Contact = () => (
  <section id="contact" className="py-24 relative overflow-hidden">
    <div className="absolute inset-0 bg-gradient-to-b from-slate-50 to-primary-100/30"></div>
    <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
      <h2 className="text-4xl md:text-6xl font-display font-bold text-slate-900 mb-8">Prêt à libérer le potentiel de votre entreprise ?</h2>
      <p className="text-xl text-slate-600 mb-12 font-light">N'attendez pas que vos concurrents automatisent avant vous.</p>
      
      <div className="flex flex-col sm:flex-row justify-center items-center gap-8">
        <Button className="w-full sm:w-auto text-lg px-10 py-5 shadow-2xl shadow-primary-500/30">Réserver mon audit (30 min - Gratuit)</Button>
        <div className="flex flex-col sm:items-start">
           <span className="text-slate-500 text-sm mb-1 uppercase tracking-wider">ou par email</span>
           <a href="mailto:contact@hassansalehi.fr" className="text-slate-900 hover:text-primary-600 font-medium text-lg border-b border-primary-500/30 hover:border-primary-600 transition-colors pb-1">
             contact@hassansalehi.fr
           </a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-slate-900 border-t border-slate-800 py-12 relative z-10 text-white">
    <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="mb-6 md:mb-0 text-center md:text-left">
        <span className="text-lg font-display font-bold text-white tracking-wider">
          HASSAN<span className="text-primary-400">SALEHI</span>
        </span>
        <p className="text-slate-400 text-sm mt-2">© 2024 Hassan Salehi. Tous droits réservés.</p>
      </div>
      
      <div className="flex space-x-8 mb-6 md:mb-0">
        <a href="#" className="text-slate-400 hover:text-white transition-colors text-sm">Mentions Légales</a>
        <a href="#" className="text-slate-400 hover:text-white transition-colors text-sm">Confidentialité</a>
      </div>
      
      <div className="flex space-x-4">
        <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-primary-600 transition-all duration-300">
          <IconLinkedin className="w-5 h-5" />
        </a>
      </div>
    </div>
  </footer>
);

const App = () => {
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-primary-500 selection:text-white overflow-x-hidden">
      <Navbar />
      <Hero />
      <TechStack />
      <Comparison />
      <Services />
      <UseCases />
      <Method />
      <Story />
      <Offers />
      <FAQ />
      <Contact />
      <Footer />
    </div>
  );
};

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);