/* global React */

// =========================================================
// PARTITION MAGIQUE — Site components
// =========================================================

const { useState, useEffect, useRef } = React;

// ---------- Logo ----------
function SiteLogo({ size = 1, mono = false }) {
  const sq = 22 * size;
  const gap = 3 * size;
  const colors = mono
    ? ['var(--ink)','var(--ink)','var(--ink)','var(--ink)','var(--ink)']
    : ['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'];
  return (
    <div style={{display:'inline-flex', alignItems:'center', gap: 12 * size}}>
      <div style={{display:'flex', gap}}>
        {colors.map((c, i) => (
          <span key={i} style={{
            width: sq, height: sq, borderRadius: 4 * size, background: c,
            boxShadow:'inset 0 -2px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.35)'
          }}/>
        ))}
      </div>
      <span style={{display:'inline-flex', alignItems:'baseline', gap: 6 * size, fontFamily:'var(--serif)', fontSize: 22 * size, lineHeight: 1, color:'var(--ink)'}}>
        <span>Partition</span>
        <span style={{fontStyle:'italic', color: mono ? 'var(--ink)' : 'var(--c1)'}}>Magique</span>
      </span>
    </div>
  );
}

// ---------- Nav ----------
function Nav({ ctaLabel, onCta }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" style={{textDecoration:'none'}}><SiteLogo size={0.85}/></a>
        <ul className="nav-links">
          <li><a href="#methode">La méthode</a></li>
          <li><a href="#contenu">Ce que tu reçois</a></li>
          <li><a href="#avis">Avis</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <a href="#telecharger" className="btn btn-primary" onClick={onCta} style={{padding:'12px 22px', fontSize:14}}>
          {ctaLabel}
          <span className="btn-arrow"/>
        </a>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ title, subtitle, ctaLabel, onCta }) {
  return (
    <section className="hero" id="top">
      {/* floating decorative squares */}
      <span className="float-sq" style={{width:36, height:36, top:80, left:'8%', background:'var(--c3-soft)', transform:'rotate(-14deg)'}}/>
      <span className="float-sq" style={{width:24, height:24, top:240, left:'4%', background:'var(--c5-soft)', transform:'rotate(20deg)'}}/>
      <span className="float-sq" style={{width:30, height:30, bottom:140, right:'6%', background:'var(--c2-soft)', transform:'rotate(8deg)'}}/>

      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-badges">
              <span className="hero-badge"><span className="dot" style={{background:'var(--c1)'}}/>Pour les 4-8 ans</span>
              <span className="hero-badge"><span className="dot" style={{background:'var(--c4)'}}/>Sans solfège</span>
              <span className="hero-badge"><span className="dot" style={{background:'var(--c5)'}}/>À imprimer</span>
            </div>

            <h1 dangerouslySetInnerHTML={{__html: title}}/>

            <p className="hero-lead">{subtitle}</p>

            <div className="hero-cta-row">
              <a href="#telecharger" className="btn btn-primary" onClick={onCta}>
                {ctaLabel}
                <span className="btn-arrow"/>
              </a>
              <a href="#methode" className="btn btn-secondary">Voir la méthode</a>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-item">
                <CheckIcon/>
                <span>21 pages PDF</span>
              </div>
              <div className="hero-meta-item">
                <CheckIcon/>
                <span>10 chansons connues</span>
              </div>
              <div className="hero-meta-item">
                <CheckIcon/>
                <span>Étiquettes incluses</span>
              </div>
            </div>
          </div>

          <div>
            <PdfPreviewStack/>
          </div>
        </div>
      </div>
    </section>
  );
}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{color:'var(--c4)'}}>
      <circle cx="12" cy="12" r="10" fill="var(--c4-soft)" stroke="var(--c4)" strokeWidth="1.5"/>
      <path d="M8 12.5l3 3 5-6" stroke="var(--c4)"/>
    </svg>
  );
}

// ---------- PDF Preview stack (visual mock of 3 pages) ----------
function PdfPreviewStack() {
  return (
    <div className="pdf-stack">
      {/* Back page — keyboard with stickers */}
      <div className="page-card" style={{
        width:'58%', aspectRatio:'210/297',
        top:'2%', left:'2%',
        transform:'rotate(-7deg)',
      }}>
        <MockPageKeyboard/>
      </div>
      {/* Middle page — song */}
      <div className="page-card" style={{
        width:'58%', aspectRatio:'210/297',
        top:'8%', right:'2%',
        transform:'rotate(6deg)',
      }}>
        <MockPageSong/>
      </div>
      {/* Front page — cover */}
      <div className="page-card" style={{
        width:'62%', aspectRatio:'210/297',
        bottom:'-2%', left:'19%',
        transform:'rotate(-2deg)',
        zIndex: 3,
      }}>
        <MockPageCover/>
      </div>
    </div>
  );
}

function MockPageCover() {
  return (
    <div style={{width:'100%', height:'100%', padding:'12% 10%', display:'flex', flexDirection:'column', justifyContent:'space-between', background:'var(--paper)'}}>
      <div>
        <div style={{display:'flex', gap:3, marginBottom:8}}>
          {['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i)=>(
            <span key={i} style={{width:'8%', aspectRatio:'1', background:c, borderRadius:2}}/>
          ))}
        </div>
        <div style={{fontFamily:'var(--serif)', fontSize:'clamp(11px, 1.7vw, 16px)', lineHeight:1, color:'var(--ink)'}}>Partition</div>
        <div style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(11px, 1.7vw, 16px)', lineHeight:1, color:'var(--c1)'}}>Magique</div>
      </div>
      <div>
        <div style={{fontFamily:'var(--hand)', fontSize:'clamp(9px, 1.3vw, 13px)', color:'var(--c2)'}}>la méthode</div>
        <div style={{fontFamily:'var(--serif)', fontSize:'clamp(14px, 2.4vw, 22px)', lineHeight:1.05, color:'var(--ink)', marginTop:4}}>
          Joue tes <span style={{fontStyle:'italic', color:'var(--c1)'}}>premières</span> chansons
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:3}}>
        {['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i)=>(
          <div key={i} style={{aspectRatio:'1', background:c, borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', color:'var(--ink)', fontSize:'clamp(8px, 1.2vw, 12px)'}}>{i+1}</div>
        ))}
      </div>
    </div>
  );
}

function MockPageKeyboard() {
  // mini keyboard with colored stickers
  return (
    <div style={{width:'100%', height:'100%', padding:'14% 8%', background:'var(--paper)', display:'flex', flexDirection:'column', gap:8}}>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(10px, 1.6vw, 14px)', lineHeight:1.1}}>
        Trouve les <span style={{fontStyle:'italic', color:'var(--c5)'}}>3 noires</span>
      </div>
      <div style={{flex:1, display:'flex', alignItems:'center'}}>
        <div style={{width:'100%', position:'relative', display:'flex', gap:1, background:'var(--ink)', padding:2, borderRadius:3}}>
          {[0,1,2,3,4,5,6].map(i=>(
            <div key={i} style={{flex:1, aspectRatio:'1/4', background:'var(--paper)', borderRadius:1, position:'relative'}}>
              {i>=1 && i<=5 && (
                <div style={{
                  position:'absolute', bottom:'18%', left:'15%', right:'15%',
                  aspectRatio:'1', borderRadius:'50%',
                  background:['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'][i-1]
                }}/>
              )}
            </div>
          ))}
          {/* black keys */}
          <div style={{position:'absolute', top:2, left:'14%', width:'9%', height:'55%', background:'var(--ink)', borderRadius:1}}/>
          <div style={{position:'absolute', top:2, left:'27%', width:'9%', height:'55%', background:'var(--ink)', borderRadius:1}}/>
          <div style={{position:'absolute', top:2, left:'53%', width:'9%', height:'55%', background:'var(--ink)', borderRadius:1}}/>
          <div style={{position:'absolute', top:2, left:'66%', width:'9%', height:'55%', background:'var(--ink)', borderRadius:1}}/>
          <div style={{position:'absolute', top:2, left:'79%', width:'9%', height:'55%', background:'var(--ink)', borderRadius:1}}/>
        </div>
      </div>
      <div style={{fontFamily:'var(--hand)', fontSize:'clamp(9px, 1.3vw, 13px)', color:'var(--c1)'}}>colle ici →</div>
    </div>
  );
}

function MockPageSong() {
  return (
    <div style={{width:'100%', height:'100%', padding:'12% 8%', background:'var(--paper)', display:'flex', flexDirection:'column', gap:6}}>
      <div style={{fontFamily:'var(--mono)', fontSize:'clamp(7px, 1vw, 9px)', color:'var(--ink-mute)', letterSpacing:'0.2em'}}>CHANSON 03</div>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(11px, 1.6vw, 16px)', lineHeight:1.1, color:'var(--ink)', marginBottom:4}}>
        Au clair de la <span style={{fontStyle:'italic', color:'var(--c3)'}}>lune</span>
      </div>
      <div style={{display:'flex', flexWrap:'wrap', gap:3}}>
        {[1,1,1,2,3,3,2,1,3,2,2,1].map((n,i)=>(
          <span key={i} style={{
            width:'12%', aspectRatio:'1', borderRadius:2,
            background: ['#E86A5C','#F4A24A','#F0CB47'][n-1],
            color:'var(--ink)', fontFamily:'var(--serif)',
            fontSize:'clamp(7px, 1.2vw, 12px)',
            display:'flex', alignItems:'center', justifyContent:'center'
          }}>{n}</span>
        ))}
      </div>
      <div style={{marginTop:'auto', fontFamily:'var(--hand)', fontSize:'clamp(9px, 1.3vw, 13px)', color:'var(--c2)', lineHeight:1.2}}>
        Au clair de la lune,<br/>mon ami Pierrot...
      </div>
    </div>
  );
}

// ---------- Audience cards ----------
function AudienceSection() {
  const items = [
    { color:'var(--c1)', soft:'var(--c1-soft)', icon:'4-8', title:'Les enfants curieux', body:"Dès 4 ans, ton enfant peut suivre la méthode tout seul ou avec toi. Pas de notes à apprendre, juste des couleurs à reconnaître." },
    { color:'var(--c4)', soft:'var(--c4-soft)', icon:'0', title:"Les parents non-musiciens", body:"Aucune connaissance musicale requise de ta part. Tu poses les étiquettes, l'enfant joue. Tu apprends en même temps." },
    { color:'var(--c5)', soft:'var(--c5-soft)', icon:'15', title:"Les écoles & ateliers", body:"Idéal pour les enseignants en maternelle/primaire ou les ateliers d'éveil musical. Imprimable autant de fois que tu veux." },
  ];
  return (
    <section className="section" id="methode" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">À qui ça s'adresse</span>
          <h2>Conçue pour les <em className="italic-accent">premiers pas</em></h2>
          <p className="lead">Un système de couleurs qui remplace le solfège. L'enfant joue de vraies chansons dès la première séance — sans frustration, sans pression.</p>
        </div>
        <div className="card-grid">
          {items.map((it, i) => (
            <div key={i} className="card">
              <div className="card-icon" style={{background: it.soft, color: it.color}}>{it.icon}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contents (what's inside) ----------
function ContentsSection() {
  const items = [
    { n:'01', title:'Le manuel pédagogique', body:'Position, mains, posture. 4 pages illustrées pour bien démarrer, même sans connaître la musique.' },
    { n:'02', title:'Les étiquettes magiques', body:'4 jeux de 5 étiquettes à découper et coller sur le clavier. Repositionnables à l\'infini.' },
    { n:'03', title:'10 chansons connues', body:'Frère Jacques, Au clair de la lune, Joyeux anniversaire... Toutes notées en couleurs, avec paroles.' },
    { n:'04', title:'QR codes intégrés', body:'Chaque chanson a un QR vers la vidéo de démo. L\'enfant peut écouter avant de jouer.' },
    { n:'05', title:'Fiche conseils parents', body:'Comment accompagner sans pression, durée des séances, signes que ça marche.' },
    { n:'06', title:'Jeu de cartes bonus', body:'Un jeu de mémo pour réviser les couleurs en s\'amusant, à imprimer en plus.' },
  ];
  return (
    <section className="section" id="contenu">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Ce que tu reçois</span>
          <h2>21 pages, <em className="italic-accent">pensées</em> jusqu'au détail</h2>
        </div>

        <div className="contents-stripe">
          <span style={{background:'var(--c1)'}}/>
          <span style={{background:'var(--c2)'}}/>
          <span style={{background:'var(--c3)'}}/>
          <span style={{background:'var(--c4)'}}/>
          <span style={{background:'var(--c5)'}}/>
        </div>

        <div className="card-grid">
          {items.map((it, i) => (
            <div key={i} className="card">
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.2em', color:'var(--ink-mute)', marginBottom:8}}>{it.n}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- How it works (3 steps) ----------
function HowItWorks() {
  const steps = [
    { n:1, color:'var(--c1)', soft:'var(--c1-soft)', title:'Imprime & découpe', body:'Tu télécharges le PDF, tu l\'imprimes en A4. Tu découpes les 5 étiquettes colorées.' },
    { n:2, color:'var(--c3)', soft:'var(--c3-soft)', title:'Colle sur le piano', body:'Tu places les étiquettes 1 à 5 sur les bonnes touches (le PDF te montre comment).' },
    { n:3, color:'var(--c4)', soft:'var(--c4-soft)', title:'Joue dès aujourd\'hui', body:'L\'enfant lit les couleurs, appuie sur les touches correspondantes. C\'est tout.' },
  ];
  return (
    <section className="section" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Comment ça marche</span>
          <h2>3 étapes, <em className="italic-accent">10 minutes</em></h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, position:'relative'}}>
          {steps.map((s, i) => (
            <div key={i} style={{textAlign:'center', padding:'12px'}}>
              <div style={{width:88, height:88, borderRadius:'50%', background:s.soft, color:s.color, fontFamily:'var(--serif)', fontSize:42, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 24px', border:`2px solid ${s.color}`}}>
                {s.n}
              </div>
              <h3 style={{marginBottom:10}}>{s.title}</h3>
              <p style={{color:'var(--ink-soft)', fontSize:15, lineHeight:1.55, maxWidth:'32ch', margin:'0 auto'}}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Pages preview gallery ----------
function GallerySection() {
  // 8 mini pages
  return (
    <section className="section" id="apercu">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Aperçu du PDF</span>
          <h2>Quelques pages <em className="italic-accent">à feuilleter</em></h2>
        </div>
        <div className="gallery">
          <GalleryItem n="01" type="cover"/>
          <GalleryItem n="02" type="hello"/>
          <GalleryItem n="04" type="hands"/>
          <GalleryItem n="05" type="labels"/>
          <GalleryItem n="06" type="keyboard"/>
          <GalleryItem n="09" type="song" songName="Frère Jacques" colors={[1,2,3,1,1,2,3,1]}/>
          <GalleryItem n="11" type="song" songName="Au clair de la lune" colors={[1,1,1,2,3,3,2]}/>
          <GalleryItem n="14" type="song" songName="Joyeux anniversaire" colors={[1,1,2,1,4,3]}/>
        </div>
      </div>
    </section>
  );
}

function GalleryItem({ n, type, songName, colors }) {
  return (
    <div className="gallery-item">
      {type === 'cover' && <MockPageCover/>}
      {type === 'hello' && <MockPageHello/>}
      {type === 'hands' && <MockPageHands/>}
      {type === 'labels' && <MockPageLabels/>}
      {type === 'keyboard' && <MockPageKeyboard/>}
      {type === 'song' && <MockPageSongDetail name={songName} colors={colors}/>}
      <span className="gallery-num">PAGE {n}</span>
    </div>
  );
}

function MockPageHello() {
  return (
    <div style={{width:'100%', height:'100%', padding:'14% 10%', background:'var(--paper)', display:'flex', flexDirection:'column', justifyContent:'center'}}>
      <div style={{fontFamily:'var(--hand)', fontSize:'clamp(10px, 1.5vw, 16px)', color:'var(--c2)'}}>bienvenue !</div>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(13px, 2vw, 20px)', lineHeight:1.05, marginTop:6}}>
        Coucou,<br/>
        <span style={{fontStyle:'italic', color:'var(--c1)'}}>petit·e</span> pianiste
      </div>
      <div style={{fontFamily:'var(--sans)', fontSize:'clamp(7px, 1vw, 10px)', color:'var(--ink-soft)', marginTop:14, lineHeight:1.4}}>
        Tu vas apprendre à jouer du piano sans solfège, juste avec des couleurs...
      </div>
    </div>
  );
}

function MockPageHands() {
  return (
    <div style={{width:'100%', height:'100%', padding:'10% 8%', background:'var(--paper)', display:'flex', flexDirection:'column', gap:6}}>
      <div style={{fontFamily:'var(--mono)', fontSize:'clamp(6px, 0.9vw, 9px)', color:'var(--ink-mute)', letterSpacing:'0.2em'}}>ÉTAPE 02</div>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(10px, 1.5vw, 14px)', lineHeight:1.05}}>
        Tes doigts comme des <span style={{fontStyle:'italic', color:'var(--c2)'}}>pattes d'araignée</span>
      </div>
      <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
        <div style={{flex:1, aspectRatio:'1', background:'var(--c4-soft)', border:`1px solid var(--c4)`, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', color:'var(--c4)', fontSize:'clamp(14px, 2.5vw, 20px)'}}>✓</div>
        <div style={{flex:1, aspectRatio:'1', background:'var(--c1-soft)', border:`1px solid var(--c1)`, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', color:'var(--c1)', fontSize:'clamp(14px, 2.5vw, 20px)'}}>✗</div>
      </div>
    </div>
  );
}

function MockPageLabels() {
  return (
    <div style={{width:'100%', height:'100%', padding:'12% 10%', background:'var(--paper)', display:'flex', flexDirection:'column', gap:8}}>
      <div style={{fontFamily:'var(--mono)', fontSize:'clamp(6px, 0.9vw, 9px)', color:'var(--ink-mute)', letterSpacing:'0.2em'}}>À DÉCOUPER</div>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(10px, 1.5vw, 14px)', lineHeight:1.05}}>
        Tes étiquettes <span style={{fontStyle:'italic', color:'var(--c3)'}}>magiques</span>
      </div>
      <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', gap:6}}>
        {[0,1,2,3].map(set => (
          <div key={set} style={{display:'flex', gap:4, justifyContent:'center'}}>
            {['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c, i) => (
              <span key={i} style={{
                width:'14%', aspectRatio:'1', background:c, borderRadius:3,
                border:'1px dashed rgba(0,0,0,0.2)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--serif)', fontSize:'clamp(7px, 1.1vw, 11px)', color:'var(--ink)'
              }}>{i+1}</span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function MockPageSongDetail({ name, colors }) {
  return (
    <div style={{width:'100%', height:'100%', padding:'12% 8%', background:'var(--paper)', display:'flex', flexDirection:'column', gap:6}}>
      <div style={{fontFamily:'var(--mono)', fontSize:'clamp(6px, 0.9vw, 9px)', color:'var(--ink-mute)', letterSpacing:'0.2em'}}>CHANSON</div>
      <div style={{fontFamily:'var(--serif)', fontSize:'clamp(10px, 1.5vw, 14px)', lineHeight:1.05}}>{name}</div>
      <div style={{display:'flex', flexWrap:'wrap', gap:3, marginTop:4}}>
        {colors.map((n, i) => (
          <span key={i} style={{
            width:'12%', aspectRatio:'1', borderRadius:2,
            background: ['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'][n-1],
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--serif)', fontSize:'clamp(6px, 1vw, 10px)', color:'var(--ink)'
          }}>{n}</span>
        ))}
      </div>
      <div style={{marginTop:'auto', fontFamily:'var(--hand)', fontSize:'clamp(8px, 1.2vw, 12px)', color:'var(--c2)'}}>♪ chante avec moi</div>
    </div>
  );
}

// ---------- Testimonials ----------
function Testimonials() {
  const items = [
    { quote:"Mon fils de 5 ans joue Frère Jacques depuis hier soir. Il était scotché 20 minutes au piano, sans qu'on lui demande.", name:'Camille', meta:'Maman de Léo, 5 ans' },
    { quote:"J'ai testé en classe de moyenne section. Les enfants ont compris le système en 10 minutes. Bluffant.", name:'Marie L.', meta:'Enseignante maternelle' },
    { quote:"Je n'ai jamais fait de musique. Avec ce PDF, ma fille a son rituel du soir : 2 chansons avant le coucher.", name:'Thomas', meta:'Papa de Lina, 6 ans' },
  ];
  return (
    <section className="section" id="avis">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Ce qu'en pensent les parents</span>
          <h2>Des familles, <em className="italic-accent">des sourires</em></h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div key={i} className="testi">
              <div style={{display:'flex', gap:2, marginBottom:14}}>
                {[0,1,2,3,4].map(s => (
                  <span key={s} style={{color:'var(--c2)', fontSize:18}}>★</span>
                ))}
              </div>
              <div className="testi-quote">"{t.quote}"</div>
              <div className="testi-author">
                <div className="testi-avatar" style={{background:['var(--c1-soft)','var(--c4-soft)','var(--c5-soft)'][i]}}>
                  {t.name[0]}
                </div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-meta">{t.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q:"À partir de quel âge ?", a:"À partir de 4 ans, dès que l'enfant reconnaît les couleurs et les chiffres de 1 à 5. Aucune limite haute — la méthode marche aussi bien avec les adultes débutants." },
    { q:"Faut-il un vrai piano ?", a:"Non. La méthode fonctionne sur n'importe quel clavier : piano acoustique, piano numérique, clavier d'éveil, voire clavier d'application sur tablette. Il faut juste 8 touches blanches d'affilée." },
    { q:"Combien de temps pour la première chanson ?", a:"En général, 10 à 15 minutes : le temps de coller les étiquettes et de lire les couleurs. La majorité des enfants jouent leur première chanson le jour même." },
    { q:"Les étiquettes abîment-elles le piano ?", a:"Non — on les colle avec du scotch repositionnable (type Patafix ou scotch de masquage). Elles s'enlèvent sans laisser de trace. Tu peux aussi imprimer sur du papier autocollant repositionnable." },
    { q:"Combien de fois je peux imprimer ?", a:"Autant de fois que tu veux. Le PDF t'appartient, tu peux le réimprimer à chaque fois qu'une étiquette est perdue ou qu'une page est tachée par les feutres." },
    { q:"Et si mon enfant veut aller plus loin ?", a:"La méthode est une porte d'entrée. Une fois les 10 chansons maîtrisées, l'enfant peut basculer naturellement vers le solfège classique avec un prof — il aura déjà les bons réflexes de doigts et l'oreille musicale." },
  ];
  return (
    <section className="section" id="faq" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Questions fréquentes</span>
          <h2>Tout ce que tu te demandes</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="chev">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA({ ctaLabel, onCta }) {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitted(true);
    if (onCta) onCta();
  };
  return (
    <section className="section" id="telecharger">
      <div className="container">
        <div className="cta-block">
          <div className="cta-deco tl">
            {['#E86A5C','#F4A24A','#F0CB47','#7DB87B','#7B9CD4'].map((c,i) => <span key={i} style={{background:c}}/>)}
          </div>
          <div className="cta-deco br">
            {['#7B9CD4','#7DB87B','#F0CB47','#F4A24A','#E86A5C'].map((c,i) => <span key={i} style={{background:c}}/>)}
          </div>
          <span className="eyebrow" style={{color:'rgba(255,253,248,0.6)'}}>Téléchargement gratuit</span>
          <h2 style={{marginTop:12, color:'var(--paper)'}}>Reçois la méthode <em style={{color:'var(--accent)', fontStyle:'italic'}}>maintenant</em></h2>
          <p className="lead">Entre ton email, on t'envoie le PDF en moins de 2 minutes. Pas de spam, juste de la musique.</p>

          {submitted ? (
            <div style={{maxWidth:460, margin:'0 auto', padding:'20px 24px', background:'var(--c4-soft)', color:'var(--ink)', borderRadius:18, fontWeight:600}}>
              ✓ Merci ! Vérifie ta boîte mail dans 2 minutes.
            </div>
          ) : (
            <form className="email-form" onSubmit={submit}>
              <input
                type="email"
                placeholder="ton@email.fr"
                value={email}
                onChange={e => setEmail(e.target.value)}
                required
              />
              <button type="submit" className="btn btn-primary">{ctaLabel}</button>
            </form>
          )}

          <div style={{marginTop:24, display:'flex', justifyContent:'center', gap:24, flexWrap:'wrap', fontSize:13, color:'rgba(255,253,248,0.6)'}}>
            <span>✓ PDF prêt à imprimer</span>
            <span>✓ Aucune carte bancaire</span>
            <span>✓ Désinscription en 1 clic</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <SiteLogo size={0.9}/>
            <p style={{color:'var(--ink-soft)', fontSize:14, lineHeight:1.55, marginTop:16, maxWidth:'36ch'}}>
              La méthode de piano sans solfège pour les enfants de 4 à 8 ans.
              Imprime, colle, joue.
            </p>
          </div>
          <div>
            <h4>Méthode</h4>
            <ul>
              <li><a href="#methode">À qui ça s'adresse</a></li>
              <li><a href="#contenu">Ce que tu reçois</a></li>
              <li><a href="#apercu">Aperçu du PDF</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Suis-nous</h4>
            <ul>
              <li><a href="#">Instagram @partitionmagique</a></li>
              <li><a href="#">TikTok @partitionmagique</a></li>
              <li><a href="#">YouTube</a></li>
              <li><a href="#">contact@partitionmagique.fr</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2025 Partition Magique · Tous droits réservés</span>
          <span>Mentions légales · Confidentialité · CGU</span>
        </div>
      </div>
    </footer>
  );
}

// Make available globally
Object.assign(window, {
  SiteLogo, Nav, Hero, AudienceSection, ContentsSection, HowItWorks,
  GallerySection, Testimonials, FAQ, FinalCTA, Footer,
});
