// Variation Finale — Hero plein-écran (vidéo/photo style A) + suite diptyque B

function DisciplineCard({ c, i }) {
  const [open, setOpen] = React.useState(false);
  return (
    <article style={{
      border: '1px solid rgba(244,239,230,0.18)',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 20,
      minHeight: 480, position: 'relative'
    }}>
      <div style={{ aspectRatio: '4/3', overflow: 'hidden', position: 'relative', background: '#1a1a1c' }}>
        <img src={c.img} alt={c.cat} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(15%) contrast(1.05)' }} />
        <span className="da-mono" style={{ position: 'absolute', top: 12, left: 12, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--da-paper)', background: 'rgba(10,10,12,0.55)', padding: '4px 8px' }}>{`0${i + 1}`}</span>
      </div>
      <h3 className="da-serif" style={{ fontSize: 32, fontWeight: 300, margin: 0, lineHeight: 1.05 }}>{c.cat}</h3>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 14, color: 'rgba(244,239,230,0.78)' }}>
        {(open ? c.items : c.items.slice(0, 6)).map((x) => <li key={x}>· {x}</li>)}
        {c.items.length > 6 && (
          <li
            onClick={() => setOpen(!open)}
            style={{ color: 'var(--da-accent)', cursor: 'pointer', marginTop: 4, userSelect: 'none' }}
          >
            {open ? '↑ Voir moins' : `+ ${c.items.length - 6} autres`}
          </li>
        )}
      </ul>
    </article>
  );
}

function VariationFinal({ density = 'comfortable' }) {
  return (
    <div className={`da-root da-density-${density}`} style={{ width: '100%' }}>

      {/* NAV — sur le hero */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px var(--da-pad)',
        position: 'absolute', top: 49, left: 0, right: 0, zIndex: 10
      }}>
        <DALogo size="md" />
        <nav style={{ display: 'flex', gap: 36, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          <span>Le studio</span>
          <a href="#programme" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Programme</a>
          <a href="#tarifs" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Tarifs</a>
          <a href="#lieu" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Lieu</a>
        </nav>
        <a href="#preinscription" className="da-btn da-btn-sm da-btn-accent" style={{ textDecoration: 'none' }}>Pré-inscription</a>
      </header>

      {/* HERO — full bleed vidéo/photo (style A) */}
      <section style={{ position: 'relative', height: 880, overflow: 'hidden' }}>
        <video
          src="assets/hero.mp4"
          autoPlay
          muted
          loop
          playsInline
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.25) 40%, rgba(10,10,12,0.9) 100%)'
        }} />
        <div style={{
          position: 'absolute', left: 'var(--da-pad)', right: 'var(--da-pad)', bottom: 88,
          display: 'grid', gridTemplateColumns: '1.4fr 0.9fr', gap: 'var(--da-gap)', alignItems: 'flex-end'
        }}>
          <div>
            <span className="da-eyebrow">Ouverture · Septembre 2026 · Toulouse</span>
            <h1 className="da-serif" style={{ fontSize: 'clamp(56px, 8vw, 132px)', lineHeight: 0.92, margin: '24px 0 0', fontWeight: 300 }}>
              L'Art,<br /><em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--da-accent)' }}>en mouvement</em>.
            </h1>
          </div>
          <div style={{ paddingBottom: 12 }}>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(244,239,230,0.78)', maxWidth: 380, fontWeight: 300 }}>
              École de danses latines, afro et urbaines. Devenez Membre Fondateur — et participez à la naissance d'une adresse encore secrète.
            </p>
            <a href="#preinscription" className="da-btn da-btn-accent" style={{ marginTop: 22, textDecoration: 'none' }}>Pré-inscrire · 60 €</a>
          </div>
        </div>
        <div style={{
          position: 'absolute', left: 'var(--da-pad)', bottom: 24,
          display: 'flex', gap: 24, fontFamily: 'var(--da-mono)', fontSize: 10,
          letterSpacing: '0.22em', color: 'rgba(244,239,230,0.5)', textTransform: 'uppercase'
        }}>
          <span>Impasse Didier Daurat</span><span>·</span>
          <span>31400 Toulouse</span><span>·</span>
          <span>28 disciplines</span>
        </div>
      </section>

      {/* BANDEAU OUVERTURE — fixe en haut de page */}
      <div style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1100, background: '#0a0a0c', borderBottom: '1px solid rgba(212,164,69,0.35)', padding: '11px 0', overflow: 'hidden' }}>
        <div className="da-marquee">
          <div className="da-marquee-track da-mono" style={{ fontSize: 11, letterSpacing: '0.28em', color: '#d4a445', textTransform: 'uppercase' }}>
            Ouverture&nbsp;·&nbsp;Septembre 2026&nbsp;·&nbsp;Toulouse&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ouverture&nbsp;·&nbsp;Septembre 2026&nbsp;·&nbsp;Toulouse&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ouverture&nbsp;·&nbsp;Septembre 2026&nbsp;·&nbsp;Toulouse&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ouverture&nbsp;·&nbsp;Septembre 2026&nbsp;·&nbsp;Toulouse&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </div>
      </div>

      {/* STATS BAND (issu du diptyque B) */}
      <section style={{ padding: 'calc(var(--da-pad) * 0.9) var(--da-pad)', borderBottom: '1px solid rgba(244,239,230,0.18)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr 1fr', gap: 24, alignItems: 'center' }}>
          <div>
            <span className="da-eyebrow-pale">— Une école arrive à Toulouse</span>
            <h2 className="da-serif" style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 300, margin: '12px 0 0', lineHeight: 1.05 }}>
              Dans'Art <em style={{ fontStyle: 'italic', color: 'var(--da-accent)' }}>Studio.</em>
            </h2>
          </div>
          <div>
            <div className="da-serif" style={{ fontSize: 56, fontWeight: 300, color: 'var(--da-accent)', lineHeight: 1 }}>28</div>
            <div className="da-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,239,230,0.55)', marginTop: 6 }}>Disciplines</div>
          </div>
          <div>
            <div className="da-serif" style={{ fontSize: 56, fontWeight: 300, color: 'var(--da-accent)', lineHeight: 1 }}>−10%</div>
            <div className="da-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,239,230,0.55)', marginTop: 6 }}>Cotisation</div>
          </div>
          <div>
            <div className="da-serif" style={{ fontSize: 56, fontWeight: 300, color: 'var(--da-accent)', lineHeight: 1 }}>100%</div>
            <div className="da-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,239,230,0.55)', marginTop: 6 }}>Remboursable</div>
          </div>
        </div>
      </section>

      {/* MARQUEE (B) */}
      <div style={{ borderBottom: '1px solid rgba(244,239,230,0.15)', padding: '22px 0' }}>
        <div className="da-marquee">
          <div className="da-marquee-track da-serif" style={{ fontSize: 36, fontWeight: 300, fontStyle: 'italic' }}>
            Bachata · Salsa cubaine · Kizomba · Afro contemporain · Heels · Reggaeton · Tango · Zouk brésilien · Lady style · Footwork · Samba · Bachata sensuelle · Musicalité · Salsa fusion · &nbsp;
            Bachata · Salsa cubaine · Kizomba · Afro contemporain · Heels · Reggaeton · Tango · Zouk brésilien · Lady style · Footwork · Samba · Bachata sensuelle · Musicalité · Salsa fusion · &nbsp;
          </div>
        </div>
      </div>

      {/* PROGRAMME — 3 cartes (B) */}
      <section id="programme" style={{ padding: 'calc(var(--da-pad) * 1.4) var(--da-pad)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 60, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <span className="da-eyebrow">— Programme</span>
            <h2 className="da-serif" style={{ fontSize: 'clamp(40px, 5vw, 76px)', lineHeight: 1, margin: '14px 0 0', fontWeight: 300 }}>
              Des cours pour <em style={{ fontStyle: 'italic' }}>tous les niveaux</em>.
            </h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 15, color: 'rgba(244,239,230,0.7)', lineHeight: 1.5 }}>Ici, on danse ensemble. Un espace bienveillant où tous les niveaux, tous les âges, toutes les passions se retrouvent .

          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {DA_DISCIPLINES.map((c, i) => <DisciplineCard key={c.cat} c={c} i={i} />)}
        </div>
      </section>

      {/* BIENTÔT — teaser planning & équipe */}
      <section style={{
        padding: 'calc(var(--da-pad) * 1.2) var(--da-pad)',
        borderTop: '1px solid rgba(244,239,230,0.15)',
        borderBottom: '1px solid rgba(244,239,230,0.15)'
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'calc(var(--da-pad) * 1)', alignItems: 'stretch' }}>
          {[
          {
            eyebrow: '— Prochainement',
            title: 'Le planning',
            body: "Cours du lundi au vendredi. Le planning détaillé sera dévoilé aux Membres Fondateurs en priorité, avant l'ouverture publique.",
            tag: 'Dévoilement · Juin 2026'
          },
          {
            eyebrow: '— Prochainement',
            title: "L'équipe pédagogique",
            body: "Une équipe de professeurs sélectionnés pour leur exigence technique et leur pédagogie. Présentations, parcours et univers de chacun à venir dans les prochaines semaines.",
            tag: 'Présentation · à suivre'
          }].
          map((b) =>
          <article key={b.title} style={{
            border: '1px solid rgba(244,239,230,0.18)',
            padding: 40,
            display: 'flex', flexDirection: 'column', gap: 18,
            position: 'relative', minHeight: 280
          }}>
              <span className="da-eyebrow-pale">{b.eyebrow}</span>
              <h3 className="da-serif" style={{ fontSize: 44, fontWeight: 300, margin: 0, lineHeight: 1.05, fontStyle: 'italic' }}>{b.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(244,239,230,0.72)', fontWeight: 300, margin: 0, maxWidth: 460 }}>
                {b.body}
              </p>
              <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px dashed rgba(244,239,230,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className="da-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--da-accent)' }}>{b.tag}</span>
                <span className="da-mono" style={{ fontSize: 22, color: 'rgba(244,239,230,0.4)', fontWeight: 300 }}>···</span>
              </div>
            </article>
          )}
        </div>
      </section>

      {/* LOCALISATION — adresse + plan SVG stylé */}
      <section id="lieu" style={{ padding: 'calc(var(--da-pad) * 1.4) var(--da-pad)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'calc(var(--da-pad) * 1)', alignItems: 'center' }}>
          <div>
            <span className="da-eyebrow">— Localisation</span>
            <h2 className="da-serif" style={{ fontSize: 'clamp(40px, 5vw, 76px)', lineHeight: 1, margin: '14px 0 28px', fontWeight: 300 }}>
              Une adresse,<br /><em style={{ fontStyle: 'italic' }}>encore secrète.</em>
            </h2>
            <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: 'rgba(244,239,230,0.75)', fontWeight: 300, marginBottom: 32 }}>
              Notre futur studio prend forme <strong style={{ fontWeight: 500, color: 'var(--da-paper)' }}>Impasse Didier Daurat</strong>, à Toulouse. Une parcelle au calme, à quelques minutes du centre, pensée pour la danse&nbsp;: hauteur sous plafond, parquet, lumière naturelle.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="da-mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--da-accent)', minWidth: 70 }}>Adresse</span>
                <span className="da-serif" style={{ fontSize: 18, fontWeight: 300 }}>Impasse Didier Daurat · Toulouse</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="da-mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--da-accent)', minWidth: 70 }}>Accès</span>
                <span style={{ fontSize: 14, color: 'rgba(244,239,230,0.7)', fontWeight: 300 }}>Grand parking sur place · Périphérique · Bus à proximité</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="da-mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--da-accent)', minWidth: 70 }}>Ouverture</span>
                <span style={{ fontSize: 14, color: 'rgba(244,239,230,0.7)', fontWeight: 300 }}>Septembre 2026</span>
              </div>
            </div>
            <a
              href="https://www.google.com/maps/search/?api=1&query=Impasse+Didier+Daurat+Toulouse"
              target="_blank"
              rel="noopener noreferrer"
              className="da-btn da-btn-ghost"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>

              Ouvrir dans Google Maps
              <span style={{ fontSize: 14 }}>→</span>
            </a>
          </div>

          <div style={{
            aspectRatio: '4/3',
            border: '1px solid rgba(244,239,230,0.18)',
            overflow: 'hidden'
          }}>
            <img src="assets/lieu-map.jpg" alt="Localisation Dans'Art Studio" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </section>

      {/* AVANTAGES BANDE ACCENT (B) */}
      <section style={{
        background: 'var(--da-accent)', color: 'var(--da-ink)',
        padding: 'calc(var(--da-pad) * 0.9) var(--da-pad)'
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 24, alignItems: 'baseline' }}>
          <div>
            <span className="da-mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>★ Membre Fondateur</span>
            <h3 className="da-serif" style={{ fontSize: 30, fontWeight: 400, margin: '10px 0 0', lineHeight: 1, fontStyle: 'italic' }}>Vos avantages</h3>
          </div>
          {[
          { t: '−10%', d: 'sur la cotisation annuelle' },
          { t: '+20€', d: "frais d'inscription offerts" },
          { t: '86€', d: "jusqu'à d'économie" }].
          map((b) =>
          <div key={b.t}>
              <div className="da-serif" style={{ fontSize: 64, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.03em' }}>{b.t}</div>
              <div style={{ marginTop: 6, fontSize: 13, opacity: 0.75 }}>{b.d}</div>
            </div>
          )}
        </div>
      </section>

      {/* TARIFS — diptyque image / table (B) */}
      <section id="tarifs" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr' }}>
        <div style={{ position: 'relative', minHeight: 700, borderRight: '1px solid rgba(244,239,230,0.15)' }}>
          <img src="assets/studio-reception.jpg" alt="Dans'Art Studio — réception" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(10,10,12,0.85) 100%)' }} />
          <div style={{ position: 'absolute', left: 32, bottom: 32 }}>
            <span className="da-eyebrow">— Tarifs 2026 / 2027</span>
            <h2 className="da-serif" style={{ fontSize: 56, fontWeight: 300, margin: '14px 0 0', lineHeight: 0.95 }}>
              Choisissez<br /><em style={{ fontStyle: 'italic' }}>votre rythme.</em>
            </h2>
          </div>
        </div>
        <div style={{ padding: 'calc(var(--da-pad) * 1.1)' }}>
          <span className="da-eyebrow-pale">Avantages Membre Fondateur</span>
          <h3 className="da-serif" style={{ fontSize: 36, fontWeight: 300, margin: '14px 0 32px' }}>5 forfaits, dont un illimité.</h3>
          <div>
            {DA_TARIFS.map((t) =>
            <div key={t.name} style={{
              display: 'grid', gridTemplateColumns: '2.2fr 1.1fr 1fr',
              padding: '22px 0',
              borderTop: '1px solid rgba(244,239,230,0.18)',
              alignItems: 'baseline', gap: 16,
              background: t.star ? 'rgba(212,164,69,0.08)' : 'transparent',
              marginLeft: t.star ? -24 : 0, marginRight: t.star ? -24 : 0,
              paddingLeft: t.star ? 24 : 0, paddingRight: t.star ? 24 : 0
            }}>
                <div>
                  <div className="da-serif" style={{ fontSize: 22, fontWeight: 300 }}>{t.name}</div>
                  <div className="da-mono" style={{ fontSize: 11, color: 'rgba(244,239,230,0.5)', marginTop: 4, letterSpacing: '0.1em' }}>
                    Tarif plein <s>{t.plein}</s> · économie {t.save}
                  </div>
                </div>
                <div className="da-serif" style={{ fontSize: 32, fontWeight: 400, color: t.star ? 'var(--da-accent)' : 'var(--da-paper)' }}>{t.f}</div>
                <div className="da-mono" style={{ fontSize: 11, color: 'rgba(244,239,230,0.6)', textAlign: 'right' }}>
                  Reste sur place<br /><span style={{ fontSize: 16, color: 'var(--da-paper)' }}>{t.reste}</span>
                </div>
              </div>
            )}
            <div style={{ borderTop: '1px solid rgba(244,239,230,0.18)' }} />
          </div>
          <p style={{ marginTop: 24, fontSize: 13, color: 'rgba(244,239,230,0.55)', lineHeight: 1.5 }}>
            ● Reste à payer = tarif Membre Fondateur − 60 € de pré-inscription déjà versés. Remboursable intégralement, sans justification, jusqu'à inscription définitive.
          </p>
        </div>
      </section>

      {/* FORMULAIRE — HelloAsso embed */}
      <section id="preinscription" className="da-light" style={{ padding: 'calc(var(--da-pad) * 1.4) var(--da-pad)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'calc(var(--da-pad) * 1.2)' }}>
          <div>
            <span className="da-eyebrow">— Pré-inscription</span>
            <h2 className="da-serif" style={{ fontSize: 'clamp(44px, 5vw, 80px)', fontWeight: 300, margin: '16px 0 28px', lineHeight: 1 }}>
              <em style={{ fontStyle: 'italic' }}>Rejoindre</em><br />les fondateurs.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(10,10,12,0.7)', maxWidth: 440 }}>
              60 € — déduits de votre première cotisation. 100 % remboursable jusqu'à inscription définitive.
            </p>
          </div>

          <div style={{ background: 'var(--da-paper)', border: '1px solid rgba(10,10,12,0.12)' }}>
            <iframe
              id="haWidget"
              allowTransparency="true"
              scrolling="auto"
              src="https://www.helloasso.com/associations/dans-art-social-club/adhesions/pre-inscriptions/widget"
              style={{ width: '100%', height: 750, border: 'none', display: 'block' }}
              title="Pré-inscription HelloAsso" />
            
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: 'var(--da-pad)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 'var(--da-gap)', alignItems: 'flex-start' }}>
          <DALogo size="lg" />
          <div>
            <span className="da-eyebrow-pale">Adresse</span>
            <p className="da-serif" style={{ fontSize: 18, fontWeight: 300, margin: '12px 0 0' }}>Impasse Didier Daurat<br />31400 Toulouse</p>
          </div>
          <div>
            <span className="da-eyebrow-pale">Contact</span>
            <p className="da-serif" style={{ fontSize: 18, fontWeight: 300, margin: '12px 0 0' }}>
              <a href="mailto:dansartstudio.toulouse@gmail.com" style={{ color: 'inherit', textDecoration: 'none', borderBottom: '1px solid rgba(244,239,230,0.3)' }}>dansartstudio.toulouse<br />@gmail.com</a>
            </p>
          </div>
          <div>
            <span className="da-eyebrow-pale">Suivez</span>
            <p className="da-serif" style={{ fontSize: 18, fontWeight: 300, margin: '12px 0 0' }}>
              <a href="https://instagram.com/dansart_studio_toulouse" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', borderBottom: '1px solid rgba(244,239,230,0.3)' }}>@dansart_studio_toulouse</a>
            </p>
          </div>
        </div>
        <div style={{ marginTop: 60, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--da-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,239,230,0.4)', borderTop: '1px solid rgba(244,239,230,0.15)', paddingTop: 24 }}>
          <span>© 2026 Dans'Art Studio</span>
          <span>Mentions légales · CGV · RGPD</span>
        </div>
      </footer>
    </div>);

}

window.VariationFinal = VariationFinal;