
// ─────────────────────────────────────────────────────────────────────────────
// script.js — Página Marina · Dobras 1, 2 e 3 combinadas
// ─────────────────────────────────────────────────────────────────────────────

const { useState, useEffect, useRef, useMemo } = React;

const HERO_VTURB_PLAYER_ID = "vid-6a15ab73cc7627fe0e7b0439";
const HERO_VTURB_SCRIPT_SRC = "https://scripts.converteai.net/33f73f45-0dba-4fc4-8d45-cc24cdc73ca2/players/6a15ab73cc7627fe0e7b0439/v4/player.js";


// Public build: edit/tweaks UI removed from visitor path.

// hero.jsx — Primeira dobra Página Marina
// Editorial Científico: revista de anatomia vocal + editorial de música


// ─────────────────────────────────────────────────────────────────────────────
// Spectrogram background pattern — conceptual, low opacity
// ─────────────────────────────────────────────────────────────────────────────
function SpectrogramBG({ opacity = 0.06 }) {
  // Pre-generated semi-random rows of "spectrogram" lines
  const rows = React.useMemo(() => {
    const out = [];
    const seed = 7;
    let s = seed;
    const rand = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    for (let y = 0; y < 38; y++) {
      const row = [];
      let x = 0;
      while (x < 100) {
        const w = 0.6 + rand() * 5.5;
        const gap = 0.4 + rand() * 2.2;
        if (rand() > 0.32) row.push({ x, w });
        x += w + gap;
      }
      out.push(row);
    }
    return out;
  }, []);

  return (
    <svg
      aria-hidden="true"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity }}
      preserveAspectRatio="none"
      viewBox="0 0 100 100">
      
      <defs>
        <linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#E8C547" />
          <stop offset="0.55" stopColor="#C964B9" />
          <stop offset="1" stopColor="#9B2D8E" />
        </linearGradient>
      </defs>
      {rows.map((row, i) =>
      row.map((seg, j) =>
      <rect
        key={`${i}-${j}`}
        x={seg.x}
        y={i * 2.6 + 0.5}
        width={seg.w}
        height={0.35}
        fill="url(#specGrad)"
        rx="0.18" />

      )
      )}
    </svg>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Mapa Anatômico card — stylized "vocal lobe" diagram
// ─────────────────────────────────────────────────────────────────────────────
function MapaAnatomicoCard({ style }) {
  return (
    <div className="card mapa-card" style={{ ...style, width: "150px", backgroundPosition: "center center" }}>
      <div className="card-label">
        <span className="dot" /> Mapa Anatômico
      </div>
      <div className="mapa-diagram">
        <svg viewBox="0 0 120 140" width="100%" height="100%" aria-hidden="true">
          {/* faint grid */}
          <g stroke="rgba(255,255,255,0.06)" strokeWidth="0.4">
            <line x1="60" y1="6" x2="60" y2="134" />
            <line x1="10" y1="70" x2="110" y2="70" />
          </g>
          {/* outer vocal lobe — egg shape */}
          <ellipse cx="60" cy="70" rx="32" ry="50" fill="none" stroke="#C964B9" strokeWidth="1.1" />
          {/* inner core */}
          <ellipse cx="60" cy="56" rx="8" ry="22" fill="none" stroke="#9B2D8E" strokeWidth="1.2" />
          {/* resonance ring at bottom (orbit) */}
          <ellipse cx="60" cy="118" rx="34" ry="6" fill="none" stroke="#E8C547" strokeWidth="0.9" strokeDasharray="2 2.5" />
          {/* tension markers */}
          <circle cx="60" cy="34" r="1.6" fill="#E8C547" />
          <circle cx="82" cy="78" r="1.6" fill="#C964B9" />
          <circle cx="38" cy="92" r="1.6" fill="#C964B9" />
          {/* tick coordinates */}
          <text x="62" y="10" fill="rgba(255,255,255,0.45)" fontSize="4" fontFamily="ui-monospace, monospace" letterSpacing="0.2">A1</text>
          <text x="98" y="70" fill="rgba(255,255,255,0.45)" fontSize="4" fontFamily="ui-monospace, monospace" letterSpacing="0.2">R3</text>
        </svg>
      </div>
      <p className="card-caption" style={{ width: "120px" }}>
        Pontos de tensão, ataque e ressonância lidos ao vivo.
      </p>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Sinal Acústico card — gradient spectrogram bars
// ─────────────────────────────────────────────────────────────────────────────
function SinalAcusticoCard({ style }) {
  const widths = [86, 64, 92, 48, 72, 38];
  return (
    <div className="card sinal-card" style={{ ...style, backgroundPosition: "center center", backgroundSize: "cover", padding: "14px 14px 12px", width: "150px" }}>
      <div className="card-label">
        <span className="dot dot-gold" /> Sinal Acústico
      </div>
      <div className="sinal-bars">
        {widths.map((w, i) =>
        <div key={i} className="sinal-bar" style={{ width: `${w}%` }} />
        )}
      </div>
      <div className="sinal-meta">
        <span>440 Hz</span>
        <span className="sinal-dot-row">
          <span /><span /><span className="active" />
        </span>
        <span>—42 dB</span>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Technical corner marks (editorial scientific frame)
// ─────────────────────────────────────────────────────────────────────────────
function CornerMark({ pos = 'tl', label }) {
  return (
    <div className={`corner corner-${pos}`}>
      <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
        <path d="M1 8 V1 H8" fill="none" stroke="currentColor" strokeWidth="1" />
      </svg>
      {label && <span className="corner-label">{label}</span>}
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Main Hero
// ─────────────────────────────────────────────────────────────────────────────
function Hero({ t, setTweak }) {
  React.useEffect(() => {
    if (document.querySelector(`script[src="${HERO_VTURB_SCRIPT_SRC}"]`)) return;

    const script = document.createElement("script");
    script.src = HERO_VTURB_SCRIPT_SRC;
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return (
    <section className={`hero hero-bg-${t.bg} hero-layout-${t.layout}`}>
      {t.bg === 'dark' && <SpectrogramBG opacity={t.specOpacity} />}

      {/* top nav strip */}
      <header className="topbar">
        <div className="brand">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <ellipse cx="12" cy="12" rx="5" ry="9" fill="none" stroke="currentColor" strokeWidth="1.4" />
              <ellipse cx="12" cy="16" rx="9" ry="2" fill="none" stroke="currentColor" strokeWidth="1.1" strokeDasharray="2 2" />
            </svg>
          </span>
          <span className="brand-name">Workshop <em>Manual da Voz</em></span>
        </div>
        <div className="topbar-meta">
          <span className="topbar-tag">Ao vivo</span>
          <span className="topbar-sep" />
          <span className="topbar-date">
            <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
              <rect x="4" y="5" width="16" height="15" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" />
              <path d="M8 3v4M16 3v4M4 10h16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
            </svg>
            08, 09 e 10 de Junho
          </span>
        </div>
      </header>

      <div className="hero-grid">
        {/* LEFT — text column */}
        <div className="col-text">
          <div className="overline">
            <span className="ov-num"></span>
            <span className="ov-line" aria-hidden="true" />
            <span className="hero-mobile-date">
              <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
                <rect x="4" y="5" width="16" height="15" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" />
                <path d="M8 3v4M16 3v4M4 10h16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
              </svg>
              8, 9 e 10 de Junho
            </span>
            <span className="ov-cat"></span>
          </div>

          <h1 className="h1">
            <span className="h1-highlight">Destrave os trechos</span>{" "}
            <span className="h1-muted">que mais te desafiam no seu repert&oacute;rio,</span>{" "}
            <span className="h1-highlight">mapeando sua voz</span>{" "}
            <span className="h1-muted">e construindo um</span>{" "}
            <span className="h1-highlight">plano de treino ao vivo.</span>
          </h1>

          <p className="h2">
            Com tecnologia acústica e o método que já transformou
            <span className="h2-num"> +12&nbsp;mil&nbsp;cantores </span>
            você traz a música que te trava, identifica a causa real da dificuldade e sai com direção clara de treino.
          </p>

          <div className="cta-row">
            <a href="#dobra10" className="cta">
              <span className="cta-text">Comprar ingresso</span>
              <span className="cta-arrow" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
            </a>
            <div className="price-stack">
              <div className="price-line">
                <span className="price-num">R$&nbsp;37,90</span>
                <span className="price-lote">8, 9 e 10 de Junho</span>
              </div>
              <div className="price-meta">
                <span className="dot dot-gold" /> Vagas limitadas
              </div>
            </div>
          </div>

          <LoteProgress className="hero-lote-progress" />

        </div>

        {/* RIGHT — image stage */}
        <div className="col-image">
          <div className={`stage stage-${t.imageTreatment}`}>
            {/* Technical readout strip — top */}
            <div className="stage-readout" style={{ opacity: "0" }}>
              <span>Take 01 · Live</span>
              <span className="stage-readout-bar" aria-hidden="true">
                <i style={{ width: '64%' }} />
              </span>
              <span>00:42</span>
            </div>

            {/* Video frame */}
            <div className="image-frame hero-video-frame">
              <vturb-smartplayer
                id={HERO_VTURB_PLAYER_ID}
                style={{ display: "block", margin: "0 auto", width: "100%" }}
              />
              <div className="image-overlay" />
              <div className="image-grid" aria-hidden="true">
                <div className="image-grid-line vertical" style={{ left: '32%' }} />
                <div className="image-grid-line vertical" style={{ left: '68%' }} />
                <div className="image-grid-line horizontal" style={{ top: '38%' }} />
              </div>
              {t.annotations &&
              <>
                  <Annotation top="20%" left="56%" label="A1 · Ataque" color="gold" />
                  <Annotation top="48%" left="14%" label="R3 · Ressonância" color="primary" />
                  <Annotation top="74%" left="40%" label="T2 · Tensão" color="lilac" />
                </>
              }
            </div>

            {/* Bottom caption strip */}
            <div className="stage-caption">
              <span className="stage-caption-num"></span>
              <span className="stage-caption-text"></span>
              <span className="stage-caption-coord"></span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Annotation({ top, left, label, color = 'primary' }) {
  return (
    <div className={`annot annot-${color}`} style={{ top, left }}>
      <span className="annot-dot" />
      <span className="annot-line" />
      <span className="annot-label">{label}</span>
    </div>);

}

function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
      <circle cx="7" cy="7" r="6.25" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.45" />
      <path d="M4 7.2 L6.2 9.4 L10 5.4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// ─────────────────────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────────────────────


// dobra2.jsx — Dobra 2: O que é Mapeamento Vocal?
// Inclui mockup editorial da Ficha de Automapeamento Vocal

const { useState: useState2, useEffect: useEffect2 } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Ficha de Automapeamento Vocal — document mockup
// ─────────────────────────────────────────────────────────────────────────────
function FichaMockup() {
  return (
    <div className="ficha-wrap">
      {/* Paperclip + edge tab */}
      <div className="ficha-clip" aria-hidden="true">
        <svg width="34" height="60" viewBox="0 0 34 60">
          <path
            d="M17 6 v36 a8 8 0 1 1 -16 0 V14"
            fill="none"
            stroke="#9B2D8E"
            strokeWidth="2.2"
            strokeLinecap="round" />
          
        </svg>
      </div>

      <article className="ficha">
        {/* Header */}
        <header className="ficha-head">
          <div className="ficha-head-left">
            <div className="ficha-eyebrow">
              <span className="ficha-dot" /> Documento · Mapeamento
            </div>
            <h3 className="ficha-title">
              Ficha de <em>Automapeamento</em> Vocal
            </h3>
          </div>
        </header>

        <div className="ficha-rule" />

        {/* Field 01 — Extensão real */}
        <section className="ficha-row">
          <div className="ficha-row-head">
            <span className="ficha-num">01</span>
            <span className="ficha-field-label">Extensão real</span>
            <span className="ficha-field-status filled">Preenchido</span>
          </div>
          <div className="ficha-scale">
            <div className="scale-track">
              {Array.from({ length: 25 }).map((_, i) =>
              <span key={i} className="scale-tick" data-major={i % 5 === 0 || undefined} />
              )}
            </div>
            <div className="scale-range" style={{ left: '16%', width: '64%' }}>
              <span className="scale-range-cap left">C3</span>
              <span className="scale-range-cap right">A5</span>
            </div>
            <div className="scale-comfort" style={{ left: '32%', width: '34%' }}>
              <span className="scale-comfort-cap">Tessitura confortável · E3 — F#4</span>
            </div>
          </div>
        </section>

        {/* Field 02 — Perfil vocal */}
        <section className="ficha-row">
          <div className="ficha-row-head">
            <span className="ficha-num">02</span>
            <span className="ficha-field-label">Perfil vocal · 1 de 7</span>
            <span className="ficha-field-status filled">Soprano lírico</span>
          </div>
          <div className="profile-row">
            {['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'].map((p, i) =>
            <div key={p} className={`profile-chip ${i === 2 ? 'active' : ''}`}>
                <span className="profile-chip-num">{p}</span>
                <span className="profile-chip-dot" />
              </div>
            )}
          </div>
        </section>

        {/* Field 03 — Pontos críticos */}
        <section className="ficha-row">
          <div className="ficha-row-head">
            <span className="ficha-num">03</span>
            <span className="ficha-field-label">Tensão · Ar · Passagem</span>
            <span className="ficha-field-status filled">3 marcas</span>
          </div>
          <div className="tract-diagram">
            <svg viewBox="0 0 220 80" width="100%" height="80" aria-hidden="true">
              {/* faint baseline */}
              <line x1="10" y1="58" x2="210" y2="58" stroke="rgba(27,15,26,0.12)" strokeWidth="0.6" strokeDasharray="3 3" />
              {/* vocal tract silhouette — abstract */}
              <path
                d="M22 60 Q 28 38 44 30 Q 64 22 84 28 Q 98 32 108 44 Q 116 54 128 50 Q 142 44 158 50 Q 178 56 196 46"
                fill="none"
                stroke="#1B0F1A"
                strokeWidth="1.2"
                strokeLinecap="round" />
              
              {/* tension mark */}
              <g>
                <circle cx="58" cy="27" r="4" fill="#9B2D8E" />
                <line x1="58" y1="27" x2="58" y2="10" stroke="#9B2D8E" strokeWidth="0.8" strokeDasharray="2 2" />
                <text x="50" y="8" fontSize="6" fill="#9B2D8E" fontFamily="ui-monospace, monospace" letterSpacing="0.4">T · tensão</text>
              </g>
              {/* air leak mark */}
              <g>
                <circle cx="108" cy="44" r="4" fill="#E8C547" />
                <line x1="108" y1="44" x2="108" y2="74" stroke="#E8C547" strokeWidth="0.8" strokeDasharray="2 2" />
                <text x="92" y="78" fontSize="6" fill="#8a6b00" fontFamily="ui-monospace, monospace" letterSpacing="0.4">A · escape de ar</text>
              </g>
              {/* passage break */}
              <g>
                <circle cx="158" cy="50" r="4" fill="#6B1D62" />
                <line x1="158" y1="50" x2="158" y2="10" stroke="#6B1D62" strokeWidth="0.8" strokeDasharray="2 2" />
                <text x="138" y="8" fontSize="6" fill="#6B1D62" fontFamily="ui-monospace, monospace" letterSpacing="0.4">P · passagem trava</text>
              </g>
            </svg>
          </div>
        </section>

        {/* Field 04 — Trecho-chave */}
        <section className="ficha-row">
          <div className="ficha-row-head">
            <span className="ficha-num">04</span>
            <span className="ficha-field-label">Trecho-chave da música</span>
            <span className="ficha-field-status muted">00:42 — 00:58</span>
          </div>
          <div className="wave-block">
            <svg className="wave-svg" viewBox="0 0 320 48" preserveAspectRatio="none" aria-hidden="true">
              {Array.from({ length: 64 }).map((_, i) => {
                const x = i * 5;
                const h = 6 + Math.abs(Math.sin(i * 0.55) * 14) + i % 3 * 3;
                const inWindow = i >= 22 && i <= 38;
                return (
                  <rect
                    key={i}
                    x={x}
                    y={24 - h / 2}
                    width={2.6}
                    height={h}
                    rx={1.2}
                    fill={inWindow ? '#9B2D8E' : 'rgba(27,15,26,0.22)'} />);


              })}
            </svg>
            <div className="wave-window" style={{ left: '34%', width: '24%' }}>
              <span className="wave-window-cap">refrão · "vou voar"</span>
            </div>
          </div>
        </section>

        {/* Field 05 — Próximo passo (handwritten) */}
        <section className="ficha-row ficha-row-note">
          <div className="ficha-row-head">
            <span className="ficha-num">05</span>
            <span className="ficha-field-label">Por onde começar</span>
            <span className="ficha-field-status accent">Recomendação</span>
          </div>
          <p className="ficha-note">
            Treinar a <u>passagem F#4 → G4</u> com apoio diafragmático antes do refrão. Reduzir vibrato no ataque.
          </p>
        </section>

        {/* Footer */}
        <footer className="ficha-foot">
          <div className="ficha-stamp">
            <div className="stamp-inner">
              <span className="stamp-line stamp-line-1">Manual</span>
              <span className="stamp-line stamp-line-2">DA VOZ</span>
              <span className="stamp-line stamp-line-3">· mapeado ao vivo ·</span>
            </div>
          </div>
          <div className="ficha-foot-meta">
            <div>
              <span className="ficha-meta-k">Data</span>
              <span className="ficha-meta-v">16 · 06 · 2025</span>
            </div>
            <div>
              <span className="ficha-meta-k">Duração</span>
              <span className="ficha-meta-v">12 min</span>
            </div>
          </div>
        </footer>
      </article>

      {/* External arrow annotations pointing into the ficha */}
      <div className="ficha-arrow arrow-mid">
        <span className="arrow-label">perfil entre 7</span>
        <svg width="80" height="36" viewBox="0 0 80 36" aria-hidden="true">
          <path d="M78 18 Q 50 18 30 14 L 14 10" fill="none" stroke="#9B2D8E" strokeWidth="1" strokeDasharray="3 3" />
          <path d="M14 10 l 7 -2 l -3 6 z" fill="#9B2D8E" />
        </svg>
      </div>
      <div className="ficha-arrow arrow-bot">
        <span className="arrow-label">direção de treino</span>
        <svg width="96" height="24" viewBox="0 0 96 24" aria-hidden="true">
          <path d="M2 12 C 30 12 48 12 78 12" fill="none" stroke="#9B2D8E" strokeWidth="1" strokeDasharray="3 3" />
          <path d="M78 12 l -7 -4 l 1 8 z" fill="#9B2D8E" />
        </svg>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Section text
// ─────────────────────────────────────────────────────────────────────────────
function Dobra2() {
  const bullets = [
  <>Sua <strong>extensão real</strong> e tessitura confortável</>,
  <>Seu <strong>perfil vocal</strong> entre 7 perfis</>,
  <>Onde aparece tensão, onde escapa ar, onde a passagem trava</>,
  <>O <strong>trecho da sua música</strong> que expõe o que precisa ser trabalhado</>,
  <>Por onde começar a treinar</>];


  return (
    <section className="dobra dobra-2">
      <header className="dobra-topbar" style={{ margin: "0px" }}>
        <div className="dobra-overline">
          <span className="d-ov-num"></span>
          <span className="d-ov-line" />
          <span className="d-ov-cat"></span>
        </div>
        <div className="dobra-corner-code"></div>
      </header>

      <div className="dobra-grid">
        <div className="dobra-col-text">
          <h2 className="dobra-h2">
            O que é <em>Mapeamento <span className="h2-mark">Vocal</span></em>?
          </h2>

          <p className="dobra-lede">
            É a solução que grandes cantores utilizam para fazer o público pensar:
            <span className="lede-quote">"parece tão fácil"</span>.
          </p>

          <p className="dobra-body">
            Com tecnologia acústica e orientação ao vivo, você preenche a
            <strong> Ficha de Automapeamento Vocal</strong> — o documento que revela:
          </p>

          <ul className="reveal-list">
            {bullets.map((b, i) =>
            <li key={i} className="reveal-item">
                <span className="reveal-arrow" aria-hidden="true">→</span>
                <span className="reveal-text">{b}</span>
              </li>
            )}
          </ul>

          <p className="dobra-close">
            Tudo a partir da <em>SUA música</em>, com a <em>SUA voz</em>.
          </p>

          <div className="dobra-cta-row">
            <a href="#dobra10" className="cta cta-light">
              <span className="cta-text">Quero mapear minha voz</span>
              <span className="cta-arrow" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
            </a>
            <span className="cta-aside">
              <span className="dot dot-gold" />
              <span></span>
            </span>
          </div>
        </div>

        <div className="dobra-col-visual">
          <FichaMockup />
        </div>
      </div>
    </section>);

}

window.Dobra2 = Dobra2;
window.FichaMockup = FichaMockup;



// dobra3.jsx — Dobra 3: O problema não é falta de esforço, é falta de leitura
// Diagnóstico diferencial — prontuário de hipóteses

// ─────────────────────────────────────────────────────────────────────────────
// Subtle spectrogram BG (reused concept from hero, lighter)
// ─────────────────────────────────────────────────────────────────────────────
function D3BG({ opacity = 0.05 }) {
  const rows = React.useMemo(() => {
    const out = [];
    let s = 11;
    const rand = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    for (let y = 0; y < 38; y++) {
      const row = [];
      let x = 0;
      while (x < 100) {
        const w = 0.6 + rand() * 5.2;
        const gap = 0.4 + rand() * 2.4;
        if (rand() > 0.35) row.push({ x, w });
        x += w + gap;
      }
      out.push(row);
    }
    return out;
  }, []);

  return (
    <svg
      aria-hidden="true"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity }}
      preserveAspectRatio="none"
      viewBox="0 0 100 100"
    >
      <defs>
        <linearGradient id="d3spec" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#E8C547" />
          <stop offset="0.55" stopColor="#C964B9" />
          <stop offset="1" stopColor="#9B2D8E" />
        </linearGradient>
      </defs>
      {rows.map((row, i) =>
        row.map((seg, j) => (
          <rect
            key={`${i}-${j}`}
            x={seg.x}
            y={i * 2.6 + 0.5}
            width={seg.w}
            height={0.32}
            fill="url(#d3spec)"
            rx="0.18"
          />
        ))
      )}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Diagnostic card — symptom + differential hypotheses
// ─────────────────────────────────────────────────────────────────────────────
function DiagnosticCard({ index, complaint, symptom, hypotheses }) {
  return (
    <article className="diag-card">
      <div className="diag-symptom">
        <span className="diag-quote-mark" aria-hidden="true">"</span>
        <h3 className="diag-symptom-text">{symptom}</h3>
      </div>

      <div className="diag-divider">
        <span className="diag-divider-cap">pode ser</span>
      </div>

      <ul className="diag-hyp-list">
        {hypotheses.map((h, i) => (
          <li key={i} className="diag-hyp">
            <span className="diag-hyp-text">{h}</span>
            <span className="diag-hyp-marker" aria-hidden="true">?</span>
          </li>
        ))}
      </ul>

      <footer className="diag-card-foot">
        <span className="diag-foot-k">Conclusão sem leitura</span>
        <span className="diag-foot-v">indeterminado</span>
      </footer>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Main
// ─────────────────────────────────────────────────────────────────────────────
function Dobra3() {
  const cards = [
    {
      symptom: 'Meu agudo trava',
      hypotheses: [
        'Passagem mal trabalhada',
        'Tensão na musculatura extrínseca',
        'Excesso de força no ataque',
      ],
    },
    {
      symptom: 'Meu ar acaba',
      hypotheses: [
        'Controle respiratório frágil',
        'Frase musical mal planejada',
        'Emissão desperdiçando ar',
      ],
    },
    {
      symptom: 'Eu desafino',
      hypotheses: [
        'Escuta interna pouco desenvolvida',
        'Memória melódica instável',
        'Desafine só dentro da música',
      ],
    },
  ];

  return (
    <section className="dobra3">
      <D3BG opacity={0.05} />

      {/* Top bar */}
      <header className="d3-topbar">
        <div className="d3-overline">
          <span className="d3-ov-num">03</span>
          <span className="d3-ov-line" />
          <span className="d3-ov-cat">Diagnóstico · Por que treino não basta</span>
        </div>
      </header>

      {/* Intro */}
      <div className="d3-intro">
        <h2 className="d3-h2">
          O problema não é <span className="d3-strike">falta de esforço</span>.
          <br />
          É <em className="d3-em">falta de mapeamento</em>.
        </h2>

        <div className="d3-intro-body">
          <p className="d3-lede">
            Te ensinaram a buscar o <strong>exercício certo</strong> antes de descobrir o <strong>problema certo</strong>.
          </p>

          <p className="d3-body">
            Quando o agudo trava, professores mandam treinar agudo.
            Quando o ar acaba, dizem que é apoio. Quando a voz aperta,
            surge outra dica genérica.
          </p>

          <p className="d3-bridge">
            <span className="d3-bridge-arrow" aria-hidden="true">↳</span>
            Mas a <em>mesma dificuldade</em> pode esconder
            necessidades completamente diferentes.
          </p>
        </div>
      </div>

      {/* Diagnostic differential grid */}
      <div className="d3-grid-wrap">
        <div className="d3-grid">
          {cards.map((c, i) => (
            <DiagnosticCard
              key={i}
              index={String.fromCharCode(65 + i)}
              complaint={c.symptom}
              symptom={c.symptom}
              hypotheses={c.hypotheses}
            />
          ))}
        </div>

        <div className="d3-grid-footer">
          <p className="d3-grid-footer-text">
            O mesmo <strong>sintoma</strong> esconde <strong>causas diferentes</strong>.
            Sem saber a causa, qualquer exercício parece servir…
            <span className="d3-but"> mas nenhum resolve.</span>
          </p>
        </div>
      </div>

      {/* Punchline */}
      <div className="d3-punch">
        <div className="d3-punch-mark" aria-hidden="true">
          <svg width="64" height="64" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="28" fill="none" stroke="currentColor" strokeWidth="1.2" strokeDasharray="3 3" />
            <text x="32" y="38" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" letterSpacing="0.18em" fill="currentColor">REPROVADO</text>
          </svg>
        </div>
        <p className="d3-punch-text">
          <span className="d3-punch-strike">Treino genérico</span>
          {' '}não resolve uma voz que{' '}
          <em className="d3-punch-em">nunca foi mapeada</em>.
        </p>
      </div>
    </section>
  );
}

window.Dobra3 = Dobra3;
window.D3BG = D3BG;





// dobra5.jsx — Dobra 5: Ciclo da Frustração
// Circular diagnostic diagram, editorial

// ─────────────────────────────────────────────────────────────────────────────
// Node icons — minimal outline, 1.5px stroke
// ─────────────────────────────────────────────────────────────────────────────
const NodeIcon = {
  copia:
  <svg viewBox="0 0 32 32" width="28" height="28">
      <rect x="6" y="5" width="20" height="22" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <line x1="10" y1="11" x2="22" y2="11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="10" y1="15" x2="22" y2="15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="10" y1="19" x2="18" y2="19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="20.5" cy="22.5" r="1.6" fill="currentColor" />
      <line x1="22.1" y1="22.5" x2="22.1" y2="17.5" stroke="currentColor" strokeWidth="1.2" />
    </svg>,

  tenta:
  <svg viewBox="0 0 32 32" width="28" height="28">
      <rect x="13" y="6" width="6" height="13" rx="3" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <path d="M9 16 a7 7 0 0 0 14 0" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="16" y1="23" x2="16" y2="27" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>,

  duvida:
  <svg viewBox="0 0 32 32" width="28" height="28">
      <circle cx="16" cy="16" r="11" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12.5 12.5 a3.5 3.5 0 1 1 5.2 3 c-1.2.7-1.7 1.4-1.7 2.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="16" cy="22" r="1.1" fill="currentColor" />
    </svg>,

  frustra:
  <svg viewBox="0 0 32 32" width="28" height="28">
      <path d="M5 22 L10 14 L13 19 L17 11 L20 17 L24 10 L27 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="27" cy="9" r="1.4" fill="currentColor" opacity="0.7" />
      <circle cx="6" cy="23" r="1.2" fill="currentColor" opacity="0.5" />
    </svg>,

  busca:
  <svg viewBox="0 0 32 32" width="28" height="28">
      <circle cx="14" cy="14" r="7.5" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <line x1="20" y1="20" x2="26" y2="26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="11" y1="14" x2="17" y2="14" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
    </svg>

};

// ─────────────────────────────────────────────────────────────────────────────
// CycleDiagram — circular 5-node editorial diagram
// ─────────────────────────────────────────────────────────────────────────────
function CycleDiagram() {
  // Pentagon vertices starting at top, clockwise
  // Coordinates in a 600×600 viewBox, center (300,300), radius 220
  const nodes = [
  { key: 'copia', num: '01', label: 'Copia', hint: 'a música, com tudo da versão original', x: 300, y: 80, icon: 'copia', color: 'magenta' },
  { key: 'tenta', num: '02', label: 'Tenta', hint: 'cantar como ouviu, no automático', x: 510, y: 235, icon: 'tenta', color: 'magenta' },
  { key: 'naoEnt', num: '03', label: 'Não entende', hint: 'por que um trecho não sai', x: 430, y: 480, icon: 'duvida', color: 'magenta' },
  { key: 'frustra', num: '04', label: 'Se frustra', hint: 'se culpa, perde confiança', x: 170, y: 480, icon: 'frustra', color: 'coral' },
  { key: 'busca', num: '05', label: 'Procura dica', hint: 'busca a próxima dica genérica', x: 90, y: 235, icon: 'busca', color: 'magenta' }];


  // Connector arcs — curves between consecutive nodes
  // Each path goes from outer edge of node i to outer edge of node i+1
  const arcs = [
  { d: 'M 358 102 Q 480 110 510 198', color: 'var(--primary)' },
  { d: 'M 528 280 Q 520 410 470 462', color: 'var(--primary)' },
  { d: 'M 380 506 Q 300 540 220 506', color: 'var(--primary)' },
  { d: 'M 130 462 Q 80 410 72 280', color: 'var(--accent)' }, // coral/accent — return loop
  { d: 'M 90 198 Q 120 110 242 102', color: 'var(--primary)' }];


  return (
    <div className="cycle-stage">
      <div className="cycle-grid" aria-hidden="true" />

      <svg viewBox="0 0 600 600" className="cycle-svg" aria-hidden="true">
        <defs>
          <marker id="arrowhead-m" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L6,4 L0,8 z" fill="var(--primary)" />
          </marker>
          <marker id="arrowhead-a" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L6,4 L0,8 z" fill="var(--accent)" />
          </marker>
          <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0" stopColor="rgba(155,45,142,0.12)" />
            <stop offset="1" stopColor="rgba(155,45,142,0)" />
          </radialGradient>
        </defs>

        {/* center glow */}
        <circle cx="300" cy="300" r="150" fill="url(#centerGlow)" />

        {/* inner orbit reference circle */}
        <circle cx="300" cy="300" r="110" fill="none" stroke="rgba(27,15,26,0.08)" strokeWidth="0.8" strokeDasharray="3 4" />

        {/* outer orbit reference circle */}
        <circle cx="300" cy="300" r="218" fill="none" stroke="rgba(27,15,26,0.06)" strokeWidth="0.6" />

        {/* connecting arcs */}
        {arcs.map((a, i) =>
        <path
          key={i}
          d={a.d}
          fill="none"
          stroke={a.color}
          strokeWidth="1.4"
          strokeDasharray="4 4"
          strokeLinecap="round"
          markerEnd={`url(#${a.color.includes('accent') ? 'arrowhead-a' : 'arrowhead-m'})`}
          opacity={a.color.includes('accent') ? 0.8 : 0.7} />

        )}

        {/* center label */}
        <text x="300" y="282" textAnchor="middle" className="cycle-center-1">Ciclo</text>
        <text x="300" y="324" textAnchor="middle" className="cycle-center-2">da</text>
        <text x="300" y="362" textAnchor="middle" className="cycle-center-3">Frustração</text>
      </svg>

      {/* Node cards positioned absolutely over the svg */}
      {nodes.map((n) =>
      <div
        key={n.key}
        className={`cycle-node node-${n.color}`}
        style={{
          left: `${n.x / 600 * 100}%`,
          top: `${n.y / 600 * 100}%`
        }}>
        
          <div className="node-head">
            <span className="node-num">{n.num}</span>
            <span className="node-icon">{NodeIcon[n.icon]}</span>
          </div>
          <div className="node-body">
            <h4 className="node-label">{n.label}</h4>
            <p className="node-hint">{n.hint}</p>
          </div>
        </div>
      )}
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Main
// ─────────────────────────────────────────────────────────────────────────────
function Dobra5() {
  return (
    <section className="dobra5">
      {/* Top bar */}
      <header className="d5-topbar" style={{ margin: "0px 0px 18px", padding: "0px" }}>
        <div className="d5-overline">
          <span className="d5-ov-num"></span>
          <span className="d5-ov-line" style={{ opacity: "0" }} />
          <span className="d5-ov-cat"></span>
        </div>
        <div className="d5-code"></div>
      </header>

      {/* Intro */}
      <div className="d5-intro" style={{ margin: "0px 0px 28px" }}>
        <h2 className="d5-h2">
          O que a sua voz está
          <span className="d5-em"> revelando </span>
          dentro da música que
          <em> você quer cantar</em>?
        </h2>

        <p className="d5-lede">
          <span className="d5-lede-mark" aria-hidden="true">↳</span>
          Sem essa pergunta, o cantor entra num
          <strong> ciclo silencioso</strong>:
        </p>
      </div>

      {/* Diagram */}
      <div className="d5-diagram-wrap" style={{ width: "624px", height: "620px" }}>
        <CycleDiagram />
      </div>

      {/* Punchline */}
      <div className="d5-punch" style={{ margin: "0px" }}>
        <div className="d5-punch-eyebrow">
          <span className="d5-punch-dot" />
          E o mais perverso
        </div>

        <p className="d5-punch-text">
          Depois de repetir esse ciclo
          <span className="d5-punch-times"> ×&nbsp;n </span>
          vezes, ele começa a achar que o problema é
          <span className="d5-punch-strike">
            a própria voz
            <span className="d5-punch-anno" aria-hidden="true">← falso</span>
          </span>
          .
        </p>

        <div className="d5-punch-foot">
          <span className="d5-punch-foot-k">Diagnóstico de superfície</span>
          <span className="d5-punch-foot-v">erro de leitura, não erro de voz</span>
        </div>
      </div>
    </section>);

}

window.Dobra5 = Dobra5;
window.CycleDiagram = CycleDiagram;



// dobra6.jsx — Dobra 6: O mapa da sua própria Voz · SEM MAPA / COM MAPA

const pairs = [
  {
    sem: 'No agudo, minha voz trava e não sei por quê.',
    com: 'Sei o que trava, onde trava e por quê.',
    tag: 'agudo · passagem',
  },
  {
    sem: 'Copia exercício genérico e nada muda.',
    com: 'Treino o exercício certo pro meu problema.',
    tag: 'treino · alvo',
  },
  {
    sem: 'Medo de machucar sem saber se está machucando.',
    com: 'Entendo os sinais da minha própria voz.',
    tag: 'segurança · escuta',
  },
  {
    sem: 'Treino todo dia e não evoluo.',
    com: 'Treino menos, com foco, e evoluo mais.',
    tag: 'tempo · eficiência',
  },
  {
    sem: '"Desafino", "não tenho agudo", "minha voz é fraca".',
    com: '"Preciso trabalhar passagem", "preciso treinar escuta", "preciso ajustar emissão".',
    tag: 'linguagem · precisão',
  },
];

// ─────────────────────────────────────────────────────────────────────────────
// Header icons
// ─────────────────────────────────────────────────────────────────────────────
const XIcon = (
  <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
    <circle cx="7" cy="7" r="6.25" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
    <path d="M4.5 4.5 L9.5 9.5 M9.5 4.5 L4.5 9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);

const CheckIcon6 = (
  <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
    <circle cx="7" cy="7" r="6.25" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
    <path d="M4 7.2 L6.2 9.4 L10 5.4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const ArrowRight = (
  <svg width="20" height="14" viewBox="0 0 20 14" aria-hidden="true">
    <path d="M2 7 H17 M12 2 L17 7 L12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// ─────────────────────────────────────────────────────────────────────────────
// Main
// ─────────────────────────────────────────────────────────────────────────────
function Dobra6() {
  return (
    <section className="dobra6">
      {/* Split background — dark left, light right */}
      <div className="d6-bg" aria-hidden="true">
        <div className="d6-bg-left" />
        <div className="d6-bg-right" />
        <div className="d6-bg-divider" />
      </div>

      {/* Topbar */}
      <header className="d6-topbar">
        <div className="d6-overline">
          <span className="d6-ov-num">06</span>
          <span className="d6-ov-line" />
          <span className="d6-ov-cat">O Mapa · Antes e depois</span>
        </div>
        <div className="d6-code">PM/06 · Δ · MAP</div>
      </header>

      {/* Intro — left sits on dark, right sits on light */}
      <div className="d6-intro">
        <div className="d6-intro-left">
          <h2 className="d6-h2">
            O mapa <span className="d6-h2-soft">da</span> sua
            <em className="d6-h2-em"> própria voz</em>.
          </h2>
          <p className="d6-lede">
            Lado a lado — o que se ouve <span className="d6-no">sem mapa</span>
            {' '}e o que se diz <span className="d6-yes">com mapa</span>.
          </p>
        </div>

        <div className="d6-intro-axis">
          <span className="d6-intro-axis-mark">Δ · Mapa</span>
        </div>

        <div className="d6-intro-right">
          <span className="d6-intro-right-eyebrow">Atlas vocal</span>
          <h3 className="d6-intro-right-title">
            A mesma cantora, <em>duas linguagens</em>.
          </h3>
          <span className="d6-intro-right-cap">5 transformações · diagnóstico → direção</span>
        </div>
      </div>

      {/* The grid */}
      <div className="d6-grid-wrap">
        <div className="d6-grid">
          {/* Column headers */}
          <div className="d6-col-head d6-col-head-no">
            <div className="col-head-icon">{XIcon}</div>
            <div className="col-head-text">
              <span className="col-head-tag">A · sem leitura</span>
              <span className="col-head-title">Sem mapa</span>
              <span className="col-head-cap">queixa vaga, generalizada</span>
            </div>
          </div>
          <div className="d6-axis-head">
            <span className="axis-num">Δ</span>
          </div>
          <div className="d6-col-head d6-col-head-yes">
            <div className="col-head-icon">{CheckIcon6}</div>
            <div className="col-head-text">
              <span className="col-head-tag">B · com leitura</span>
              <span className="col-head-title">Com mapa</span>
              <span className="col-head-cap">direção precisa, treinável</span>
            </div>
          </div>

          {/* 5 paired rows */}
          {pairs.map((p, i) => (
            <React.Fragment key={i}>
              <div className="d6-row d6-row-no">
                <div className="row-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="row-content">
                  <p className="row-text">
                    <span className="row-quote" aria-hidden="true">"</span>
                    {p.sem}
                  </p>
                </div>
              </div>

              <div className="d6-axis">
                <div className="axis-line" />
                <div className="axis-arrow">{ArrowRight}</div>
                <div className="axis-tag">{p.tag}</div>
                <div className="axis-line" />
              </div>

              <div className="d6-row d6-row-yes">
                <div className="row-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="row-content">
                  <p className="row-text">{p.com}</p>
                  <span className="row-mark" aria-hidden="true" />
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* Closing tag */}
        <div className="d6-foot">
          <div className="d6-foot-left">
            <span className="foot-k">Antes</span>
            <span className="foot-v">diagnóstico de superfície</span>
          </div>
          <div className="d6-foot-mid">
            <span className="foot-arrow">→</span>
          </div>
          <div className="d6-foot-right">
            <span className="foot-k">Depois</span>
            <span className="foot-v">direção de treino</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Dobra6 = Dobra6;




// dobra8.jsx — Dobra 8: Entregas concretas
// Editorial spreads: Ficha de Automapeamento + Atlas Vocal

// ─────────────────────────────────────────────────────────────────────────────
// Background — spectrogram (reused concept)
// ─────────────────────────────────────────────────────────────────────────────
function D8BG({ opacity = 0.04 }) {
  const rows = React.useMemo(() => {
    const out = [];
    let s = 17;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    for (let y = 0; y < 38; y++) {
      const row = [];
      let x = 0;
      while (x < 100) {
        const w = 0.6 + rand() * 5.2;
        const gap = 0.4 + rand() * 2.4;
        if (rand() > 0.36) row.push({ x, w });
        x += w + gap;
      }
      out.push(row);
    }
    return out;
  }, []);
  return (
    <svg aria-hidden="true"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity }}
      preserveAspectRatio="none" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="d8spec" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#E8C547" />
          <stop offset="0.55" stopColor="#C964B9" />
          <stop offset="1" stopColor="#9B2D8E" />
        </linearGradient>
      </defs>
      {rows.map((row, i) => row.map((seg, j) => (
        <rect key={`${i}-${j}`} x={seg.x} y={i * 2.6 + 0.5} width={seg.w} height={0.32} fill="url(#d8spec)" rx="0.18" />
      )))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// MiniFicha — compact mockup of the Ficha de Automapeamento
// ─────────────────────────────────────────────────────────────────────────────
function MiniFicha() {
  return (
    <div className="mini-ficha-wrap">
      <div className="mini-ficha-clip" aria-hidden="true">
        <svg width="28" height="50" viewBox="0 0 34 60">
          <path d="M17 6 v36 a8 8 0 1 1 -16 0 V14" fill="none" stroke="#9B2D8E" strokeWidth="2.2" strokeLinecap="round" />
        </svg>
      </div>

      <article className="mini-ficha">
        <header className="mini-ficha-head">
          <div className="mini-ficha-eyebrow">
            <span className="mini-dot" /> Documento · PM-0247
          </div>
          <h4 className="mini-ficha-title">
            Ficha de <em>Automapeamento</em>
          </h4>
        </header>

        <div className="mini-ficha-row">
          <span className="mini-num">01</span>
          <div className="mini-row-body">
            <span className="mini-label">Extensão real</span>
            <div className="mini-scale">
              <div className="mini-scale-track">
                {Array.from({ length: 18 }).map((_, i) => (
                  <span key={i} className="mini-tick" data-major={i % 4 === 0 || undefined} />
                ))}
              </div>
              <div className="mini-scale-range" style={{ left: '18%', width: '60%' }}>
                <span className="mini-range-cap left">C3</span>
                <span className="mini-range-cap right">A5</span>
              </div>
            </div>
          </div>
        </div>

        <div className="mini-ficha-row">
          <span className="mini-num">02</span>
          <div className="mini-row-body">
            <span className="mini-label">Perfil · 1 de 7</span>
            <div className="mini-profile-row">
              {['I','II','III','IV','V','VI','VII'].map((p, i) => (
                <span key={p} className={`mini-chip ${i === 2 ? 'on' : ''}`}>{p}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="mini-ficha-row">
          <span className="mini-num">03</span>
          <div className="mini-row-body">
            <span className="mini-label">Tensão · Ar · Passagem</span>
            <div className="mini-marks">
              <span className="mini-mark m1">T · tensão</span>
              <span className="mini-mark m2">A · escape</span>
              <span className="mini-mark m3">P · passagem</span>
            </div>
          </div>
        </div>

        <div className="mini-ficha-note">
          <span className="mini-note-eyebrow">Recomendação</span>
          <p className="mini-note-text">
            Trabalhar a <u>passagem F#4 → G4</u> com apoio antes do refrão.
          </p>
        </div>

        <footer className="mini-ficha-foot">
          <span className="mini-stamp">Marina · ao vivo</span>
          <span className="mini-foot-date">16 · 06 · 2025</span>
        </footer>
      </article>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// MiniAtlas — atlas index spread mockup
// ─────────────────────────────────────────────────────────────────────────────
function MiniAtlas() {
  const entries = [
    { n: '01', name: 'Escape de ar',             page: '08', range: '08–14' },
    { n: '02', name: 'Passagem instável',        page: '22', range: '22–30' },
    { n: '03', name: 'Apoio diafragmático',      page: '38', range: '38–47' },
    { n: '04', name: 'Ressonância anterior',     page: '54', range: '54–62' },
    { n: '05', name: 'Pressão subglótica',       page: '70', range: '70–78' },
    { n: '06', name: 'Vibrato controlado',       page: '86', range: '86–94' },
    { n: '07', name: 'Articulação consonantal',  page: '102', range: '102–110' },
  ];
  return (
    <div className="atlas-wrap">
      <div className="atlas-spine" aria-hidden="true">
        <span className="atlas-spine-text">ATLAS · VOCAL · 2025</span>
      </div>

      <article className="atlas-book">
        <header className="atlas-head">
          <div className="atlas-eyebrow">
            <span className="mini-dot" /> Catálogo · Ed. 2025
          </div>
          <h4 className="atlas-title">
            Atlas <em>Vocal</em>
          </h4>
          <div className="atlas-head-meta">
            <span>Vol. I</span>
            <span className="atlas-sep" />
            <span>+50 exercícios</span>
            <span className="atlas-sep" />
            <span>110 pp.</span>
          </div>
        </header>

        <div className="atlas-rule">
          <span className="atlas-rule-cap">Índice · por problema</span>
        </div>

        <ul className="atlas-index">
          {entries.map((e) => (
            <li key={e.n} className="atlas-entry">
              <span className="atlas-entry-num">{e.n}</span>
              <span className="atlas-entry-name">{e.name}</span>
              <span className="atlas-dots" aria-hidden="true" />
              <span className="atlas-entry-page">p. {e.page}</span>
              <span className="atlas-entry-range">{e.range}</span>
            </li>
          ))}
          <li className="atlas-entry atlas-entry-more">
            <span className="atlas-entry-num">…</span>
            <span className="atlas-entry-name">+ 43 outros sintomas</span>
            <span className="atlas-dots" aria-hidden="true" />
            <span className="atlas-entry-page">cont.</span>
            <span className="atlas-entry-range" />
          </li>
        </ul>

        {/* Right-edge tabs */}
        <div className="atlas-tabs" aria-hidden="true">
          <span className="atlas-tab tab-1">A</span>
          <span className="atlas-tab tab-2">B</span>
          <span className="atlas-tab tab-3 active">C</span>
          <span className="atlas-tab tab-4">D</span>
          <span className="atlas-tab tab-5">E</span>
        </div>

        <footer className="atlas-foot">
          <span className="atlas-foot-k">Indexação</span>
          <span className="atlas-foot-v">por sintoma · não por estilo</span>
        </footer>
      </article>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Delivery spread
// ─────────────────────────────────────────────────────────────────────────────
function DeliverySpread({ index, kind, title, titleEm, punchline, body, visual, alignment = 'visual-left' }) {
  return (
    <article className={`delivery delivery-${alignment}`}>
      <div className="delivery-visual">{visual}</div>

      <div className="delivery-text">
        <div className="delivery-overline">
          <span className="d-ov-num">Entrega {index}</span>
          <span className="d-ov-dot" />
          <span className="d-ov-cat">{kind}</span>
        </div>

        <h3 className="delivery-title">
          {title} <em>{titleEm}</em>
        </h3>

        <p className="delivery-punch">{punchline}</p>

        <p className="delivery-body">{body}</p>

      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Main
// ─────────────────────────────────────────────────────────────────────────────
function Dobra8() {
  return (
    <section className="dobra8">
      <D8BG />

      <header className="d8-topbar">
        <div className="d8-overline">
          <span className="d8-ov-line" />
          <span className="d8-ov-cat">Entregas · O que você leva</span>
        </div>
      </header>

      <div className="d8-intro">
        <h2 className="d8-h2">
          Experiência <em>concreta</em>, não aula
          {' '}<span className="d8-h2-soft">para assistir e</span>
          {' '}<span className="d8-h2-strike">esquecer</span>.
        </h2>
        <div className="d8-lede-row">
          <p className="d8-lede">
            Ao final das <span className="d8-num">3 noites</span>,
            sua dificuldade estará
            <em> observada</em>, <em>registrada</em> e
            <em> apontando uma direção</em>.
          </p>
          <div className="d8-cite">
            <span className="d8-cite-k">2 peças tangíveis</span>
            <span className="d8-cite-v">documento + catálogo</span>
          </div>
        </div>
      </div>

      <div className="d8-spreads">
        <DeliverySpread
          index="01"
          kind="Documento · ao vivo"
          title="Ficha de Automapeamento"
          titleEm="Vocal"
          punchline="Você para de achar e começa a saber."
          body="Cada comportamento da sua voz — onde tensa, onde escapa ar, onde quebra — registrado a partir da SUA música, com a SUA voz."
          visual={<MiniFicha />}
          alignment="visual-left"
        />

        <div className="d8-divider" aria-hidden="true">
          <span className="d8-divider-cap">+</span>
        </div>

        <DeliverySpread
          index="02"
          kind="Catálogo · acesso permanente"
          title="Atlas"
          titleEm="Vocal"
          punchline="+50 exercícios organizados por problema."
          body="Escape de ar? Página 08. Passagem instável? Página 22. Você nunca mais fica perdida sem saber o que treinar."
          visual={<MiniAtlas />}
          alignment="visual-right"
        />
      </div>
    </section>
  );
}

window.Dobra8 = Dobra8;




// ─────────────────────────────────────────────────────────────────────────────
// Mount — render each dobra into its root
// ─────────────────────────────────────────────────────────────────────────────

const daysV3 = [
  {
    num: '1',
    title: 'Localização',
    question: '“Onde estou?”',
    body: 'Antes de qualquer exercício, é preciso saber de onde sua voz está partindo. Você marca seu ponto de partida: gravação inicial, mapa de percepção, escuta da própria voz e os primeiros testes funcionais.',
    outcomes: [
      'onde sua voz começa',
      'em quais áreas você tem mais consciência',
      'em quais ainda está no escuro',
      'qual trecho da sua música revela mais sobre o seu canto',
    ],
  },
  {
    num: '2',
    title: 'Sinais do caminho',
    question: '“O que minha voz está me mostrando?”',
    body: 'No segundo dia, sua voz é lida. Testes de tempo máximo de expiração, relação S/Z, cromatismo, glissando, sustentação de nota, extensão e tessitura. Aqui entram as tecnologias que capturam o que o ouvido sozinho não enxerga.',
    outcomes: [
      'qual é a sua extensão real',
      'onde está sua tessitura confortável',
      'como sua fonte sonora se comporta',
      'onde aparece tensão, onde escapa ar e onde a passagem trava',
    ],
    offset: true,
  },
  {
    num: '3',
    title: 'Rota',
    question: '“Para onde devo ir agora?”',
    body: 'No terceiro dia, os dados viram direção. Seu perfil vocal é identificado entre os 7 perfis possíveis, seu trecho-problema vira plano de treino, e você recebe o que estudar, como estudar e por quanto tempo.',
    outcomes: [
      'qual é o seu foco principal',
      'qual exercício atende a sua necessidade',
      'qual rotina cabe na sua semana',
      'como medir se você melhorou',
    ],
  },
];

function D6V3TopoBg() {
  return (
    <div className="d6v3-topo-bg" aria-hidden="true">
      <svg viewBox="0 0 1200 900" fill="none" stroke="currentColor" strokeWidth="1.1">
        {Array.from({ length: 16 }).map((_, i) => {
          const y = 40 + i * 55;
          return <path key={i} d={`M 0 ${y} C 200 ${y - 20}, 380 ${y + 60}, 600 ${y + 20} S 980 ${y + 80}, 1200 ${y + 30}`} />;
        })}
      </svg>
    </div>
  );
}

function D6V3CompassRose() {
  return (
    <div className="d6v3-reveal d6v3-compass-rose" aria-hidden="true">
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="1">
        <circle cx="50" cy="50" r="42" />
        <circle cx="50" cy="50" r="34" opacity="0.4" />
        <circle cx="50" cy="50" r="2" fill="currentColor" stroke="none" />
        <path d="M50 8 L55 50 L50 92 L45 50 Z" />
        <path d="M8 50 L50 45 L92 50 L50 55 Z" />
        <path d="M50 8 L55 50 L50 50 Z" fill="currentColor" stroke="none" opacity="0.75" />
        <g opacity="0.5">
          <path d="M20 20 L50 47 L80 20 L50 50 Z" />
          <path d="M20 80 L50 53 L80 80 L50 50 Z" />
        </g>
      </svg>
    </div>
  );
}

function D6V3NodeIcon({ type }) {
  if (type === 'compass') {
    return (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="24" cy="24" r="18" />
        <circle cx="24" cy="24" r="14" opacity="0.35" />
        <path d="M24 9 v3 M24 36 v3 M9 24 h3 M36 24 h3" />
        <path d="M24 13 L29 24 L24 35 L19 24 Z" />
        <path d="M24 13 L29 24 L24 24 Z" fill="currentColor" stroke="none" />
        <circle cx="24" cy="24" r="1.5" fill="currentColor" stroke="none" />
      </svg>
    );
  }

  if (type === 'target') {
    return (
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="24" cy="24" r="17" />
        <circle cx="24" cy="24" r="11" />
        <circle cx="24" cy="24" r="5" />
        <circle cx="24" cy="24" r="1.6" fill="currentColor" stroke="none" />
        <path d="M24 4 v6 M24 38 v6 M4 24 h6 M38 24 h6" opacity="0.5" />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M24 44 C 14 32, 10 25, 10 19 a 14 14 0 0 1 28 0 c 0 6 -4 13 -14 25 Z" />
      <circle cx="24" cy="19" r="5" />
      <circle cx="24" cy="19" r="1.5" fill="currentColor" stroke="none" />
    </svg>
  );
}

function D6V3MapNode({ day, type, className }) {
  return (
    <div className={`d6v3-map-node ${className}`}>
      <div className="d6v3-map-node-pin">
        <D6V3NodeIcon type={type} />
      </div>
      <div className="d6v3-day-label">Dia {day}</div>
    </div>
  );
}

function D6V3MapPlate() {
  return (
    <div className="d6v3-reveal d6v3-map-plate">
      <svg viewBox="0 0 1000 180" preserveAspectRatio="none" aria-hidden="true">
        <g stroke="rgba(107,29,98,0.14)" fill="none" strokeWidth="1">
          <path d="M 0 30 C 200 20, 400 60, 600 40 S 900 80, 1000 50" />
          <path d="M 0 70 C 200 60, 400 100, 600 80 S 900 120, 1000 90" />
          <path d="M 0 110 C 200 100, 400 140, 600 120 S 900 160, 1000 130" />
        </g>
        <g transform="translate(940 28)" stroke="#6B1D62" fill="none" strokeWidth="1" opacity="0.5">
          <circle cx="0" cy="0" r="14" />
          <path d="M 0 -10 L 3 0 L 0 10 L -3 0 Z" fill="#6B1D62" stroke="none" />
          <text x="0" y="-18" textAnchor="middle" className="d6v3-map-north">N</text>
        </g>
        <path
          className="d6v3-path-in"
          d="M 90 130 C 230 130, 280 50, 420 70 C 560 90, 580 150, 720 130 C 820 116, 870 60, 920 50"
          stroke="#6B1D62"
          strokeWidth="2"
          strokeDasharray="5 8"
          fill="none"
          strokeLinecap="round"
        />
        <g fill="#6B1D62" opacity="0.18">
          <path d="M 250 110 l 8 -14 l 8 14 z" />
          <path d="M 580 100 l 10 -18 l 10 18 z" />
          <path d="M 760 90 l 7 -12 l 7 12 z" />
        </g>
      </svg>

      <D6V3MapNode day="1" type="pin" className="d6v3-node-1" />
      <D6V3MapNode day="2" type="compass" className="d6v3-node-2" />
      <D6V3MapNode day="3" type="target" className="d6v3-node-3" />
    </div>
  );
}

function D6V3DayCard({ day, index }) {
  return (
    <article className={`d6v3-reveal d6v3-day-card${day.offset ? ' d6v3-day-card-mid' : ''}`} style={{ transitionDelay: `${index * 140}ms` }}>
      <div className="d6v3-day-num-ghost">{day.num}</div>
      <div className="d6v3-day-label d6v3-day-label-top">Dia {day.num}</div>
      <h3 className="d6v3-day-title">{day.title}</h3>
      <div className="d6v3-question">{day.question}</div>
      <p className="d6v3-body">{day.body}</p>
      <div className="d6v3-outcome">
        <div className="d6v3-day-label">Você sai sabendo</div>
        <ul>
          {day.outcomes.map((item) => <li key={item}>{item}</li>)}
        </ul>
      </div>
    </article>
  );
}

function Dobra6V3() {
  React.useEffect(() => {
    const nodes = document.querySelectorAll('#root-dobra6 .d6v3-reveal');

    if (!('IntersectionObserver' in window)) {
      nodes.forEach((node) => node.classList.add('d6v3-in'));
      document.querySelectorAll('#root-dobra6 .d6v3-path-in').forEach((node) => node.classList.add('d6v3-in'));
      return undefined;
    }

    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add('d6v3-in');

        if (entry.target.classList.contains('d6v3-map-plate')) {
          const path = entry.target.querySelector('.d6v3-path-in');
          if (path) path.classList.add('d6v3-in');
        }

        io.unobserve(entry.target);
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });

    nodes.forEach((node) => io.observe(node));
    return () => io.disconnect();
  }, []);

  return (
    <section className="dobra6v3" aria-label="Os 3 dias do Mapeamento Vocal">
      <D6V3TopoBg />

      <div className="d6v3-inner">
        <div className="d6v3-header">
          <div>
            <div className="d6v3-reveal d6v3-eyebrow d6v3-accent d6v3-header-eyebrow">A jornada · 3 dias</div>
            <h2 className="d6v3-reveal d6v3-title">
              Em 3 dias, sua voz <em>para de ser um mistério</em>.
            </h2>
            <p className="d6v3-reveal d6v3-sub">
              A jornada do mapeamento segue a lógica de <em>um mapa de verdade</em>: você descobre <strong>onde está</strong>, lê os <strong>sinais do caminho</strong> e <strong>traça a rota</strong>.
            </p>
          </div>
          <D6V3CompassRose />
        </div>

        <D6V3MapPlate />

        <div className="d6v3-days-grid">
          {daysV3.map((day, index) => <D6V3DayCard key={day.num} day={day} index={index} />)}
        </div>

        <div className="d6v3-reveal d6v3-closing">
          <div className="d6v3-rule" />
          <p className="d6v3-closing-text">
            Você não sai com mais informação solta.<br />
            Sai com um <span>manual da sua própria voz</span>.
          </p>
          <div className="d6v3-rule" />
        </div>
      </div>
    </section>
  );
}

window.Dobra6V3 = Dobra6V3;

const CardIcons9 = {
  belting: (
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
      <path d="M5 12 Q 9 6 13 12 Q 9 18 5 12 Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M14 8 Q 17 10 17 12 Q 17 14 14 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
      <path d="M16 5.5 Q 21 8.5 21 12 Q 21 15.5 16 18.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.65" />
    </svg>
  ),
  years: (
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12 6 v6 l4 2.4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="12" cy="12" r="1.2" fill="currentColor" />
    </svg>
  ),
  degree: (
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
      <path d="M2 10 L12 5 L22 10 L12 15 Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M6 12 V17 Q 12 19.5 18 17 V12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <line x1="22" y1="10" x2="22" y2="15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
};

function SpecCard9({ icon, label, sub }) {
  return (
    <div className="d9-spec-card">
      <span className="d9-spec-icon">{CardIcons9[icon]}</span>
      <span className="d9-spec-body">
        <span className="d9-spec-label">{label}</span>
        {sub && <span className="d9-spec-sub">{sub}</span>}
      </span>
    </div>
  );
}

function Dobra9() {
  return (
    <section className="dobra9">
      <div className="d9-grid">
        <div className="d9-col-visual">
          <div className="d9-portrait-stage">
            <div className="d9-portrait-frame">
              <img
                src="assets/marina-piano.webp"
                alt="Marina cantando ao lado de um piano"
                className="d9-portrait-img"
                width="4000"
                height="6000"
                loading="lazy"
                decoding="async"
              />
              <div className="d9-portrait-overlay" />
            </div>

            <div className="d9-spec-stack">
              <SpecCard9 icon="belting" label="Especialista em Belting" sub="técnica vocal contemporânea" />
              <SpecCard9 icon="years" label="25 anos de experiência" sub="formando cantores" />
              <SpecCard9 icon="degree" label="Graduanda em Fonoaudiologia" sub="ciência aplicada à voz" />
            </div>
          </div>
        </div>

        <div className="d9-col-text">
          <h2 className="d9-h2">Por que este workshop <em className="d9-h2-em">existe</em>.</h2>

          <div className="d9-body-wrap">
            <p className="d9-body">
              Depois de mais de <span className="d9-num">25 anos</span> formando cantores, Marina percebeu um padrão:
              <em className="d9-body-em"> muita gente não está sem talento. Está sem leitura da própria voz.</em>
            </p>

            <p className="d9-body">
              Foi observando alunos iniciantes, cantores profissionais e professores de canto que nasceu o
              <strong> Manual da Voz</strong>: para quem cansou de
              <span className="d9-strike"> colecionar dicas </span>
              e quer entender o que a própria voz <em>realmente precisa</em>.
            </p>
          </div>

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

window.Dobra9 = Dobra9;

const D10Icons = {
  clock: (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12 6 v6 l4 2.4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  live: (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <circle cx="12" cy="12" r="3.5" fill="currentColor" />
      <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" strokeWidth="1.4" opacity="0.7" />
      <circle cx="12" cy="12" r="10.5" fill="none" stroke="currentColor" strokeWidth="1.2" opacity="0.35" strokeDasharray="3 3" />
    </svg>
  ),
  calendar: (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <rect x="3.5" y="5" width="17" height="15.5" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <line x1="3.5" y1="9.5" x2="20.5" y2="9.5" stroke="currentColor" strokeWidth="1.5" />
      <line x1="8" y1="3" x2="8" y2="6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <line x1="16" y1="3" x2="16" y2="6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="12" cy="14.5" r="1.4" fill="currentColor" />
    </svg>
  ),
};

function LoteProgress({ className = '' }) {
  const loteStart = React.useMemo(() => new Date('2026-05-27T16:59:00-03:00'), []);
  const loteEnd = React.useMemo(() => new Date('2026-06-04T16:59:00-03:00'), []);
  const getLotePercent = React.useCallback(() => {
    const total = loteEnd - loteStart;
    if (total <= 0) return 100;
    const done = new Date() - loteStart;
    return Math.round(Math.max(0, Math.min(1, done / total)) * 100);
  }, [loteEnd, loteStart]);
  const [percent, setPercent] = React.useState(getLotePercent);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setPercent(getLotePercent());
    }, 60000);

    return () => clearInterval(timer);
  }, [getLotePercent]);

  return (
    <div className={`d10-progress ${className}`.trim()}>
      <div className="d10-progress-track">
        <div
          className={`d10-progress-fill${percent <= 0 ? ' is-empty' : ''}${percent >= 100 ? ' is-complete' : ''}`}
          style={{ width: `${percent}%` }}
        />
      </div>
      <div className="d10-progress-meta">
        <span className="d10-progress-pct">
          <span className="pct-num">{percent}%</span>
          <span className="pct-cap">do lote 4 vendido</span>
        </span>
        <span className="d10-progress-remaining">vagas finais</span>
      </div>
    </div>
  );
}

function Dobra10() {
  const loteStart = React.useMemo(() => new Date('2026-05-27T16:59:00-03:00'), []);
  const loteEnd = React.useMemo(() => new Date('2026-06-04T16:59:00-03:00'), []);
  const getLotePercent = React.useCallback(() => {
    const total = loteEnd - loteStart;
    if (total <= 0) return 100;
    const done = new Date() - loteStart;
    return Math.round(Math.max(0, Math.min(1, done / total)) * 100);
  }, [loteEnd, loteStart]);
  const [percent, setPercent] = React.useState(getLotePercent);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setPercent(getLotePercent());
    }, 60000);

    return () => clearInterval(timer);
  }, [getLotePercent]);

  return (
    <section className="dobra10" id="dobra10">
      <div className="d10-bg" aria-hidden="true">
        <div className="d10-bg-grain" />
      </div>

      <div className="d10-shell">
        <div className="d10-frame-head">
          <div className="d10-frame-left">
            <span className="d10-frame-num">10</span>
            <span className="d10-frame-line" />
            <span className="d10-frame-cat">Inscrição · 4º lote</span>
          </div>
          <div className="d10-frame-right">
            <span className="d10-pulse" />
            <span>vagas abertas — encerra com lote esgotado</span>
          </div>
        </div>

        <div className="d10-card-row">
          <div className="d10-photo">
            <div className="d10-photo-readout">
              <span>Manual · da · Voz</span>
              <span className="d10-photo-coord">8 · 9 · 10 / 06</span>
            </div>

            <div className="d10-photo-frame">
              <picture>
                <source
                  media="(max-width: 600px)"
                  srcSet="assets/IMG_5213.webp"
                />
                <img
                  src="assets/IMG_5213.webp"
                  alt="Marina Tannus"
                  className="d10-photo-img"
                  width="4000"
                  height="6000"
                  loading="lazy"
                  decoding="async"
                />
              </picture>
              <div className="d10-photo-overlay" />
              <div className="d10-photo-corner d10-corner-tl" aria-hidden="true">
                <svg width="24" height="24" viewBox="0 0 24 24"><path d="M1 12 V1 H12" fill="none" stroke="currentColor" strokeWidth="1" /></svg>
              </div>
              <div className="d10-photo-corner d10-corner-br" aria-hidden="true">
                <svg width="24" height="24" viewBox="0 0 24 24"><path d="M23 12 V23 H12" fill="none" stroke="currentColor" strokeWidth="1" /></svg>
              </div>
              <div className="d10-photo-stamp">
                <span className="d10-stamp-line">Marina</span>
                <span className="d10-stamp-sm">workshop</span>
              </div>
            </div>

            <div className="d10-photo-caption">
              <span className="d10-cap-num">Fig. 10</span>
              <span className="d10-cap-text">Workshop ao vivo · 3 noites</span>
            </div>
          </div>

          <article className="d10-card">
            <header className="d10-card-head">
              <span className="d10-card-eyebrow">
                <span className="d10-card-dot" /> Workshop · 3 noites
              </span>
              <h2 className="d10-card-title">
                Manual <em>da Voz</em>
              </h2>
             
            </header>

            <div className="d10-rule" />

            <ul className="d10-specs">
              <li className="d10-spec">
                <span className="d10-spec-icon">{D10Icons.clock}</span>
                <div className="d10-spec-body">
                  <span className="d10-spec-num">9 h</span>
                  <span className="d10-spec-cap">de conteúdo</span>
                </div>
              </li>
              <li className="d10-spec">
                <span className="d10-spec-icon">{D10Icons.live}</span>
                <div className="d10-spec-body">
                  <span className="d10-spec-num">ao vivo</span>
                  <span className="d10-spec-cap">com a Marina</span>
                </div>
              </li>
              <li className="d10-spec">
                <span className="d10-spec-icon">{D10Icons.calendar}</span>
                <div className="d10-spec-body">
                  <span className="d10-spec-num">8 · 9 · 10</span>
                  <span className="d10-spec-cap">de junho</span>
                </div>
              </li>
            </ul>

            <div className="d10-rule" />

            <div className="d10-price">
              <div className="d10-price-from">
                <span className="d10-from-k">De</span>
                <span className="d10-from-v">R$ 263,90</span>
                <span className="d10-from-arrow">→</span>
                <span className="d10-from-por">por apenas</span>
              </div>

              <div className="d10-price-row">
                <div className="d10-price-now">
                  <span className="d10-cents">R$</span>
                  <span className="d10-amount">37<span className="d10-decimal">,90</span></span>
                </div>
                <div className="d10-price-side">
                  <span className="d10-lote">4º lote</span>
                </div>
              </div>
            </div>

            <div className="d10-payments">
              <img
                className="d10-payment-flags"
                src="https://marinatannus.com/wp-content/uploads/2026/01/bandeiras-de-cartao-fc-1024x125-1.png"
                width="1024"
                height="125"
                loading="lazy"
                decoding="async"
                alt="Bandeiras de cartão aceitas"
              />
            </div>

            <a href="https://pay.hotmart.com/E105736023R?checkoutMode=10" className="d10-cta">
              <span className="d10-cta-text">Comprar ingresso</span>
              <span className="d10-cta-divider">|</span>
              <span className="d10-cta-lote">4º lote</span>
              <span className="d10-cta-arrow" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 9h11M10 4l5 5-5 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
            </a>

            <div className="d10-progress">
              <div className="d10-progress-track">
                <div
                  className={`d10-progress-fill${percent <= 0 ? ' is-empty' : ''}${percent >= 100 ? ' is-complete' : ''}`}
                  style={{ width: `${percent}%` }}
                />
              </div>
              <div className="d10-progress-meta">
                <span className="d10-progress-pct">
                  <span className="pct-num">{percent}%</span>
                  <span className="pct-cap">do lote 4 vendido</span>
                </span>
                <span className="d10-progress-remaining">vagas finais</span>
              </div>
            </div>

            <div className="d10-guarantee">
              <span className="d10-guar-mark" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 22 22">
                  <circle cx="11" cy="11" r="10" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2.5 2.5" />
                  <path d="M6.5 11.5 L9.5 14.5 L15.5 8.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              <div className="d10-guar-text">
                <span className="d10-guar-title">Garantia de 7 dias</span>
                <span className="d10-guar-cap">Se não fizer sentido pra você, devolvemos.</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

window.Dobra10 = Dobra10;

function DobraCronograma() {
  return (
    <section className="dobra-cronograma" aria-labelledby="cronograma-title">
      <div className="cronograma-shell">
        <div className="cronograma-mark" aria-hidden="true">
          <svg viewBox="0 0 28 28" width="28" height="28">
            <path d="M14 4.5c3 0 5.3 2.3 5.3 5.2v4.4c0 2.9-2.3 5.2-5.3 5.2s-5.3-2.3-5.3-5.2V9.7c0-2.9 2.3-5.2 5.3-5.2Z" fill="none" stroke="currentColor" strokeWidth="1.4" />
            <path d="M11.5 9h5M11.5 12h5M14 19.3v4.2M9.5 23.5h9" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
            <path d="M21 11.2v2.3c0 4-3 7-7 7s-7-3-7-7v-2.3" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" opacity="0.72" />
          </svg>
        </div>

        <div className="cronograma-copy">
          <span className="cronograma-meta">08, 09 e 10 de Junho | Ao Vivo | No Zoom</span>
          <h2 id="cronograma-title">Cronograma</h2>
          <p>Os três encontros seguem esse horário:</p>
        </div>

        <div className="cronograma-table" aria-label="Horário do workshop">
          <div className="cronograma-row">
            <span className="cronograma-time">19H00</span>
            <span className="cronograma-event">Início</span>
          </div>
          <div className="cronograma-row">
            <span className="cronograma-time">22H00</span>
            <span className="cronograma-event">Encerramento</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.DobraCronograma = DobraCronograma;

const faqItems = [
  {
    question: 'O que é o Mapeamento Vocal?',
    answer: [
      'É uma leitura guiada da sua voz cantada. Ele mostra como sua voz funciona hoje, onde ela tem mais força, onde apresenta limitações e qual deve ser o próximo passo do seu treino.',
      'No Manual da Voz, você mapeia dimensões como extensão, tessitura, perfil vocal, sustentação, fôlego, tensões, passagem de registro e nasalidade, até construir um manual da sua própria voz.'
    ]
  },
  {
    question: 'Como funciona o Mapeamento Vocal?',
    answer: [
      'Ao longo dos 3 dias do workshop, você preenche a sua Ficha de Automapeamento Vocal enquanto realiza testes, observa seu repertório e acompanha análises guiadas ao vivo.',
      'O processo une percepção vocal, testes práticos e tecnologias de leitura da voz em tempo real para mostrar onde sua voz está, o que ela revela e como transformar essas informações em direção de treino.'
    ]
  },
  {
    question: 'Sou iniciante, esse Workshop é pra mim?',
    answer: [
      'Mesmo que você seja iniciante, esse conhecimento é essencial para seu desenvolvimento, e além disso, eu sempre estarei lá para responder suas dúvidas e deixar tudo o mais didático possível! Então se você tem o desejo de se destacar, esse curso vai ser ideal para a sua jornada.'
    ]
  },
  {
    question: 'Esse Workshop vai ser gravado?',
    answer: [
      'Sim, o Workshop ao vivo será gravado e vendido à parte. Basta entrar no carrinho e você verá as opções de compra.'
    ]
  },
  {
    question: 'O que eu vou aprender?',
    answer: [
      'Você vai aprender a entender como sua voz funciona hoje, identificar padrões importantes no seu canto e transformar essa leitura em direção prática de treino.',
      'Ao longo do workshop, você vai passar por testes vocais e musicais, observar seu repertório, reconhecer pontos como extensão, tessitura, passagem de registro, sustentação, fôlego e tensões, e compreender quais caminhos fazem mais sentido para o desenvolvimento da sua voz.'
    ]
  },
  {
    question: 'Nunca fiz aula de canto, posso participar?',
    answer: [
      'Vou ser sincera: se você tem o mínimo de noção sobre canto, eu recomendo muito a sua participação. Você conhecerá um mundo novo!',
      'Eu vou estar lá para responder suas dúvidas, e tenho certeza de que esse aprendizado trará muita diferença para suas práticas e para sua autopercepção vocal futura.'
    ]
  },
  {
    question: 'Sou professor de canto, vale a pena participar?',
    answer: [
      'Sim. Para mim, como professora, essa metodologia fez total diferença no aprendizado dos alunos, porque permite observar a voz com mais clareza, interpretar padrões e orientar o treino com mais precisão.',
      'Além disso, o workshop é fortemente embasado em ciência, pedagogia vocal e nas minhas pesquisas sobre voz cantada. Você não encontrará essa proposta organizada dessa forma em outro lugar.'
    ]
  },
  {
    question: 'Não conseguirei assistir à imersão toda ao vivo. E agora?',
    answer: [
      'Sem problemas. Você pode adquirir o Workshop + Gravação por R$ 187,90. A gravação será editada e separada em módulos para facilitar seu aprendizado.',
      'De toda maneira, a imersão ao vivo está toda modularizada e materiais serão distribuídos. Então, se você perder algum trecho, poderá consultar o conteúdo, acompanhar os materiais e tirar suas dúvidas durante o evento.'
    ]
  },
  {
    question: 'Sou cantor profissional, vale a pena participar?',
    answer: [
      'Muito. Muitos cantores profissionais treinam, cantam e se apresentam, mas ainda sentem dificuldade para entender exatamente o que está acontecendo na própria voz e qual caminho de estudo realmente faz sentido.',
      'O Manual da Voz ajuda você a organizar essa leitura, reconhecer padrões no seu canto e tomar decisões de treino com mais clareza, autonomia e precisão.'
    ]
  }
];

function Dobra11() {
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section className="dobra11" id="faq">
      <SpectrogramBG opacity={0.045} />
      <div className="d11-shell">
        <div className="d11-heading">
          <span className="d11-kicker">FAQ · Perguntas frequentes</span>
          <h2>Antes de entrar, tire suas dúvidas.</h2>
          <p>
            Respostas diretas para você entender o formato, o nível indicado e como o
            mapeamento vocal funciona na prática.
          </p>
        </div>

        <div className="d11-faq-list">
          {faqItems.map((item, index) => {
            const isOpen = openIndex === index;

            return (
              <article className={`d11-faq-item${isOpen ? ' is-open' : ''}`} key={item.question}>
                <button
                  className="d11-faq-question"
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={`faq-answer-${index}`}
                  onClick={() => setOpenIndex(isOpen ? -1 : index)}
                >
                  <span className="d11-faq-number">{String(index + 1).padStart(2, '0')}</span>
                  <span className="d11-faq-text">{item.question}</span>
                  <span className="d11-faq-icon" aria-hidden="true">{isOpen ? '−' : '+'}</span>
                </button>

                <div className="d11-faq-answer" id={`faq-answer-${index}`}>
                  <div className="d11-faq-answer-inner">
                    {item.answer.map((paragraph) => (
                      <p key={paragraph}>{paragraph}</p>
                    ))}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Dobra11 = Dobra11;

function initDobra4HScroll(){
  const scene = document.getElementById('mt-hscroll-1');
  if (!scene || scene.dataset.mtHsReady === 'true') return;
  scene.dataset.mtHsReady = 'true';

  const pin = scene.querySelector('.mt-hs-pin');
  const rail = scene.querySelector('.mt-hs-rail');
  const track = scene.querySelector('#mt-hs-track-1');
  if (!pin || !rail || !track) return;

  let sceneTop = 0;
  let travel = 0;   // distancia entre "primeiro centrado" e "ultimo centrado"
  let startX = 0;   // posicao X inicial (primeiro centrado)
  let ticking = false;
  let videoObserver = null;
  let sourcesLoaded = false;

  // ====== DETECCAO DE MODO (desktop vs mobile) ======
  const mqMobile = window.matchMedia('(max-width: 768px)');
  function setMode(){
    if (mqMobile.matches) scene.classList.add('is-mobile');
    else scene.classList.remove('is-mobile');
  }
  setMode();
  mqMobile.addEventListener('change', setMode);

  // --- bloqueio de pan-x (fallback para browsers que ignoram touch-action) ---
  let startTx = 0, startTy = 0, dragging = false;
  scene.addEventListener('touchstart', (e)=>{
    if (scene.classList.contains('is-mobile')) return; // nao intercepta no mobile-coluna
    if (!e.touches || !e.touches[0]) return;
    dragging = true;
    startTx = e.touches[0].clientX;
    startTy = e.touches[0].clientY;
  }, {passive:true});

  scene.addEventListener('touchmove', (e)=>{
    if (scene.classList.contains('is-mobile')) return; // nao intercepta no mobile-coluna
    if (!dragging || !e.touches || !e.touches[0]) return;
    const dx = Math.abs(e.touches[0].clientX - startTx);
    const dy = Math.abs(e.touches[0].clientY - startTy);
    if (dx > dy) { e.preventDefault(); } // evita arrasto lateral
  }, {passive:false});

  scene.addEventListener('touchend', ()=>{
    if (scene.classList.contains('is-mobile')) return;
    dragging = false;
  }, {passive:true});

  // autoplay cross-browser
  function ensureVideoAttrs(v){
    v.muted = true;
    v.playsInline = true;
    v.setAttribute('muted','');
    v.setAttribute('playsinline','');
  }

  function loadVideoSources(){
    if (sourcesLoaded) return;
    sourcesLoaded = true;
    track.querySelectorAll('source[data-src]').forEach((source)=>{
      source.src = source.dataset.src;
      source.removeAttribute('data-src');
      source.parentElement?.load();
    });
  }

  // Icones SVG - mudo e som
  const ICON_MUTED = `
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill="currentColor" d="M5 9v6h4l5 5V4L9 9H5z"></path>
      <path fill="currentColor" d="M19 5L5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
    </svg>`;
  const ICON_SOUND = `
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill="currentColor" d="M5 9v6h4l5 5V4L9 9H5z"></path>
      <path fill="currentColor" d="M16.5 12a4.5 4.5 0 0 0-2.25-3.9v7.8A4.5 4.5 0 0 0 16.5 12z"></path>
      <path fill="currentColor" d="M18.5 12a6.5 6.5 0 0 0-3.25-5.63v11.26A6.5 6.5 0 0 0 18.5 12z" opacity=".6"></path>
    </svg>`;

  // cria/garante botao por card e aplica estado visual
  function ensureAudioButtonFor(video){
    const card = video.closest('.mt-hs-card');
    if (!card) return;

    let btn = card.querySelector('.mt-audio-cardbtn');
    if (!btn){
      btn = document.createElement('button');
      btn.className = 'mt-audio-cardbtn';
      btn.type = 'button';
      card.appendChild(btn);
      btn.addEventListener('click', ()=> toggleAudio(video, btn));
    }
    syncButtonState(video, btn);
  }

  function syncButtonState(video, btn){
    if (video.muted){
      btn.dataset.state = 'muted';
      btn.innerHTML = ICON_MUTED;
      btn.setAttribute('aria-label','Ativar som deste video');
    } else {
      btn.dataset.state = 'unmuted';
      btn.innerHTML = ICON_SOUND;
      btn.setAttribute('aria-label','Desativar som deste video');
    }
  }

  // SOLO + TOGGLE
  function toggleAudio(video, btn){
    if (video.muted){
      // muta todos os outros
      track.querySelectorAll('video').forEach(v=>{
        if (v !== video){
          v.muted = true;
          v.setAttribute('muted','');
          const b = v.closest('.mt-hs-card')?.querySelector('.mt-audio-cardbtn');
          if (b) syncButtonState(v, b);
        }
      });
      // ativa som aqui
      video.muted = false;
      video.removeAttribute('muted');
      video.volume = 1;
      const p = video.play(); if (p && p.then) p.catch(()=>{});
      syncButtonState(video, btn);
    } else {
      video.muted = true;
      video.setAttribute('muted','');
      syncButtonState(video, btn);
    }
  }

  function pauseAll(){ track.querySelectorAll('video').forEach(v=>v.pause()); }

  // fix de altura do sticky em mobile (100vh oscilante)
  function setVH(){
    if (scene.classList.contains('is-mobile')) return;
    pin.style.height = window.innerHeight + 'px';
  }

  // mapeia scroll vertical -> posicao horizontal (centro->centro)
  function recalc(){
    // MOBILE: desliga toda a logica do trilho
    if (scene.classList.contains('is-mobile')){
      pin.style.height = 'auto';
      rail.style.height = 'auto';
      scene.style.height = 'auto';
      // garante que nada fique transformado
      track.style.transform = 'none';
      // desconecta IO se existir
      if (videoObserver) { videoObserver.disconnect(); videoObserver = null; }
      // garante atributos e botoes (funcionam tambem no modo coluna)
      track.querySelectorAll('video').forEach(v=>{
        ensureVideoAttrs(v);
        ensureAudioButtonFor(v);
      });
      return;
    }

    setVH(); // garante altura estavel do pin

    // 1) altura da rail pelo 9:16 do 1o card
    const firstCard = track.children[0];
    if (firstCard){
      const w = firstCard.getBoundingClientRect().width;
      rail.style.height = Math.round(w * (16/9)) + 'px';
    }

    // 2) largura total do trilho (somando gaps)
    const styles = getComputedStyle(track);
    const gap = parseFloat(styles.gap) || 0;
    const kids = Array.from(track.children);
    let trackWidth = 0;
    kids.forEach((el, i)=>{
      trackWidth += el.getBoundingClientRect().width;
      if (i < kids.length-1) trackWidth += gap;
    });

    const railWidth = rail.clientWidth;
    const firstW = kids[0]?.getBoundingClientRect().width || 0;
    const lastW = kids[kids.length-1]?.getBoundingClientRect().width || 0;

    // 3) posicoes centralizadas
    startX = (railWidth - firstW)/2;                  // 1o centrado
    const endX = (railWidth + lastW)/2 - trackWidth;  // ultimo centrado
    travel = startX - endX;                           // >0

    // 4) altura da cena = altura fixa do pin + viagem
    scene.style.height = `${pin.clientHeight + Math.max(0, travel)}px`;

    // 5) topo absoluto da cena
    sceneTop = scene.getBoundingClientRect().top + window.scrollY;

    // 6) observers, botoes e posicao inicial
    setupVideoObserver();
    track.querySelectorAll('video').forEach(v=>{
      ensureVideoAttrs(v);
      ensureAudioButtonFor(v);
    });
    apply();
  }

  function apply(){
    if (scene.classList.contains('is-mobile')) return; // sem transform no mobile
    const progressed = Math.min(Math.max(window.scrollY - sceneTop, 0), Math.max(0, travel));
    const x = startX - progressed;
    track.style.transform = `translate3d(${x}px, 0, 0)`;
  }

  function onScroll(){
    if (scene.classList.contains('is-mobile')) return;
    if (!ticking){
      requestAnimationFrame(()=>{ apply(); ticking = false; });
      ticking = true;
    }
  }

  // IO para autoplay/pause (root = rail)
  function setupVideoObserver(){
    if (videoObserver) videoObserver.disconnect();

    videoObserver = new IntersectionObserver((entries)=>{
      entries.forEach(entry=>{
        const vid = entry.target;
        if (entry.isIntersecting && entry.intersectionRatio >= 0.6){
          loadVideoSources();
          ensureVideoAttrs(vid);
          const p = vid.play(); if (p && p.then) p.catch(()=>{});
        } else {
          vid.pause();
        }
      });
    }, { root: rail, threshold: [0,.25,.5,.6,.75,1] });

    track.querySelectorAll('video').forEach(v=>{
      ensureVideoAttrs(v);
      videoObserver.observe(v);
    });
  }

  // pausa quando a dobra sai da tela
  const sceneObserver = new IntersectionObserver((entries)=>{
    entries.forEach(e=>{
      if (e.isIntersecting) loadVideoSources();
      else pauseAll();
    });
  }, { rootMargin: '450px 0px', threshold: 0 });
  sceneObserver.observe(scene);

  // pausa quando a aba fica oculta
  document.addEventListener('visibilitychange', ()=>{ if (document.hidden) pauseAll(); });

  // listeners basicos
  const ro = new ResizeObserver(()=>recalc());
  ro.observe(document.documentElement);
  window.addEventListener('load', recalc, { passive:true });
  window.addEventListener('resize', ()=>{ setVH(); recalc(); }, { passive:true });
  window.addEventListener('orientationchange', ()=>{ setTimeout(()=>{ setVH(); recalc(); }, 200); });
  window.addEventListener('scroll', onScroll, { passive:true });

  // ===== Swipe mapeado para scroll (somente no modo trilho) =====
  (function(){
    const sceneEl = scene;
    let touchStartX = 0;
    let touchStartY = 0;
    let touchActive = false;

    sceneEl.addEventListener('touchstart', (e) => {
      if (scene.classList.contains('is-mobile')) return; // nao atua no mobile-coluna
      if (!e.touches || !e.touches[0]) return;
      touchActive = true;
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
    }, { passive: true });

    sceneEl.addEventListener('touchmove', (e) => {
      if (scene.classList.contains('is-mobile')) return;
      if (!touchActive || !e.touches || !e.touches[0]) return;
      const dx = e.touches[0].clientX - touchStartX;
      const dy = e.touches[0].clientY - touchStartY;

      // so reage a gestos mais horizontais que verticais
      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
        e.preventDefault(); // evita scroll lateral do navegador
        // deslizar p/ esquerda -> avanca scroll vertical
        window.scrollTo({
          top: window.scrollY - dx,
          behavior: 'auto'
        });
      }
    }, { passive: false });

    sceneEl.addEventListener('touchend', () => {
      if (scene.classList.contains('is-mobile')) return;
      touchActive = false;
    }, { passive: true });
  })();

  // inicial
  setVH();
  recalc();
}

const HERO_DEFAULTS = {
  bg: "dark",
  specOpacity: 0.06,
  layout: "split",
  cornerMarks: true,
  annotations: true,
  imageTreatment: "frame"
};

function AppHero() {
  return <Hero t={HERO_DEFAULTS} />;
}

function initFastAnchorScroll() {
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
  const scrollToTarget = (target) => {
    const start = window.scrollY;
    const top = target.getBoundingClientRect().top + window.scrollY;
    const distance = top - start;
    const duration = reduceMotion ? 0 : 520;

    if (duration === 0) {
      window.scrollTo(0, top);
      return;
    }

    const startTime = performance.now();
    const step = (now) => {
      const progress = Math.min(1, (now - startTime) / duration);
      window.scrollTo(0, start + distance * easeOutCubic(progress));
      if (progress < 1) requestAnimationFrame(step);
    };

    requestAnimationFrame(step);
  };

  document.addEventListener('click', (event) => {
    const link = event.target.closest('a[href^="#"]');
    if (!link) return;

    const id = link.getAttribute('href');
    if (!id || id === '#') return;

    const target = document.querySelector(id);
    if (!target) return;

    event.preventDefault();
    history.pushState(null, '', id);
    scrollToTarget(target);
  });
}

ReactDOM.createRoot(document.getElementById('root-hero')).render(<AppHero />);
ReactDOM.createRoot(document.getElementById('root-dobra2')).render(<Dobra2 />);
ReactDOM.createRoot(document.getElementById('root-dobra3')).render(<Dobra3 />);
ReactDOM.createRoot(document.getElementById('root-dobra5')).render(<Dobra5 />);
ReactDOM.createRoot(document.getElementById('root-dobra6')).render(<Dobra6V3 />);
ReactDOM.createRoot(document.getElementById('root-dobra8')).render(<Dobra8 />);
ReactDOM.createRoot(document.getElementById('root-dobra9')).render(<Dobra9 />);
ReactDOM.createRoot(document.getElementById('root-dobra10')).render(<Dobra10 />);
ReactDOM.createRoot(document.getElementById('root-dobra-cronograma')).render(<DobraCronograma />);
ReactDOM.createRoot(document.getElementById('root-dobra11')).render(<Dobra11 />);
initDobra4HScroll();
initFastAnchorScroll();
