// js/uikit.jsx — UI kit artboard (buttons, badges, cards, forms, typography)

function UIKitArtboard({ palette, typo, density }) {
  return (
    <ThemeFrame palette={palette} typo={typo} density={density} style={{ padding: 56 }}>
      <header style={{ marginBottom: 40, paddingBottom: 22,
                       borderBottom: '1px solid var(--eq-line)' }}>
        <Eyebrow>Kit UI · v.1</Eyebrow>
        <h1 style={{ margin: '12px 0 6px', fontFamily: 'var(--eq-font-display)',
                     fontSize: 48, fontWeight: 'var(--eq-display-weight)',
                     letterSpacing: 'var(--eq-display-tracking)',
                     textTransform: 'var(--eq-display-case)' }}>
          Composants & états.
        </h1>
        <p style={{ margin: 0, fontSize: 14, color: 'var(--eq-ink-soft)' }}>
          Boutons, badges, cartes, formulaires. Toutes les pièces partagent les mêmes tokens.
        </p>
      </header>

      <UIBlock title="Boutons">
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
          <Button variant="primary" size="lg" icon={<Arrow color="var(--eq-bg)" />}>Réserver un appel</Button>
          <Button variant="gold" size="lg" icon={<Arrow color="var(--eq-ink-on-gold)" />}>Programme 12 sem.</Button>
          <Button variant="ghost" size="lg">Découvrir</Button>
          <Button variant="link">Voir la méthode</Button>
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 16, alignItems: 'center' }}>
          <Button variant="primary" size="md">Moyen</Button>
          <Button variant="ghost" size="md">Moyen</Button>
          <Button variant="primary" size="sm">Petit</Button>
          <Button variant="ghost" size="sm">Petit</Button>
        </div>
      </UIBlock>

      <UIBlock title="Badges & pills">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <Badge tone="gold">Programme phare</Badge>
          <Badge tone="ink">Nouveau</Badge>
          <Badge tone="soft">Magnétiseur certifié</Badge>
          <Badge tone="soft">Coach PNL</Badge>
          <Pill>Alignement</Pill>
          <Pill>Équilibre</Pill>
          <Pill>Performance</Pill>
          <Pill>Patrimoine</Pill>
        </div>
      </UIBlock>

      <UIBlock title="Cartes d’offre">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          <ServiceCard kicker="12 semaines" title="Programme Equilys"
            price="À partir de 700 €" body="Le parcours phare réunissant les cinq disciplines."
            highlighted icon={<Enso size={44} color="var(--eq-gold)" accent="var(--eq-gold-soft)" strokeW={2} />} />
          <ServiceCard kicker="Séance" title="Magnétisme"
            price="60 €" duration="45–60 min"
            body="Libérer les tensions et la circulation énergétique." />
          <ServiceCard kicker="Bientôt" title="Wing Chun"
            price="—" body="Cours et stages d’initiation." comingSoon />
        </div>
      </UIBlock>

      <UIBlock title="Formulaires">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Field label="Prénom">
              <Input placeholder="Camille" defaultValue="Camille" />
            </Field>
            <Field label="Courriel">
              <Input type="email" placeholder="vous@exemple.com" />
            </Field>
            <Field label="Ce qui vous amène" hint="Un mot suffit pour démarrer.">
              <Textarea placeholder="Quelques lignes…" rows={3} />
            </Field>
            <Button variant="primary" size="md" icon={<Arrow color="var(--eq-bg)" />}>Envoyer</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Quote text="Le mélange du geste, du souffle et du mental change tout. Rien ne s’oublie, parce qu’on le pratique avec le corps."
                   author="Julien M." role="Cadre · Paris" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
                          padding: 22, background: 'var(--eq-surface)',
                          border: '1px solid var(--eq-line)', borderRadius: 2 }}>
              <Stat value="12" label="semaines" sub="Programme phare" />
              <Stat value="5" label="disciplines" sub="Méthode" />
              <Stat value="1" label="suivi" sub="Sur mesure" />
            </div>
          </div>
        </div>
      </UIBlock>

      <UIBlock title="Échelle typographique">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            ['Display XL · 96', 96],
            ['Display L · 64', 64],
            ['Display M · 44', 44],
            ['Title · 28', 28],
            ['Body · 16', 16],
            ['Caption · 12', 12],
          ].map(([label, sz]) => (
            <div key={label} style={{ display: 'flex', alignItems: 'baseline', gap: 24,
                                       borderBottom: '1px solid var(--eq-line-soft)', paddingBottom: 8 }}>
              <span style={{ width: 180, fontFamily: 'var(--eq-font-mono)', fontSize: 10.5,
                             letterSpacing: '0.18em', textTransform: 'uppercase',
                             color: 'var(--eq-ink-muted)' }}>{label}</span>
              <span style={{ fontFamily: sz > 24 ? 'var(--eq-font-display)' : 'var(--eq-font-body)',
                             fontSize: sz,
                             fontWeight: sz > 24 ? 'var(--eq-display-weight)' : 400,
                             letterSpacing: sz > 24 ? 'var(--eq-display-tracking)' : 'normal',
                             textTransform: sz > 24 ? 'var(--eq-display-case)' : 'none',
                             lineHeight: 1 }}>Équilibre</span>
            </div>
          ))}
        </div>
      </UIBlock>
    </ThemeFrame>
  );
}

function UIBlock({ title, children }) {
  return (
    <section style={{ marginBottom: 48 }}>
      <h2 style={{ margin: '0 0 18px', fontFamily: 'var(--eq-font-display)', fontSize: 22,
                   fontWeight: 'var(--eq-display-weight)',
                   letterSpacing: 'var(--eq-display-tracking)',
                   textTransform: 'var(--eq-display-case)' }}>{title}</h2>
      {children}
    </section>
  );
}

Object.assign(window, { UIKitArtboard });