/* global React, Reveal, Icon, Placeholder */
const { useState: useStateP } = React;

// ============================================================
// PAGE — Services / Expertise
// ============================================================
const ServicesPage = ({ setPage }) => (
  <main className="page-enter">
    <section className="hero" style={{paddingTop: 60, paddingBottom: 60}}>
      <div className="shell">
        <span className="eyebrow eyebrow-dot">02 / Expertise</span>
        <h1 className="h-display" style={{marginTop: 24, maxWidth:'18ch'}}>
          Onze domaines, <em>une seule promesse.</em>
        </h1>
        <p className="lede" style={{marginTop: 32}}>
          Du site web au workflow IA, du cloud à la formation : Nof'y couvre l'ensemble des leviers numériques pour faire entrer votre entreprise dans l'ère 4.0.
        </p>
      </div>
    </section>

    <section className="section" style={{paddingTop: 0}}>
      <div className="shell">
        <div className="services" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
          {[
            { num:'01', icon:'spark', title:'Transformation digitale & IA', desc:'Modernisez vos processus, automatisez vos tâches et intégrez l\'IA dans vos opérations.' },
            { num:'02', icon:'web', title:'Développement web & mobile', desc:'Sites, solutions métier et applications mobiles, conçus pour soutenir vos objectifs business.' },
            { num:'03', icon:'app', title:'Automatisation & workflows', desc:'Workflows IA, RPA, intégrations intelligentes pour gagner du temps et réduire les coûts.' },
            { num:'04', icon:'spark', title:'Création vidéo & image', desc:'Contenus visuels impactants pour votre image et votre communication digitale.' },
            { num:'05', icon:'app', title:'Support IT & DevOps', desc:'Gestion d\'infrastructures, sécurité, monitoring et optimisation continue.' },
            { num:'06', icon:'web', title:'Migration cloud', desc:'Une transition cloud sécurisée, flexible et évolutive.' },
            { num:'07', icon:'spark', title:'E-Réputation & Social Media', desc:'Maîtrisez votre image, renforcez votre présence en ligne, développez votre communauté.' },
            { num:'08', icon:'learn', title:'Assistant virtuel', desc:'Support client, gestion administrative et assistance à distance.' },
            { num:'09', icon:'learn', title:'Formateur IT', desc:'Formations pratiques en développement, cloud, IA et outils modernes.' },
            { num:'10', icon:'spark', title:'Design', desc:'Identité visuelle, UI/UX, design system. Une direction artistique au service de votre marque et de vos produits.' },
            { num:'11', icon:'spark', title:'Community Management', desc:'Animation de communautés, calendrier éditorial, modération et engagement sur vos réseaux sociaux.' },
          ].map(s => (
            <div key={s.num} className="service" onClick={()=>setPage('contact')}>
              <span className="service-num">{s.num}</span>
              <div className="service-icon"><Icon name={s.icon} size={26}/></div>
              <h3 className="h-card">{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-meta">
                <span>En savoir +</span>
                <span className="service-arrow"><Icon name="arrowUp" size={14}/></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Digital Express — produit phare */}
    <section className="section" style={{background:'var(--nofy-deep-900)', color:'#FFFFFF', paddingTop: 120, paddingBottom: 120}}>
      <div className="shell">
        <div className="section-head" style={{marginBottom: 56}}>
          <span className="section-num" style={{color:'var(--nofy-sky)'}}>★ Produit phare</span>
          <div className="section-head-text">
            <h2 className="h-section" style={{color:'#FFFFFF'}}>
              Digital Express. <em style={{color:'var(--nofy-sky)'}}>L'innovation rapide.</em>
            </h2>
            <p className="lede" style={{marginTop: 20, color:'rgba(255,255,255,0.7)'}}>
              Pour les entreprises qui n'ont pas le temps. On livre vite, sans rogner sur la qualité.
            </p>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 1, background:'rgba(255,255,255,0.1)'}}>
          {[
            ['⚡ 24 h', 'Site internet complet en moins de 24 heures'],
            ['💰 25 €', 'Landing page professionnelle à partir de 25 €'],
            ['📱 7 jours', 'Application mobile en moins d\'une semaine'],
          ].map(([big, t]) => (
            <div key={big} style={{background:'var(--nofy-deep-900)', padding:'48px 36px'}}>
              <div style={{fontFamily:'var(--font-display)', fontSize: 72, lineHeight: 1, color:'var(--nofy-sky)', marginBottom: 20}}>{big}</div>
              <p style={{margin: 0, color:'rgba(255,255,255,0.8)', fontSize: 16, maxWidth:'30ch'}}>{t}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop: 56, display:'flex', justifyContent:'center'}}>
          <button className="btn btn-sky" onClick={()=>setPage('contact')}>
            Démarrer en Express
            <Icon name="arrow" size={16}/>
          </button>
        </div>
      </div>
    </section>

    {/* Formations */}
    <section className="section">
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— Formations IT</span>
          <div className="section-head-text">
            <h2 className="h-section">Formez vos équipes <em>aux outils 4.0.</em></h2>
            <p className="lede" style={{marginTop: 20}}>
              Programmes adaptés aux besoins de l'entreprise 4.0. Développement, cloud, IA et outils modernes — par des praticiens qui les utilisent au quotidien.
            </p>
          </div>
        </div>
        <div className="formations">
          <div className="formation-feature">
            <span className="eyebrow" style={{color:'var(--nofy-sky)'}}>★ Programme phare</span>
            <h3 className="h-card" style={{fontSize: 44, marginTop: 24, color:'var(--nofy-white)', maxWidth:'14ch'}}>
              Maîtriser l'IA en entreprise
            </h3>
            <p style={{color:'rgba(255,255,255,0.7)', marginTop: 16, marginBottom: 32, maxWidth:'40ch'}}>
              Comprendre, prompter, automatiser. Une semaine pour transformer votre rapport au numérique et déployer vos premiers workflows IA.
            </p>
            <div style={{display:'flex', gap: 24, marginTop: 'auto', alignItems:'baseline'}}>
              <div>
                <div className="eyebrow" style={{color:'rgba(255,255,255,0.5)'}}>Format</div>
                <div style={{fontFamily:'var(--font-display)', fontSize: 28}}>Intra ou inter</div>
              </div>
              <div>
                <div className="eyebrow" style={{color:'rgba(255,255,255,0.5)'}}>Sessions</div>
                <div style={{fontFamily:'var(--font-display)', fontSize: 28}}>Sur demande</div>
              </div>
            </div>
          </div>
          <div className="formation-list">
            {[
              ['F1', 'Développement web (HTML, CSS, JS, React)'],
              ['F2', 'Make & n8n — automatisation no-code'],
              ['F3', 'Cloud & DevOps essentiels'],
              ['F4', 'Cybersécurité pour PME'],
              ['F5', 'Création de contenu vidéo & visuels'],
            ].map(([n, t]) => (
              <div key={n} className="formation-item" onClick={()=>setPage('contact')}>
                <span className="fnum">{n}</span>
                <div>
                  <h4>{t}</h4>
                  <span className="meta">Sur mesure · Présentiel ou distanciel</span>
                </div>
                <span className="price" style={{fontSize:18}}>Devis →</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============================================================
// PAGE — Tarifs
// ============================================================
const PricingPage = ({ setPage }) => (
  <main className="page-enter">
    <section className="hero" style={{paddingTop: 60, paddingBottom: 80}}>
      <div className="shell">
        <span className="eyebrow eyebrow-dot">03 / Tarifs</span>
        <h1 className="h-display" style={{marginTop: 24, maxWidth:'16ch'}}>
          Vite, bien, <em>au juste prix.</em>
        </h1>
        <p className="lede" style={{marginTop: 32}}>
          Trois formules pour démarrer — de l'urgence Digital Express au projet sur mesure. Devis gratuit sous 24h, sans engagement.
        </p>
      </div>
    </section>

    <section className="section" style={{paddingTop: 0}}>
      <div className="shell">
        <div className="pricing">
          <div className="price-card">
            <span className="price-tag">Digital Express</span>
            <h3>Landing</h3>
            <p className="desc">Une page d'atterrissage professionnelle, livrée vite.</p>
            <div className="price-amount"><em>dès</em>25<span style={{fontSize:24}}>€</span></div>
            <div className="price-suffix">Tarif de départ · Livraison rapide</div>
            <ul className="price-features">
              <li>Page unique optimisée conversion</li>
              <li>Design adapté à votre marque</li>
              <li>Formulaire de contact intégré</li>
              <li>Hébergement & nom de domaine inclus 1 an</li>
            </ul>
            <button className="btn btn-ghost price-cta" onClick={()=>setPage('contact')}>
              Demander un devis
              <Icon name="arrow" size={16}/>
            </button>
          </div>

          <div className="price-card featured">
            <span className="price-tag">Le plus choisi</span>
            <h3>Site Express 24h</h3>
            <p className="desc">Un site internet complet, livré en moins de 24 heures.</p>
            <div className="price-amount"><em>sur</em>devis</div>
            <div className="price-suffix">24h chrono · Multi-pages</div>
            <ul className="price-features">
              <li>Site complet (5 à 10 pages)</li>
              <li>Design sur mesure & responsive</li>
              <li>SEO de base & performance</li>
              <li>Formation à l'administration</li>
              <li>Support 30 jours inclus</li>
            </ul>
            <button className="btn btn-sky price-cta" onClick={()=>setPage('contact')}>
              Lancer mon Express
              <Icon name="arrow" size={16}/>
            </button>
          </div>

          <div className="price-card">
            <span className="price-tag">Sur-mesure</span>
            <h3>App & SaaS</h3>
            <p className="desc">Application mobile ou solution métier, livrée en 7 jours et plus.</p>
            <div className="price-amount"><em>dès</em>7<span style={{fontSize:24}}> jours</span></div>
            <div className="price-suffix">Périmètre adapté · Devis personnalisé</div>
            <ul className="price-features">
              <li>Application iOS / Android</li>
              <li>Backend & base de données</li>
              <li>Intégrations IA & workflows</li>
              <li>Maintenance & évolutions</li>
            </ul>
            <button className="btn btn-ghost price-cta" onClick={()=>setPage('contact')}>
              Démarrer un projet
              <Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>

        {/* FAQ */}
        <div style={{marginTop: 120}}>
          <div className="section-head">
            <span className="section-num">— Questions fréquentes</span>
            <div className="section-head-text">
              <h2 className="h-section">On répond <em>simplement.</em></h2>
            </div>
          </div>
          <FAQ items={[
            ['Comment livrez-vous un site en 24h ?', 'Avec une méthodologie éprouvée, des composants prêts à assembler et une équipe disponible. Vous fournissez le contenu, on s\'occupe du reste — design, développement et mise en ligne.'],
            ['Quels secteurs accompagnez-vous ?', 'Toutes les entreprises qui utilisent l\'IT : PME, ETI, structures publiques, associations. On s\'adapte à votre secteur et vos contraintes.'],
            ['Travaillez-vous à distance ?', 'Oui. Nos équipes interviennent à distance partout dans le monde, et en présentiel à Madagascar et sur déplacement selon les missions.'],
            ['Vos formations sont-elles certifiantes ?', 'Nos formations sont pratiques et orientées résultats. Selon les programmes, des attestations ou certifications partenaires sont délivrées.'],
            ['Comment se passe le devis ?', 'Vous nous décrivez votre projet via le formulaire ou par email. On revient vers vous sous 24h avec une estimation personnalisée et un plan de mission.'],
          ]}/>
        </div>
      </div>
    </section>
  </main>
);

const FAQ = ({ items }) => {
  const [open, setOpen] = useStateP(0);
  return (
    <div style={{borderTop:'1px solid var(--nofy-line)'}}>
      {items.map(([q, a], i) => (
        <div key={i} style={{borderBottom:'1px solid var(--nofy-line)'}}>
          <button onClick={() => setOpen(open === i ? -1 : i)}
            style={{width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', padding:'28px 0', textAlign:'left', fontFamily:'var(--font-display)', fontSize:24, letterSpacing:'-0.01em'}}>
            <span>{q}</span>
            <span style={{display:'inline-flex', width:36, height:36, borderRadius:'50%', border:'1px solid var(--nofy-line)', alignItems:'center', justifyContent:'center', flexShrink:0, marginLeft:24}}>
              <Icon name={open === i ? 'minus' : 'plus'} size={16}/>
            </span>
          </button>
          {open === i && (
            <div style={{paddingBottom:32, color:'var(--nofy-mute)', maxWidth:'70ch', fontSize:16, lineHeight:1.6}}>
              {a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

// ============================================================
// PAGE — À propos / Équipe
// ============================================================
const AboutPage = ({ setPage }) => (
  <main className="page-enter">
    <section className="hero" style={{paddingTop: 60, paddingBottom: 80}}>
      <div className="shell">
        <span className="eyebrow eyebrow-dot">04 / Qui sommes-nous</span>
        <h1 className="h-display" style={{marginTop: 24, maxWidth:'16ch'}}>
          Une équipe <em>jeune,</em> dynamique, passionnée.
        </h1>
        <div className="hero-bottom" style={{marginTop: 80}}>
          <div className="hero-lede">
            <p className="lede">
              Nof'y rassemble des spécialistes du numérique dédiés à propulser votre entreprise vers l'industrie 4.0. Développement, IA, cloud, formation : on combine les expertises pour livrer vite, bien, et au juste prix.
            </p>
          </div>
          <div>
            <div className="eyebrow">— Domaines</div>
            <div style={{fontFamily:'var(--font-display)', fontSize: 64, color:'var(--nofy-deep)', lineHeight:1, marginTop:8}}>11</div>
            <div className="body-sm">d'expertise couverts</div>
          </div>
          <div>
            <div className="eyebrow">— Promesse</div>
            <div style={{fontFamily:'var(--font-display)', fontSize: 64, color:'var(--nofy-deep)', lineHeight:1, marginTop:8}}>24h</div>
            <div className="body-sm">pour livrer un site complet</div>
          </div>
        </div>
      </div>
    </section>

    <section className="section" style={{background:'var(--nofy-white)'}}>
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— Ce qui nous anime</span>
          <div className="section-head-text">
            <h2 className="h-section">Notre <em>boussole.</em></h2>
          </div>
        </div>
        <div className="values">
          {[
            ['01', 'Vitesse', 'Pas de tunnel à rallonge. On livre en 24h, en 7 jours, en 3 mois — selon le projet, jamais plus que nécessaire.'],
            ['02', 'Pragmatisme', 'Le bon outil pour le bon problème. IA quand elle apporte, no-code quand il suffit, code propre quand il faut durer.'],
            ['03', 'Transmission', 'On forme nos clients en cours de mission. À la fin, vous savez tenir ce qu\'on vous a livré.'],
          ].map(([n, t, d]) => (
            <Reveal key={n}>
              <div className="value">
                <div className="value-num">{n}</div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Équipe */}
    <section className="section">
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— Équipe Nof'y</span>
          <div className="section-head-text">
            <h2 className="h-section">Les visages <em>derrière le projet.</em></h2>
          </div>
        </div>
        <div className="team">
          {[
            ['Radomalala', 'Directeur Technique', 'R'],
            ['Lila', 'UX/UI Design', 'L'],
            ['Zo', 'Responsable Ressources Humaines', 'Z'],
            ['Aina Angela', 'Front Office', 'A'],
            ['Nandrianina', 'Responsable Technique', 'N'],
            ['Nambinintsoa', 'Team Leader', 'N'],
          ].map(([name, role, init], i) => (
            <Reveal key={name} delay={i*40}>
              <div className="member">
                <div className="member-photo" style={{display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Placeholder kind={i % 3 === 0 ? 'grid' : i % 3 === 1 ? 'stripe' : 'deep'}/>
                  <span style={{position:'relative', zIndex:2, fontFamily:'var(--font-display)', fontSize: 88, color: i % 3 === 2 ? 'var(--nofy-white)' : 'var(--nofy-deep)'}}>{init}</span>
                </div>
                <h5>{name}</h5>
                <span className="role">{role}</span>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Pôles */}
        <div style={{marginTop: 80}}>
          <div className="eyebrow" style={{marginBottom: 24}}>— Pôles d'expertise</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20}}>
            {[
              ['Équipe Dev', 'Développeurs passionnés'],
              ['Équipe Support IT', 'Assistance technique 24/7'],
              ['Expert IA', 'Expert en intelligence artificielle'],
              ['Expert Make & n8n', 'Automatisation de workflows no-code'],
              ['Assistant·e virtuel·le', 'Support client & gestion administrative'],
              ['Data labeling', 'Annotation de données pour l\'IA'],
            ].map(([t, d], i) => (
              <div key={t} style={{padding:'28px 24px', border:'1px solid var(--nofy-line)', borderRadius: 16, background:'var(--nofy-paper)'}}>
                <div style={{display:'inline-flex', width: 44, height: 44, borderRadius: 12, background:'var(--nofy-sky-pale)', color:'var(--nofy-deep)', alignItems:'center', justifyContent:'center', marginBottom: 16}}>
                  <Icon name={i < 2 ? 'web' : i < 4 ? 'spark' : 'learn'} size={22}/>
                </div>
                <h4 style={{margin:'0 0 6px', fontFamily:'var(--font-display)', fontSize: 22, fontWeight: 400}}>{t}</h4>
                <p style={{margin: 0, fontSize: 14, color:'var(--nofy-mute)'}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============================================================
// PAGE — Blog (témoignages + journal)
// ============================================================
const BlogPage = ({ setPage }) => {
  const [filter, setFilter] = useStateP('Tous');
  const cats = ['Tous', 'Témoignages', 'Cas client', 'IA & Automatisation', 'Conseils'];
  const posts = [
    { cat:'Témoignages', title:'« Une équipe réactive et professionnelle »', author:'Sophie Rakoto · DG TechnoPlus', feat:true,
      img:'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=900&q=80',
      excerpt:'Nof\'y a transformé notre façon de travailler. L\'automatisation de nos processus nous a fait gagner 40% de temps.' },
    { cat:'Témoignages', title:'« Un ROI impressionnant en moins de 3 mois »', author:'Jean Rasolofo · CEO Digital Solutions MG',
      img:'https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=900&q=80',
      excerpt:'Leur expertise en IA nous a permis de développer un chatbot intelligent qui a révolutionné notre service client.' },
    { cat:'Témoignages', title:'« Une migration cloud fluide et sécurisée »', author:'Marie Andrianina · CTO InnovaCorp',
      img:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=900&q=80',
      excerpt:'Notre infrastructure est maintenant plus performante et nos coûts ont diminué de 30%.' },
    { cat:'IA & Automatisation', title:'Construire un workflow Make en 2 heures', author:'Équipe Nof\'y',
      img:'https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=80',
      excerpt:'Pas à pas, comment automatiser une chaîne email → CRM → relance sans écrire une ligne de code.' },
    { cat:'Cas client', title:'Site Express 24h : retour sur 12 livraisons', author:'Équipe Nof\'y',
      img:'https://images.unsplash.com/photo-1559028012-481c04fa702d?auto=format&fit=crop&w=900&q=80',
      excerpt:'Ce qui marche, ce qui surprend, et ce qu\'on a appris à demander aux clients dès le briefing.' },
    { cat:'Conseils', title:'5 erreurs à éviter en migration cloud', author:'Pôle Support IT',
      img:'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=900&q=80',
      excerpt:'Les pièges classiques qu\'on rencontre quand on accompagne des PME vers AWS, GCP ou Azure.' },
    { cat:'IA & Automatisation', title:'Chatbot IA : ce que change RAG dans la qualité des réponses', author:'Expert IA',
      img:'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?auto=format&fit=crop&w=900&q=80',
      excerpt:'Démonstration concrète sur un cas client, avec mesure de la pertinence avant et après.' },
  ];
  const filtered = filter === 'Tous' ? posts : posts.filter(p => p.cat === filter);
  return (
    <main className="page-enter">
      <section className="hero" style={{paddingTop: 60, paddingBottom: 60}}>
        <div className="shell">
          <span className="eyebrow eyebrow-dot">05 / Ressources</span>
          <h1 className="h-display" style={{marginTop: 24, maxWidth:'16ch'}}>
            Témoignages, <em>retours, conseils.</em>
          </h1>
          <p className="lede" style={{marginTop: 32}}>
            Ce que nos clients disent. Ce qu'on apprend en mission. Ce qu'on a envie de partager.
          </p>
          <div className="chips" style={{marginTop: 40}}>
            {cats.map(c => (
              <span key={c} className={`chip ${filter===c?'active':''}`} onClick={()=>setFilter(c)}>{c}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop: 40}}>
        <div className="shell">
          <div className="blog-grid">
            {filtered.map((p, i) => (
              <Reveal key={p.title} delay={i*40}>
                <div className={`post ${p.feat?'feature':''}`}>
                  <div className="post-visual" style={p.feat ? {aspectRatio:'4/3'} : {}}>
                    <img src={p.img} alt={p.title}
                         style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
                  </div>
                  <div className="post-meta">
                    <span className="post-cat">{p.cat}</span>
                    <span>·</span>
                    <span>{p.author}</span>
                  </div>
                  <h4>{p.title}</h4>
                  {p.excerpt && <p>{p.excerpt}</p>}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

// ============================================================
// PAGE — Contact
// ============================================================
const ContactPage = () => {
  const [form, setForm] = useStateP({ name:'', email:'', company:'', budget:'', message:'', topics: [] });
  const [sent, setSent] = useStateP(false);
  const topics = ['Site web', 'Application', 'IA & Automatisation', 'Cloud', 'Formation', 'Vidéo / Image', 'Autre'];
  const budgets = ['Digital Express (25–500 €)', 'Site complet', 'App / SaaS', 'Mission longue', 'À définir'];
  const toggleTopic = (t) => {
    setForm(f => ({ ...f, topics: f.topics.includes(t) ? f.topics.filter(x=>x!==t) : [...f.topics, t] }));
  };
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(()=>setSent(false), 4500);
  };
  return (
    <main className="page-enter">
      <section className="hero" style={{paddingTop: 60, paddingBottom: 60}}>
        <div className="shell">
          <span className="eyebrow eyebrow-dot">06 / Contact</span>
          <h1 className="h-display" style={{marginTop: 24, maxWidth:'14ch'}}>
            Devis gratuit, <em>sous 24h.</em>
          </h1>
          <p className="lede" style={{marginTop: 32, maxWidth:'46ch'}}>
            Parlez-nous de votre projet et recevez une estimation personnalisée. Sans engagement, sans bla-bla.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop: 0}}>
        <div className="shell">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 80}}>
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>— Contact direct</div>
              <div style={{display:'flex', flexDirection:'column', gap: 28}}>
                <div style={{display:'flex', gap: 16, alignItems:'flex-start'}}>
                  <span style={{width:40, height:40, borderRadius:'50%', background:'var(--nofy-sky-pale)', color:'var(--nofy-deep)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name="mail" size={18}/>
                  </span>
                  <div>
                    <div style={{fontWeight:500}}>Demande générale</div>
                    <a href="mailto:info@nofy.tech" style={{color:'var(--nofy-mute)'}}>info@nofy.tech</a>
                  </div>
                </div>
                <div style={{display:'flex', gap: 16, alignItems:'flex-start'}}>
                  <span style={{width:40, height:40, borderRadius:'50%', background:'var(--nofy-sky-pale)', color:'var(--nofy-deep)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name="mail" size={18}/>
                  </span>
                  <div>
                    <div style={{fontWeight:500}}>Contact commercial</div>
                    <a href="mailto:contact@nofy.tech" style={{color:'var(--nofy-mute)'}}>contact@nofy.tech</a>
                  </div>
                </div>
                <div style={{display:'flex', gap: 16, alignItems:'flex-start'}}>
                  <span style={{width:40, height:40, borderRadius:'50%', background:'var(--nofy-sky-pale)', color:'var(--nofy-deep)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name="phone" size={18}/>
                  </span>
                  <div>
                    <div style={{fontWeight:500}}>Téléphone</div>
                    <a href="tel:+261379442212" style={{color:'var(--nofy-mute)'}}>+261 37 94 422 12</a>
                  </div>
                </div>
                <div style={{display:'flex', gap: 16, alignItems:'flex-start'}}>
                  <span style={{width:40, height:40, borderRadius:'50%', background:'var(--nofy-sky-pale)', color:'var(--nofy-deep)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name="web" size={18}/>
                  </span>
                  <div>
                    <div style={{fontWeight:500}}>Site web</div>
                    <a href="https://nofy.tech" target="_blank" rel="noopener" style={{color:'var(--nofy-mute)'}}>nofy.tech</a>
                  </div>
                </div>
              </div>

              <div style={{marginTop: 56, padding: 24, background:'var(--nofy-paper-2)', borderRadius: 16}}>
                <div className="eyebrow" style={{marginBottom: 12}}>— Réponse garantie</div>
                <p style={{margin: 0, fontSize: 14, color:'var(--nofy-mute)'}}>
                  Sous 24 heures ouvrées. Si on ne peut pas vous accompagner, on vous oriente vers un partenaire qui peut.
                </p>
              </div>

              <div style={{marginTop: 24, padding: 24, background:'var(--nofy-deep-900)', color:'#FFFFFF', borderRadius: 16}}>
                <div className="eyebrow" style={{marginBottom: 12, color:'var(--nofy-sky)'}}>★ Digital Express</div>
                <p style={{margin: 0, fontSize: 14, color:'rgba(255,255,255,0.75)'}}>
                  Besoin urgent ? Précisez « Express » dans votre message — on vous rappelle dans la journée.
                </p>
              </div>
            </div>

            <form onSubmit={onSubmit} style={{display:'flex', flexDirection:'column', gap: 20}}>
              <div className="field-row">
                <div className="field">
                  <label>Nom complet</label>
                  <input required value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="Votre nom"/>
                </div>
                <div className="field">
                  <label>Email pro</label>
                  <input required type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="vous@entreprise.com"/>
                </div>
              </div>
              <div className="field">
                <label>Entreprise</label>
                <input value={form.company} onChange={e=>setForm({...form, company:e.target.value})} placeholder="Nom de votre structure"/>
              </div>
              <div className="field">
                <label>Sujet du projet</label>
                <div className="chips" style={{marginTop: 4}}>
                  {topics.map(t => (
                    <span key={t} className={`chip ${form.topics.includes(t)?'active':''}`} onClick={()=>toggleTopic(t)}>{t}</span>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Type de projet</label>
                <div className="chips" style={{marginTop: 4}}>
                  {budgets.map(b => (
                    <span key={b} className={`chip ${form.budget===b?'active':''}`} onClick={()=>setForm({...form, budget: form.budget===b?'':b})}>{b}</span>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Décrivez votre projet</label>
                <textarea value={form.message} onChange={e=>setForm({...form, message:e.target.value})} placeholder="Contexte, objectifs, échéance idéale…"/>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 12, gap: 16, flexWrap:'wrap'}}>
                <p style={{margin: 0, fontSize: 12, color:'var(--nofy-mute)'}}>
                  Réponse garantie sous 24h. Vos données restent confidentielles.
                </p>
                <button type="submit" className="btn btn-primary">
                  {sent ? '✓ Demande envoyée' : 'Envoyer ma demande'}
                  {!sent && <Icon name="arrow" size={16}/>}
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { ServicesPage, PricingPage, AboutPage, BlogPage, ContactPage });