// Dans'Art Studio — Design System (élégant & urbain)
// Inspiré d'amandadanse.com : photographie intime, tons sombres,
// typographie éditoriale, élégance discrète, ambiance studio nocturne.

const DA = {
  // Default palette — overridden via CSS vars on .da-root
  ink: 'var(--da-ink, #0a0a0c)',
  paper: 'var(--da-paper, #f4efe6)',
  bone: 'var(--da-bone, #ddd6c7)',
  accent: 'var(--da-accent, #d4a445)', // doré chaud, plus discret que le flyer
  muted: 'var(--da-muted, rgba(255,255,255,0.55))',
  serif: 'var(--da-serif, "Fraunces", "Cormorant Garamond", serif)',
  sans: 'var(--da-sans, "Inter Tight", "Helvetica Neue", sans-serif)',
  mono: 'var(--da-mono, "JetBrains Mono", monospace)',
};

if (typeof document !== 'undefined' && !document.getElementById('da-styles')) {
  const s = document.createElement('style');
  s.id = 'da-styles';
  s.textContent = `
    .da-root {
      --da-ink: #0a0a0c;
      --da-paper: #f4efe6;
      --da-bone: #ddd6c7;
      --da-accent: #d4a445;
      --da-muted: rgba(255,255,255,0.55);
      --da-serif: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
      --da-sans: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
      --da-mono: "JetBrains Mono", monospace;
      background: var(--da-ink);
      color: var(--da-paper);
      font-family: var(--da-sans);
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "cv11";
    }

    .da-serif { font-family: var(--da-serif); font-weight: 300; letter-spacing: -0.02em; }
    .da-sans { font-family: var(--da-sans); }
    .da-mono { font-family: var(--da-mono); }

    .da-eyebrow {
      font-family: var(--da-mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--da-accent);
    }

    .da-eyebrow-pale {
      font-family: var(--da-mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(244,239,230,0.5);
    }

    .da-rule { height: 1px; background: rgba(244,239,230,0.18); border: 0; }
    .da-rule-bright { height: 1px; background: rgba(244,239,230,0.4); border: 0; }
    .da-rule-accent { height: 1px; background: var(--da-accent); border: 0; }

    /* Buttons */
    .da-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      border: 1px solid var(--da-paper);
      background: transparent;
      color: var(--da-paper);
      font-family: var(--da-sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .da-btn:hover { background: var(--da-paper); color: var(--da-ink); }
    .da-btn-accent {
      background: var(--da-accent);
      color: var(--da-ink);
      border-color: var(--da-accent);
    }
    .da-btn-accent:hover { background: transparent; color: var(--da-accent); }
    .da-btn-ink {
      background: var(--da-ink);
      color: var(--da-paper);
      border-color: var(--da-ink);
    }
    .da-btn-lg { padding: 20px 32px; font-size: 13px; }
    .da-btn-sm { padding: 11px 18px; font-size: 11px; }

    /* Image placeholder */
    .da-img {
      position: relative;
      background: linear-gradient(135deg, #1c1c20 0%, #2a2a30 50%, #18181c 100%);
      overflow: hidden;
      isolation: isolate;
    }
    .da-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 30%, rgba(212,164,69,0.08), transparent 50%),
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
    }
    .da-img-label {
      position: absolute;
      bottom: 14px;
      left: 14px;
      font-family: var(--da-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(244,239,230,0.5);
      padding: 4px 10px;
      border: 1px solid rgba(244,239,230,0.25);
      backdrop-filter: blur(4px);
    }
    .da-img-num {
      position: absolute;
      top: 14px;
      right: 14px;
      font-family: var(--da-mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      color: rgba(244,239,230,0.5);
    }

    /* Inputs */
    .da-field {
      width: 100%;
      box-sizing: border-box;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(244,239,230,0.25);
      padding: 16px 0 12px;
      color: var(--da-paper);
      font-family: var(--da-sans);
      font-size: 15px;
      letter-spacing: 0.01em;
      outline: none;
    }
    .da-field:focus { border-bottom-color: var(--da-accent); }
    .da-field::placeholder { color: rgba(244,239,230,0.45); font-weight: 300; }
    .da-label {
      font-family: var(--da-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(244,239,230,0.55);
      display: block;
      margin-bottom: 4px;
    }

    /* Tags / pills */
    .da-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border: 1px solid rgba(244,239,230,0.25);
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: 0.04em;
      color: rgba(244,239,230,0.85);
    }
    .da-tag-accent { border-color: var(--da-accent); color: var(--da-accent); }

    /* Marquee */
    .da-marquee {
      overflow: hidden;
      white-space: nowrap;
      mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .da-marquee-track {
      display: inline-block;
      animation: da-scroll 40s linear infinite;
      padding-right: 48px;
    }
    @keyframes da-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* Density */
    .da-density-cozy { --da-pad: 32px; --da-gap: 18px; }
    .da-density-comfortable { --da-pad: 56px; --da-gap: 28px; }
    .da-density-airy { --da-pad: 88px; --da-gap: 40px; }

    /* Logo */
    .da-logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--da-serif);
      font-weight: 300;
    }
    .da-logo-mark {
      width: 36px; height: 36px;
      border: 1px solid var(--da-paper);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: var(--da-serif);
      font-weight: 400;
      letter-spacing: -0.05em;
    }
    .da-logo-text {
      line-height: 1;
      font-size: 17px;
      letter-spacing: 0.02em;
    }
    .da-logo-text small {
      display: block;
      font-family: var(--da-mono);
      font-size: 9px;
      letter-spacing: 0.32em;
      margin-top: 5px;
      opacity: 0.6;
    }

    /* Light surface (for pricing card etc.) */
    .da-light {
      background: var(--da-paper);
      color: var(--da-ink);
    }
    .da-light .da-field {
      color: var(--da-ink);
      border-bottom-color: rgba(10,10,12,0.25);
    }
    .da-light .da-field::placeholder { color: rgba(10,10,12,0.4); }
    .da-light .da-label, .da-light .da-eyebrow-pale { color: rgba(10,10,12,0.55); }
    .da-light .da-rule { background: rgba(10,10,12,0.18); }

    /* Number column counter */
    .da-num {
      font-family: var(--da-serif);
      font-weight: 300;
      font-size: 80px;
      line-height: 0.9;
      color: var(--da-accent);
      letter-spacing: -0.04em;
    }

    /* ─── Responsive (tablet / mobile) ─── */
    @media (max-width: 900px) {
      .da-density-cozy,
      .da-density-comfortable,
      .da-density-airy {
        --da-pad: 22px;
        --da-gap: 16px;
      }

      /* Collapse all inline grid layouts to a single column */
      .da-root [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }

      /* Header: hide middle nav links, keep logo + CTA */
      .da-root > header {
        padding: 16px 22px !important;
      }
      .da-root > header > nav { display: none !important; }
      .da-root > header .da-btn-sm { padding: 9px 14px; font-size: 10px; }

      /* Hero: switch from fixed 880px to flexible */
      .da-root > section:first-of-type {
        height: auto !important;
        min-height: 92vh !important;
      }
      .da-root > section:first-of-type > div[style*="bottom: 88"] {
        bottom: 56px !important;
      }
      .da-root > section:first-of-type h1 {
        font-size: clamp(44px, 13vw, 72px) !important;
      }

      /* Stats band: stack with smaller numbers */
      .da-root [style*="font-size: 56px"][style*="color: var(--da-accent)"] {
        font-size: 40px !important;
      }

      /* Marquee: smaller text */
      .da-marquee-track { font-size: 24px !important; }

      /* Programme cards: looser min-height */
      .da-root article[style*="min-height: 480"] { min-height: auto !important; }
      .da-root article[style*="min-height: 280"] { min-height: auto !important; padding: 28px !important; }

      /* Localisation map: keep aspect ratio reasonable */

      /* Avantages bandeau: 2x2 grid instead of 1 col */
      .da-root [style*="background: var(--da-accent)"][style*="display: grid"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px 24px !important;
      }
      .da-root [style*="background: var(--da-accent)"] [style*="font-size: 64px"] {
        font-size: 44px !important;
      }

      /* Tarifs: image left col compact, table padding */
      .da-root [style*="min-height: 700"] { min-height: 320px !important; }
      .da-root [style*="margin-left: -24"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      /* Tarif rows: compress columns on mobile */
      .da-root [style*="grid-template-columns: 2.2fr"] {
        grid-template-columns: 1.4fr 1fr !important;
        gap: 8px !important;
      }
      .da-root [style*="grid-template-columns: 2.2fr"] > *:last-child {
        display: none !important;
      }

      /* HelloAsso iframe: extend height for mobile form layout */
      #haWidget { height: 1050px !important; }

      /* Footer: tighter */
      footer { padding: 36px 22px !important; }
    }

    @media (max-width: 480px) {
      .da-marquee-track { font-size: 20px !important; }
      .da-root > section:first-of-type { min-height: 86vh !important; }
    }
  `;
  document.head.appendChild(s);
}

// Logo lockup
function DALogo({ size = 'md', dark = false }) {
  const dims = { sm: 30, md: 36, lg: 56 }[size] || 36;
  const fs = { sm: 15, md: 17, lg: 24 }[size] || 17;
  const ssm = { sm: 8, md: 9, lg: 11 }[size] || 9;
  return (
    <span className="da-logo" style={dark ? { color: 'var(--da-ink)' } : {}}>
      <span className="da-logo-mark" style={{
        width: dims, height: dims, fontSize: dims * 0.4,
        borderColor: dark ? 'var(--da-ink)' : 'var(--da-paper)',
      }}>DA</span>
      <span className="da-logo-text" style={{ fontSize: fs }}>
        Dans'Art
        <small style={{ fontSize: ssm }}>STUDIO · TOULOUSE</small>
      </span>
    </span>
  );
}

// Image placeholder
function DAImg({ label = 'studio', n, height = 400, ratio, style = {}, ...rest }) {
  const finalStyle = ratio ? { aspectRatio: ratio, ...style } : { height, ...style };
  return (
    <div className="da-img" style={finalStyle} {...rest}>
      {n && <span className="da-img-num">{n}</span>}
      <span className="da-img-label">{label}</span>
    </div>
  );
}

// Discipline data shared across variations
const DA_DISCIPLINES = [
  { cat: 'Danses en couple', img: 'assets/discipline-latines.jpg', items: ['Bachata sensuelle', 'Bachazouk', 'Bachata dominicaine', 'Salsa On2', 'Salsa cubaine', 'Salsa fusion', 'Kizomba', 'Zouk brésilien', 'Tango'] },
  { cat: 'Danses solo', img: 'assets/discipline-afro.webp', items: ['Heels', 'Street Jazz', 'Commerciale', 'Afro', 'Afro contemporain', 'Samba', 'Reggaeton', 'Dancehall', 'Bachata Footwork', 'Bachata Musicality', 'Shines', 'Lady Style (Bachata, Tango, Salsa, Kizomba)'] },
  { cat: 'Perfectionnement', img: 'assets/discipline-perfectionnement.jpg', items: ['Technique du danseur', 'Danse Yoga'] },
];

const DA_TARIFS = [
  { name: '1 cours / semaine', plein: '350 €', f: '297 €', save: '53 €', reste: '237 €' },
  { name: '2 cours / semaine', plein: '470 €', f: '405 €', save: '65 €', reste: '345 €' },
  { name: '3 cours / semaine', plein: '560 €', f: '486 €', save: '74 €', reste: '426 €' },
  { name: '4 cours / semaine', plein: '635 €', f: '553,50 €', save: '81,50 €', reste: '493,50 €' },
  { name: 'Full Pass · illimité', plein: '680 €', f: '594 €', save: '86 €', reste: '534 €', star: true },
];

Object.assign(window, { DA, DALogo, DAImg, DA_DISCIPLINES, DA_TARIFS });