// js/da.jsx — Direction artistique artboard
// Présente palette, typographie, motifs signature

function DAArtboard({ palette, typo, density }) {
  return (
    <ThemeFrame palette={palette} typo={typo} density={density}
                style={{ padding: 56 }}>
      {/* Title */}
      <div style={{ display: 'flex', alignItems: 'flex-start',
                    justifyContent: 'space-between', marginBottom: 48,
                    paddingBottom: 24, borderBottom: '1px solid var(--eq-line)' }}>
        <div>
          <Eyebrow>Direction artistique · v.1</Eyebrow>
          <h1 style={{ margin: '12px 0 8px', fontFamily: 'var(--eq-font-display)',
                       fontSize: 56, lineHeight: 1,
                       fontWeight: 'var(--eq-display-weight)',
                       letterSpacing: 'var(--eq-display-tracking)',
                       textTransform: 'var(--eq-display-case)' }}>
            L’esthétique <span style={{ fontStyle: 'italic', color: 'var(--eq-gold)' }}>Equilys</span>.
          </h1>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6,
                      color: 'var(--eq-ink-soft)', maxWidth: 560 }}>
            Une rencontre entre l’encre et le circuit, le rituel et la stratégie.
            Sobriété éditoriale, géométrie discrète, touche dorée parcimonieuse.
          </p>
        </div>
        <Enso size={120} color="var(--eq-ink)" accent="var(--eq-gold)" strokeW={2.4} />
      </div>

      {/* Palette */}
      <DABlock title="Palette" caption={`Variante : ${PALETTES[palette].label}`}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
          {[
            ['Bg', 'var(--eq-bg)', PALETTES[palette].bg],
            ['Surface', 'var(--eq-surface)', PALETTES[palette].surface],
            ['Surface alt', 'var(--eq-surface-alt)', PALETTES[palette].surfaceAlt],
            ['Ink', 'var(--eq-ink)', PALETTES[palette].ink],
            ['Or', 'var(--eq-gold)', PALETTES[palette].gold],
            ['Or soft', 'var(--eq-gold-soft)', PALETTES[palette].goldSoft],
          ].map(([label, cssVar, hex]) => (
            <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ aspectRatio: '1.2 / 1', borderRadius: 2,
                            background: cssVar, border: '1px solid var(--eq-line)' }} />
              <div>
                <div style={{ fontSize: 12.5, color: 'var(--eq-ink)' }}>{label}</div>
                <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                              color: 'var(--eq-ink-muted)', letterSpacing: '0.06em' }}>{hex}</div>
              </div>
            </div>
          ))}
        </div>
      </DABlock>

      {/* Typography */}
      <DABlock title="Typographie" caption={`Set : ${TYPESETS[typo].label}`}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
                      paddingTop: 8 }}>
          <div>
            <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                          letterSpacing: '0.22em', textTransform: 'uppercase',
                          color: 'var(--eq-ink-muted)', marginBottom: 14 }}>Display</div>
            <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 64, lineHeight: 1,
                          fontWeight: 'var(--eq-display-weight)',
                          letterSpacing: 'var(--eq-display-tracking)',
                          textTransform: 'var(--eq-display-case)' }}>
              Équilibre
            </div>
            <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 28,
                          fontStyle: 'italic', color: 'var(--eq-gold)', marginTop: 10 }}>
              Cultiver, incarner.
            </div>
            <div style={{ marginTop: 18, fontSize: 12, color: 'var(--eq-ink-muted)' }}>
              {TYPESETS[typo].display.split(',')[0].replace(/"/g, '')}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                          letterSpacing: '0.22em', textTransform: 'uppercase',
                          color: 'var(--eq-ink-muted)', marginBottom: 14 }}>Body & Mono</div>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: 'var(--eq-ink)' }}>
              Le coaching Equilys s’adresse autant à votre intuition qu’à
              votre stratégie. Le corps, le souffle, le mental et le patrimoine
              y travaillent dans la même direction.
            </p>
            <div style={{ marginTop: 24, padding: '10px 14px',
                          background: 'var(--eq-surface)', border: '1px solid var(--eq-line)',
                          fontFamily: 'var(--eq-font-mono)', fontSize: 11,
                          letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              ALIGNEMENT · ÉQUILIBRE · PERFORMANCE · PATRIMOINE
            </div>
            <div style={{ marginTop: 18, fontSize: 12, color: 'var(--eq-ink-muted)' }}>
              DM Sans · JetBrains Mono
            </div>
          </div>
        </div>
      </DABlock>

      {/* Motifs signature */}
      <DABlock title="Motifs signature" caption="3 marques visuelles uniques">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          <MotifCard title="Ensō énergétique" desc="Cercle calligraphique + axe vertical de points. Utilisé seul ou animé.">
            <Enso size={160} color="var(--eq-ink)" accent="var(--eq-gold)" strokeW={2.4} />
          </MotifCard>
          <MotifCard title="Circuit doré" desc="Lignes géométriques fines. Ancre le côté pragmatique / patrimoine.">
            <div style={{ color: 'var(--eq-gold)' }}>
              <CircuitOrnament width={180} height={180} color="var(--eq-gold)" opacity={0.9} />
            </div>
          </MotifCard>
          <MotifCard title="Nuages / souffle" desc="Volutes nuageuses inspirées de la carte de visite. Présentes en filigrane, jamais frontales.">
            <BrushSplash width={180} height={180} color="var(--eq-ink)" opacity={0.55} />
          </MotifCard>
        </div>
      </DABlock>

      {/* Ton + Mots */}
      <DABlock title="Ton & lexique" caption="50% spirituel · 50% pragmatique">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <ToneList title="On dit" tone="gold" items={[
            'Cultiver, incarner, ancrer',
            'Souffle, geste, posture, énergie',
            'Cadre, méthode, trajectoire',
            'Discipline du quotidien',
            'Aligner, choisir, décider',
          ]} />
          <ToneList title="On évite" tone="muted" items={[
            'Miracle, magique, instantané',
            'Vocabulaire ésotérique opaque',
            'Promesses de résultats',
            'Stress, anxiété, problème (au profit de « disponibilité », « clarté »)',
            'Buzzwords coaching corporate',
          ]} />
        </div>
      </DABlock>

      {/* Principes */}
      <DABlock title="Principes graphiques" caption="Six règles, tenir le cap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            ['01', 'Vide narratif', 'Le vide est un message. Marges généreuses, respiration entre blocs.'],
            ['02', 'Or, parcimonieux', 'Maximum 3 touches dorées par écran. L’or souligne, jamais ne crie.'],
            ['03', 'Italique = âme', 'L’italique réservé aux mots qui portent le sens (équilibre, maîtrise).'],
            ['04', 'Géométrie discrète', 'Aucun ombrage agressif. Filets de 0.6–1px, jamais plus de 2.'],
            ['05', 'Mono comme tag', 'JetBrains Mono UPPERCASE pour les piliers et les labels.'],
            ['06', 'Photographie épurée', 'Lumière naturelle, monochrome chaud, jamais de stock générique.'],
          ].map(([num, t, d]) => (
            <div key={num} style={{ display: 'flex', gap: 14 }}>
              <span style={{ fontFamily: 'var(--eq-font-display)', fontSize: 28,
                             color: 'var(--eq-gold)', lineHeight: 1, flex: '0 0 auto' }}>{num}</span>
              <div>
                <div style={{ fontSize: 14, color: 'var(--eq-ink)', marginBottom: 4 }}>{t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--eq-ink-soft)', lineHeight: 1.55 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </DABlock>

      {/* Animations */}
      <DABlock title="Animations recommandées" caption="Discrètes, jamais bruyantes">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            ['Ensō tracé', 'Apparition du hero — 1.8s', 'stroke-dasharray, ease-out'],
            ['Orbites rotatives', 'Cercles pointillés autour de l’ensō', '60 / 100s, infinite'],
            ['Fade-up sections', '12px ↑, 600ms à l’entrée du viewport', 'cubic-bezier(.2,.7,.3,1)'],
            ['Or pulse au hover', 'Bouton or — légère respiration', 'scale 1 → 1.02, 400ms'],
          ].map(([t, w, e]) => (
            <div key={t} style={{ padding: 18, background: 'var(--eq-surface)',
                                  border: '1px solid var(--eq-line)', borderRadius: 2,
                                  display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ fontFamily: 'var(--eq-font-display)', fontSize: 18 }}>{t}</div>
              <div style={{ fontSize: 12.5, color: 'var(--eq-ink-soft)' }}>{w}</div>
              <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                            color: 'var(--eq-ink-muted)', letterSpacing: '0.06em' }}>{e}</div>
            </div>
          ))}
        </div>
      </DABlock>
    </ThemeFrame>
  );
}

function DABlock({ title, caption, children }) {
  return (
    <section style={{ marginBottom: 56 }}>
      <header style={{ display: 'flex', alignItems: 'baseline', gap: 18,
                       marginBottom: 24, paddingBottom: 14,
                       borderBottom: '1px solid var(--eq-line-soft)' }}>
        <h2 style={{ margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 26,
                     fontWeight: 'var(--eq-display-weight)',
                     letterSpacing: 'var(--eq-display-tracking)',
                     textTransform: 'var(--eq-display-case)' }}>{title}</h2>
        <span style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                       letterSpacing: '0.22em', textTransform: 'uppercase',
                       color: 'var(--eq-ink-muted)' }}>{caption}</span>
      </header>
      {children}
    </section>
  );
}

function MotifCard({ title, desc, children }) {
  return (
    <div style={{ padding: 24, background: 'var(--eq-surface)',
                  border: '1px solid var(--eq-line)', borderRadius: 2 }}>
      <div style={{ height: 180, display: 'flex', alignItems: 'center',
                    justifyContent: 'center' }}>{children}</div>
      <div style={{ marginTop: 14, fontFamily: 'var(--eq-font-display)', fontSize: 18 }}>{title}</div>
      <div style={{ fontSize: 12.5, color: 'var(--eq-ink-soft)', lineHeight: 1.5, marginTop: 4 }}>{desc}</div>
    </div>
  );
}

function ToneList({ title, items, tone }) {
  const color = tone === 'gold' ? 'var(--eq-gold)' : 'var(--eq-ink-muted)';
  return (
    <div>
      <div style={{ fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                    letterSpacing: '0.22em', textTransform: 'uppercase',
                    color, marginBottom: 14 }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex',
                   flexDirection: 'column', gap: 10 }}>
        {items.map(i => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline',
                               fontSize: 14, color: 'var(--eq-ink)' }}>
            <span style={{ color, fontFamily: 'var(--eq-font-mono)' }}>
              {tone === 'gold' ? '+' : '−'}
            </span>
            {i}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { DAArtboard });