/* global React, ReactDOM, Nav, Footer, Reveal, Icon, Placeholder, NofyMark, NofyWordmark, ServicesPage, PricingPage, AboutPage, BlogPage, ContactPage */
const { useState, useEffect } = React;

// ============================================================
// PAGE — Accueil (contenu réel nofy.tech)
// ============================================================
const HomePage = ({ setPage }) => (
  <main className="page-enter">

    {/* HERO */}
    <section className="hero">
      <div className="shell">
        <Reveal>
          <span className="hero-tag">
            <span className="pulse"/>
            <span>Devis gratuit · Réponse sous 24h</span>
          </span>
        </Reveal>

        <Reveal delay={80}>
          <h1 className="h-display" style={{color:'#FFFFFF'}}>
            Propulser les entreprises<br/>
            vers <em style={{color:'#FFFFFF'}}>l'ère 4.0.</em>
          </h1>
        </Reveal>

        <div className="hero-bottom">
          <div className="hero-lede">
            <Reveal delay={160}>
              <p className="lede">
                Transformation digitale, IA, automatisation et cybersécurité au service de votre croissance. Nof'y conçoit, code, automatise et forme — pour les entreprises qui veulent avancer vite, bien.
              </p>
            </Reveal>
          </div>
          <Reveal delay={240}>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={()=>setPage('contact')}>
                Demander un devis gratuit
                <Icon name="arrow" size={16}/>
              </button>
              <button className="btn btn-ghost" onClick={()=>setPage('services')}>
                Nos expertises
              </button>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div>
              <div className="eyebrow">— Digital Express</div>
              <div style={{fontFamily:'var(--font-display)', fontSize: 56, lineHeight: 1, marginTop: 8, color:'var(--nofy-deep-500)'}}>
                24h<span style={{fontSize:24, color:'var(--nofy-mute)'}}> chrono</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* MARQUEE / Promesses */}
    <div className="marquee">
      <div className="marquee-track">
        <span>
          <span>Site en 24 h</span><span className="dot"/>
          <span>Landing dès 25 €</span><span className="dot"/>
          <span>App mobile en 7 jours</span><span className="dot"/>
          <span>Workflows IA</span><span className="dot"/>
          <span>Cloud sécurisé</span><span className="dot"/>
          <span>Support IT 24/7</span><span className="dot"/>
          <span>Formations sur mesure</span><span className="dot"/>
        </span>
        <span aria-hidden="true">
          <span>Site en 24 h</span><span className="dot"/>
          <span>Landing dès 25 €</span><span className="dot"/>
          <span>App mobile en 7 jours</span><span className="dot"/>
          <span>Workflows IA</span><span className="dot"/>
          <span>Cloud sécurisé</span><span className="dot"/>
          <span>Support IT 24/7</span><span className="dot"/>
          <span>Formations sur mesure</span><span className="dot"/>
        </span>
      </div>
    </div>

    {/* DOMAINES D'EXPERTISE */}
    <section className="section">
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— 01 / Expertise</span>
          <div className="section-head-text">
            <h2 className="h-section">Nos domaines <em>d'expertise.</em></h2>
            <p className="lede" style={{marginTop: 20}}>
              Onze savoir-faire complémentaires pour accompagner toute la chaîne numérique : du design à la mise en production, de l'IA au support quotidien.
            </p>
          </div>
        </div>

        <div className="services">
          {[
            { 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étiers et applications mobiles performantes.' },
            { num:'03', icon:'app', title:'Automatisation & workflows', desc:'Workflows IA, RPA, intégrations intelligentes pour gagner du temps.' },
            { num:'04', icon:'spark', title:'Création vidéo & image', desc:'Contenus visuels impactants pour 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.' },
            { 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.' },
            { 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('services')}>
              <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 BAND */}
    <section className="band">
      <div className="shell">
        <Reveal>
          <span className="eyebrow" style={{color:'var(--nofy-sky-400)'}}>★ Notre produit phare</span>
          <p className="band-quote" style={{marginTop: 24, color:'#FFFFFF'}}>
            Digital Express. <em>L'innovation rapide</em> au service de l'entreprise 4.0.
          </p>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 48, marginTop: 80}}>
          {[
            ['⚡ 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}>
              <div style={{fontFamily:'var(--font-display)', fontSize: 72, lineHeight: 1, color:'var(--nofy-sky-400)', marginBottom: 16}}>{big}</div>
              <p style={{margin: 0, color:'rgba(255,255,255,0.8)', fontSize: 16, maxWidth:'30ch'}}>{t}</p>
            </div>
          ))}
        </div>
        <div className="band-foot">
          <span>— Digital Express · Tarifs sur devis</span>
          <span>Réponse sous 24h</span>
        </div>
      </div>
    </section>

    {/* TÉMOIGNAGES */}
    <section className="section">
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— 02 / Témoignages</span>
          <div className="section-head-text">
            <h2 className="h-section">Ils nous font <em>confiance.</em></h2>
          </div>
        </div>

        <div className="cases">
          <Reveal>
            <div className="case">
              <div className="case-visual">
                <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=900&q=80"
                     alt="Sophie Rakoto — TechnoPlus"
                     style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
                <div className="ph-label">Sophie Rakoto · TechnoPlus</div>
              </div>
              <div className="case-info">
                <div className="case-meta">
                  <span>Automatisation</span><span>—</span><span>Sophie Rakoto · DG TechnoPlus</span>
                </div>
                <p style={{fontFamily:'var(--font-body)', fontSize: 22, lineHeight: 1.45, fontWeight: 400, color:'var(--nofy-ink)', margin: 0}}>
                  « Nof'y a transformé notre façon de travailler. L'automatisation de nos processus nous a fait gagner 40 % de temps. Une équipe réactive et professionnelle ! »
                </p>
                <div className="case-stats" style={{marginTop: 32}}>
                  <div>
                    <div className="stat-num">+40%</div>
                    <div className="stat-label">Temps gagné</div>
                  </div>
                  <div>
                    <div className="stat-num">—</div>
                    <div className="stat-label">Équipe réactive</div>
                  </div>
                  <div>
                    <div className="stat-num">—</div>
                    <div className="stat-label">Pro & humain</div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <div className="case" style={{gridTemplateColumns:'1fr 1.2fr'}}>
              <div className="case-info">
                <div className="case-meta">
                  <span>IA · Chatbot</span><span>—</span><span>Jean Rasolofo · CEO Digital Solutions MG</span>
                </div>
                <p style={{fontFamily:'var(--font-body)', fontSize: 22, lineHeight: 1.45, fontWeight: 400, color:'var(--nofy-ink)', margin: 0}}>
                  « Leur expertise en IA nous a permis de développer un chatbot intelligent qui a révolutionné notre service client. ROI impressionnant en moins de 3 mois. »
                </p>
                <div className="case-stats" style={{marginTop: 32}}>
                  <div>
                    <div className="stat-num">&lt; 3 mois</div>
                    <div className="stat-label">ROI atteint</div>
                  </div>
                  <div>
                    <div className="stat-num">IA</div>
                    <div className="stat-label">Chatbot intelligent</div>
                  </div>
                  <div>
                    <div className="stat-num">★</div>
                    <div className="stat-label">Service client revu</div>
                  </div>
                </div>
              </div>
              <div className="case-visual">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=80"
                     alt="Jean Rasolofo — Digital Solutions MG"
                     style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
                <div className="ph-label">Jean Rasolofo · Digital Solutions MG</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={160}>
            <div className="case">
              <div className="case-visual">
                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=900&q=80"
                     alt="Marie Andrianina — InnovaCorp"
                     style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
                <div className="ph-label">Marie Andrianina · InnovaCorp</div>
              </div>
              <div className="case-info">
                <div className="case-meta">
                  <span>Migration cloud</span><span>—</span><span>Marie Andrianina · CTO InnovaCorp</span>
                </div>
                <p style={{fontFamily:'var(--font-body)', fontSize: 22, lineHeight: 1.45, fontWeight: 400, color:'var(--nofy-ink)', margin: 0}}>
                  « La migration cloud réalisée par Nof'y était fluide et sécurisée. Notre infrastructure est maintenant plus performante et nos coûts ont diminué de 30 %. »
                </p>
                <div className="case-stats" style={{marginTop: 32}}>
                  <div>
                    <div className="stat-num">−30%</div>
                    <div className="stat-label">Coûts infra</div>
                  </div>
                  <div>
                    <div className="stat-num">+</div>
                    <div className="stat-label">Performance</div>
                  </div>
                  <div>
                    <div className="stat-num">✓</div>
                    <div className="stat-label">Migration sécurisée</div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* QUI SOMMES-NOUS — teaser */}
    <section className="section" style={{background:'var(--nofy-white)', paddingTop: 100, paddingBottom: 100}}>
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— 03 / Qui sommes-nous</span>
          <div className="section-head-text">
            <h2 className="h-section">Une équipe jeune, <em>dynamique, passionnée.</em></h2>
            <p className="lede" style={{marginTop: 20}}>
              Dédiée à propulser votre entreprise vers l'industrie 4.0. Développeurs, experts IA, formateurs, support IT — tout sous un même toit.
            </p>
          </div>
        </div>
        <div className="process">
          {[
            ['👨‍💻', 'Équipe Dev', 'Développeurs passionnés.'],
            ['🛠️', 'Support IT', 'Assistance technique 24/7.'],
            ['🤖', 'Expert IA', 'Intelligence artificielle.'],
            ['⚙️', 'Make & n8n', 'Workflows no-code.'],
          ].map(([n, t, d]) => (
            <div key={t} className="step">
              <div className="step-num" style={{fontSize: 48}}>{n}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'center', marginTop: 56}}>
          <button className="btn btn-ghost" onClick={()=>setPage('about')}>
            Découvrir l'équipe
            <Icon name="arrow" size={16}/>
          </button>
        </div>
      </div>
    </section>

    {/* FORMATIONS TEASER */}
    <section className="section">
      <div className="shell">
        <div className="section-head">
          <span className="section-num">— 04 / Formations IT</span>
          <div className="section-head-text">
            <h2 className="h-section">Développez vos compétences <em>4.0.</em></h2>
            <p className="lede" style={{marginTop: 20}}>
              Programmes adaptés aux besoins de l'entreprise 4.0. Pour toute inscription ou question, contactez-nous.
            </p>
          </div>
        </div>
        <div style={{display:'flex', justifyContent:'flex-start'}}>
          <button className="btn btn-primary" onClick={()=>setPage('contact')}>
            Nous contacter
            <Icon name="arrow" size={16}/>
          </button>
        </div>
      </div>
    </section>

    {/* CTA BAND */}
    <section className="section" style={{paddingTop: 60, paddingBottom: 120}}>
      <div className="shell">
        <div className="cta-band">
          <div>
            <span className="eyebrow eyebrow-dot">Devis gratuit · Sans engagement</span>
            <h2 style={{marginTop: 20}}>
              Demandez votre <em>devis gratuit.</em>
            </h2>
            <p className="lede" style={{maxWidth:'42ch'}}>
              Parlez-nous de votre projet et recevez une estimation personnalisée sous 24 heures.
            </p>
          </div>
          <div className="cta-form">
            <div className="field">
              <label>Votre email</label>
              <input type="email" placeholder="vous@entreprise.com"/>
            </div>
            <div className="field">
              <label>Sujet</label>
              <select>
                <option>Site internet</option>
                <option>Application mobile</option>
                <option>Automatisation & IA</option>
                <option>Migration cloud</option>
                <option>Formation</option>
                <option>Design</option>
                <option>Autre</option>
              </select>
            </div>
            <button className="btn btn-primary" onClick={()=>setPage('contact')}>
              Demander mon devis
              <Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============================================================
// APP — Router
// ============================================================
const App = () => {
  const [page, setPage] = useState('home');

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  const pages = {
    home: HomePage,
    services: ServicesPage,
    pricing: PricingPage,
    about: AboutPage,
    blog: BlogPage,
    contact: ContactPage,
  };
  const Page = pages[page] || HomePage;

  return (
    <div data-screen-label={page}>
      <Nav page={page} setPage={setPage}/>
      <Page key={page} setPage={setPage}/>
      <Footer setPage={setPage}/>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);