/* global React, ReactDOM */
// ============================================================
// STORIES & REELS — New Way · 10 templates · 1080×1920
// Identidade brand board: Aurora + IA + futuro
// Animações fortes: typewriter, glitch, scroll, gradient shift
// ============================================================

const { useState, useEffect, useRef } = React;

const NW = {
  aurora: '#7418DA',
  neuralPurple: '#371A82',
  synapse: '#792BB8',
  quantum: '#AA4BEF',
  coreSlate: '#434A54',
  systemGray: '#626A75',
  neuralNight: '#1E242C',
  neuralMist: '#A7AFBA',
  softIface: '#C8CED7',
  lightCanvas: '#EFF1F5',
};

const SANS = "'Inter', sans-serif";
const SERIF = "'Inter', sans-serif"; // brand book não usa serif — itálico Inter weight 300
const MONO = "'JetBrains Mono', 'Courier New', monospace";

const SW = 1080;
const SH = 1920;

// ============================================================
// PRIMITIVES
// ============================================================

// Hook básico de typewriter
const useTypewriter = (text, speed = 40, startDelay = 200) => {
  const [out, setOut] = useState('');
  useEffect(() => {
    setOut('');
    let i = 0;
    let timer;
    const startTimer = setTimeout(() => {
      timer = setInterval(() => {
        i++;
        setOut(text.slice(0, i));
        if (i >= text.length) clearInterval(timer);
      }, speed);
    }, startDelay);
    return () => { clearTimeout(startTimer); clearInterval(timer); };
  }, [text, speed, startDelay]);
  return out;
};

// Cursor piscante
const Cursor = ({ color = '#fff' }) => (
  <span style={{
    display: 'inline-block', width: '0.55em', height: '0.95em',
    background: color, marginLeft: 4, verticalAlign: '-0.08em',
    animation: 'blink 1s infinite',
  }} />
);

// Frame base — 1080x1920 com footer da marca
const Frame = ({ children, bg = NW.neuralNight, color = '#fff', dark = true, brand = true, brandColor }) => (
  <div style={{
    width: SW, height: SH, background: bg, color,
    fontFamily: SANS, position: 'relative', overflow: 'hidden',
  }}>
    {children}
    {brand && (
      <div style={{
        position: 'absolute', bottom: 64, left: 56, right: 56,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 50,
      }}>
        <img
          src={`assets/marca/logo-horizontal${dark ? '-branco' : ''}.svg`}
          alt="newway"
          style={{ width: 100, height: 'auto', opacity: 0.9 }}
        />
        <span style={{
          fontFamily: MONO, fontSize: 13,
          color: brandColor || (dark ? 'rgba(255,255,255,.5)' : 'rgba(67,74,84,.6)'),
          letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600,
        }}>@newway</span>
      </div>
    )}
  </div>
);

// ===== Background patterns =====

// Grid + scanlines (futuro / IA / cyber)
const GridBg = ({ dark = true, intensity = 1 }) => {
  const grid = dark ? `${NW.aurora}30` : `${NW.aurora}1A`;
  const grid2 = dark ? `${NW.aurora}15` : `${NW.aurora}10`;
  const radial = dark ? `${NW.aurora}40` : `${NW.quantum}30`;
  const scan = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.025)';
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: intensity }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${grid} 1px, transparent 1px), linear-gradient(90deg, ${grid} 1px, transparent 1px)`,
        backgroundSize: '90px 90px',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${grid2} 1px, transparent 1px), linear-gradient(90deg, ${grid2} 1px, transparent 1px)`,
        backgroundSize: '22px 22px',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 30% 25%, ${radial}, transparent 55%), radial-gradient(circle at 75% 75%, ${NW.quantum}30, transparent 50%)`,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scan} 3px, ${scan} 4px)`,
        pointerEvents: 'none',
      }} />
    </div>
  );
};

// Ondas NW (institucional + tech)
const Waves = ({ tone = 'topright' }) => {
  const presets = {
    topright: { transform: 'translate(450px, -200px) rotate(15deg) scale(1.2)' },
    bottomleft: { transform: 'translate(-200px, 1100px) rotate(-15deg) scale(1.2)' },
    full: { transform: 'translate(-50px, 200px) scale(1.4)' },
  };
  return (
    <svg width="900" height="1200" viewBox="0 0 900 1200" style={{
      position: 'absolute', top: 0, left: 0, ...presets[tone], pointerEvents: 'none',
    }} fill="none">
      <defs>
        <linearGradient id={`wg-${tone}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={NW.aurora} stopOpacity="0" />
          <stop offset="40%" stopColor={NW.aurora} stopOpacity="0.55" />
          <stop offset="100%" stopColor={NW.quantum} stopOpacity="0.85" />
        </linearGradient>
      </defs>
      {Array.from({ length: 22 }).map((_, i) => (
        <path key={i}
          d={`M ${100 - i * 4},${300 + i * 6} Q ${300 + i * 8},${100 - i * 3} ${800 + i * 4},${500 + i * 14} T ${1100},${900 + i * 8}`}
          stroke={`url(#wg-${tone})`}
          strokeWidth={i % 6 === 0 ? 1.3 : 0.8}
          fill="none"
          strokeOpacity={0.12 + (i % 5) * 0.1}
        />
      ))}
    </svg>
  );
};

// Header de sistema (mono, IA-flavored)
const SysHeader = ({ id = 'NW//SYS', status = 'LIVE', dark = true }) => (
  <div style={{
    position: 'absolute', top: 64, left: 56, right: 56,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: MONO, fontSize: 14, color: dark ? 'rgba(255,255,255,.6)' : NW.systemGray,
    letterSpacing: '0.1em', zIndex: 30,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        display: 'inline-block', width: 8, height: 8, borderRadius: 4,
        background: NW.quantum, boxShadow: `0 0 10px ${NW.quantum}`,
        animation: 'pulse 2s infinite',
      }} />
      <span style={{ color: dark ? '#fff' : NW.coreSlate, fontWeight: 700 }}>{id}</span>
    </div>
    <span style={{
      padding: '4px 10px', border: `1px solid ${NW.quantum}`,
      color: NW.quantum, fontSize: 11, letterSpacing: '0.18em', fontWeight: 700,
    }}>{status}</span>
  </div>
);

// Page indicator (Stories)
const StoryDots = ({ count = 5, active = 0 }) => (
  <div style={{
    position: 'absolute', top: 28, left: 56, right: 56,
    display: 'flex', gap: 6, zIndex: 40,
  }}>
    {Array.from({ length: count }).map((_, i) => (
      <div key={i} style={{
        flex: 1, height: 3, borderRadius: 2,
        background: i < active ? '#fff' : (i === active ? '#fff' : 'rgba(255,255,255,.3)'),
        opacity: i <= active ? 1 : 0.35,
      }} />
    ))}
  </div>
);

// Duotone stub (foto placeholder)
const DuotoneStub = ({ children, h = '100%', tone = NW.aurora }) => (
  <div style={{
    width: '100%', height: h, position: 'relative', overflow: 'hidden',
    background: `linear-gradient(160deg, ${NW.neuralNight} 0%, ${tone} 60%, ${NW.quantum} 100%)`,
  }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 75% 80%, rgba(0,0,0,0.4), transparent 60%)`,
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, rgba(0,0,0,0.04) 2px)',
    }} />
    {children && (
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.4)', fontSize: 14, letterSpacing: '0.25em', textTransform: 'uppercase' }}>
        {children}
      </div>
    )}
  </div>
);

// Eyebrow mono
const EyebrowMono = ({ children, color = NW.quantum, glitch = false }) => (
  <div style={{
    fontFamily: MONO, fontSize: 18, fontWeight: 700,
    color, letterSpacing: '0.22em', textTransform: 'uppercase',
    marginBottom: 32, animation: glitch ? 'glitch-anim 3s infinite' : 'none',
  }}>
    {'> '}{children}
  </div>
);

// ============================================================
// 10 TEMPLATES
// ============================================================

// ---------- T01 · HOOK / PERGUNTA PROVOCADORA (typewriter) ----------
const T01_Hook = ({ active }) => {
  const text = 'E se a sua próxima decisão fosse tomada por dado, não por intuição?';
  const typed = useTypewriter(active ? text : '', 32, 400);
  return (
    <Frame bg={NW.neuralNight} dark>
      <GridBg dark intensity={0.85} />
      <SysHeader id="NW//HOOK.001" status="ASK" dark />
      <div style={{
        position: 'absolute', top: 280, left: 64, right: 64,
        height: 1280, display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <EyebrowMono color={NW.quantum} glitch>provocação_001</EyebrowMono>
        <h1 style={{
          fontSize: 96, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.035em',
          margin: 0, color: '#fff', textWrap: 'balance', minHeight: 600,
        }}>
          {typed}
          {typed.length < text.length && <Cursor color={NW.quantum} />}
        </h1>
      </div>
    </Frame>
  );
};

// ---------- T02 · STAT / DADO DE IMPACTO (counter + glow) ----------
const T02_Stat = ({ active }) => {
  const target = 67;
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!active) { setVal(0); return; }
    let i = 0;
    const total = 60;
    const int = setInterval(() => {
      i++;
      setVal(Math.round((i / total) * target));
      if (i >= total) clearInterval(int);
    }, 24);
    return () => clearInterval(int);
  }, [active]);
  return (
    <Frame bg={NW.neuralNight} dark>
      <GridBg dark />
      <SysHeader id="NW//METRIC.045" status="↑ TRENDING" dark />
      <div style={{
        position: 'absolute', top: 320, left: 56, right: 56,
        textAlign: 'left',
      }}>
        <EyebrowMono color={NW.aurora}>insight_de_mercado</EyebrowMono>
        <div style={{
          fontSize: 360, fontWeight: 800, color: NW.aurora,
          letterSpacing: '-0.06em', lineHeight: 0.85,
          textShadow: `0 0 80px ${NW.aurora}80`,
          fontFeatureSettings: '"tnum" 1',
          display: 'flex', alignItems: 'flex-start',
        }}>
          <span>+{val}</span>
          <span style={{ color: NW.quantum, fontSize: 220, lineHeight: 0.85 }}>%</span>
        </div>
        <div style={{
          marginTop: 56, fontSize: 38, fontWeight: 500, color: '#fff',
          lineHeight: 1.3, textWrap: 'balance', maxWidth: 920,
        }}>
          é o crescimento das empresas que combinam <span style={{ color: NW.quantum, fontWeight: 700 }}>IA aplicada</span> com método.
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 220, left: 56, right: 56,
        display: 'flex', gap: 16, fontFamily: MONO, fontSize: 14, color: 'rgba(255,255,255,.5)',
      }}>
        <span>fonte: NW research 2026 · n=312</span>
      </div>
    </Frame>
  );
};

// ---------- T03 · QUOTE / DEPOIMENTO (duotone + serif) ----------
const T03_Quote = () => (
  <Frame bg="#000" dark>
    <div style={{ position: 'absolute', inset: 0 }}>
      <DuotoneStub h="100%" tone={NW.synapse} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.95) 100%)',
      }} />
    </div>
    <SysHeader id="NW//VOICE.07" status="QUOTE" dark />
    <div style={{
      position: 'absolute', bottom: 280, left: 56, right: 56,
    }}>
      <div style={{
        fontSize: 280, color: NW.quantum, lineHeight: 0.7, fontFamily: SERIF,
        fontWeight: 400, marginBottom: -20, textShadow: `0 0 40px ${NW.aurora}80`,
      }}>"</div>
      <h2 style={{
        fontSize: 64, fontWeight: 300, lineHeight: 1.2, letterSpacing: '-0.025em',
        color: '#fff', margin: 0, fontFamily: SANS, fontStyle: 'italic',
        textWrap: 'balance',
      }}>
        A New Way não vendeu IA. Vendeu uma forma diferente de tomar decisão.
      </h2>
      <div style={{
        marginTop: 40, paddingTop: 24, borderTop: `1px dashed ${NW.quantum}66`,
        display: 'flex', alignItems: 'center', gap: 20,
      }}>
        <div style={{ width: 56, height: 56, borderRadius: 28, background: `linear-gradient(135deg, ${NW.synapse}, ${NW.quantum})` }} />
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, color: '#fff' }}>Maria Silva</div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,.6)', fontFamily: MONO, letterSpacing: '0.12em', textTransform: 'uppercase' }}>CEO · Empresa XYZ</div>
        </div>
      </div>
    </div>
  </Frame>
);

// ---------- T04 · ANÚNCIO / NOVIDADE (badge + título grande) ----------
const T04_Anuncio = () => (
  <Frame bg={NW.lightCanvas} color={NW.coreSlate} dark={false}>
    <Waves tone="full" />
    <SysHeader id="NW//RELEASE.002" status="JUST DROPPED" dark={false} />
    <div style={{
      position: 'absolute', top: 360, left: 56, right: 56,
    }}>
      <div style={{
        display: 'inline-block', padding: '12px 24px',
        background: NW.aurora, color: '#fff',
        fontFamily: MONO, fontSize: 14, fontWeight: 700,
        letterSpacing: '0.25em', textTransform: 'uppercase',
        marginBottom: 40, animation: 'pulse-badge 2s infinite',
      }}>NOVO · 05.2026</div>
      <h1 style={{
        fontSize: 130, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.04em',
        margin: 0, color: NW.coreSlate, textWrap: 'balance',
      }}>
        Lançamos o <span style={{ color: NW.aurora }}>NW Pulse</span>.
      </h1>
      <p style={{
        fontSize: 32, lineHeight: 1.4, color: NW.systemGray, marginTop: 40,
        fontFamily: SANS, fontStyle: 'italic', fontWeight: 300, textWrap: 'balance',
      }}>
        O dashboard que mostra o que sua decisão de hoje vai virar amanhã.
      </p>
      <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{
          padding: '20px 32px', background: NW.coreSlate, color: '#fff',
          fontFamily: MONO, fontSize: 16, fontWeight: 700, letterSpacing: '0.18em',
        }}>SAIBA MAIS →</div>
        <div style={{ fontSize: 14, color: NW.systemGray, fontFamily: MONO }}>
          gruponewway.com.br/pulse
        </div>
      </div>
    </div>
  </Frame>
);

// ---------- T05 · CTA "ARRASTA PRA CIMA" / "LINK NA BIO" (animated) ----------
const T05_CTA = () => (
  <Frame bg={NW.neuralNight} dark>
    <GridBg dark intensity={0.7} />
    <Waves tone="topright" />
    <SysHeader id="NW//ENGAGE" status="ACT" dark />
    <div style={{
      position: 'absolute', top: 460, left: 56, right: 56, textAlign: 'center',
    }}>
      <EyebrowMono color={NW.quantum}>próximo_passo</EyebrowMono>
      <h1 style={{
        fontSize: 140, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.04em',
        margin: 0, color: '#fff', textWrap: 'balance',
      }}>
        Quer ver isso<br />no seu time?
      </h1>
      <p style={{
        fontSize: 28, lineHeight: 1.4, color: 'rgba(255,255,255,.7)', marginTop: 40,
        textWrap: 'balance', fontFamily: MONO,
      }}>
        // 30min com nossos sêniors. Diagnóstico no fim da call.
      </p>
    </div>
    <div style={{
      position: 'absolute', bottom: 280, left: 56, right: 56,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
    }}>
      <div style={{
        animation: 'arrow-up 1.6s ease-in-out infinite',
        fontSize: 80, color: NW.quantum, fontWeight: 700, lineHeight: 1,
      }}>↑</div>
      <div style={{
        padding: '20px 40px',
        border: `2px solid ${NW.quantum}`, color: '#fff',
        background: `${NW.quantum}20`, backdropFilter: 'blur(10px)',
        fontFamily: MONO, fontSize: 18, fontWeight: 700, letterSpacing: '0.22em',
      }}>LINK NA BIO</div>
    </div>
  </Frame>
);

// ---------- T06 · REEL COVER (split block + ondas + título dominante) ----------
const T06_ReelCover = () => (
  <Frame bg={NW.aurora} dark>
    {/* Bloco superior: aurora sólido com ondas NW */}
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 1280,
      background: NW.aurora, overflow: 'hidden',
    }}>
      <Waves tone="topright" />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 3px)',
      }} />
    </div>
    {/* Bloco inferior: dark sólido */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: 640,
      background: NW.neuralNight,
    }} />

    <SysHeader id="NW//REEL.012" status="● NEW EP" dark />

    {/* Badge no topo */}
    <div style={{
      position: 'absolute', top: 180, left: 56, right: 56,
    }}>
      <div style={{
        display: 'inline-block', padding: '10px 22px',
        background: NW.neuralNight, border: `1px solid ${NW.quantum}`,
        color: '#fff', fontFamily: MONO, fontSize: 14, fontWeight: 700,
        letterSpacing: '0.25em',
      }}>EP 012 · IA APLICADA</div>
    </div>

    {/* Título dominante, mid-block */}
    <div style={{
      position: 'absolute', top: 360, left: 56, right: 56,
    }}>
      <h1 style={{
        fontSize: 200, fontWeight: 900, lineHeight: 0.88, letterSpacing: '-0.05em',
        margin: 0, color: '#fff', textWrap: 'balance',
      }}>
        IA não<br />vai te<br />salvar.
      </h1>
      <p style={{
        fontSize: 44, color: '#fff', marginTop: 32, opacity: 0.95,
        fontWeight: 300, fontStyle: 'italic', letterSpacing: '-0.01em',
      }}>
        Método sim.
      </p>
    </div>

    {/* Card de play sobre o split */}
    <div style={{
      position: 'absolute', top: 1180, left: 56, right: 56,
      padding: '24px 28px', background: NW.neuralNight,
      border: `1px solid ${NW.quantum}80`,
      display: 'flex', alignItems: 'center', gap: 20,
      boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
    }}>
      <div style={{
        width: 72, height: 72, borderRadius: 36,
        background: NW.quantum,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: 28, paddingLeft: 4,
        animation: 'pulse-badge 2s infinite',
      }}>▶</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 22, fontWeight: 700, color: '#fff', marginBottom: 4, letterSpacing: '-0.01em' }}>Toque para assistir</div>
        <div style={{ fontSize: 13, color: 'rgba(255,255,255,.55)', fontFamily: MONO, letterSpacing: '0.15em' }}>4:12 · NW STUDIO</div>
      </div>
    </div>
  </Frame>
);

// ---------- T07 · "SALVE ESSE POST" / EDUCATIVO (passo a passo) ----------
const T07_Save = () => {
  const steps = [
    ['01', 'Olhe os dados, não os achismos.'],
    ['02', 'Escolha 1 alavanca. Não 7.'],
    ['03', 'Defina métrica primária mensurável.'],
    ['04', 'Sprint de 30 dias. Mede, ajusta, repete.'],
  ];
  return (
    <Frame bg={NW.lightCanvas} color={NW.coreSlate} dark={false}>
      <GridBg dark={false} intensity={0.6} />
      <SysHeader id="NW//PLAYBOOK.04" status="SAVE" dark={false} />
      <div style={{
        position: 'absolute', top: 220, left: 56, right: 56,
      }}>
        <EyebrowMono color={NW.aurora}>4_passos</EyebrowMono>
        <h2 style={{
          fontSize: 100, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em',
          margin: 0, color: NW.coreSlate, textWrap: 'balance',
        }}>
          Como crescer com <span style={{ color: NW.aurora }}>IA</span> sem virar coadjuvante.
        </h2>
      </div>
      <div style={{
        position: 'absolute', top: 880, left: 56, right: 56,
        display: 'flex', flexDirection: 'column', gap: 20,
      }}>
        {steps.map(([n, t]) => (
          <div key={n} style={{
            display: 'flex', alignItems: 'flex-start', gap: 20,
            padding: '20px 24px', background: '#fff',
            border: `1px solid ${NW.aurora}30`, borderLeft: `4px solid ${NW.aurora}`,
          }}>
            <div style={{
              fontFamily: MONO, fontSize: 20, fontWeight: 800,
              color: NW.aurora, letterSpacing: '0.1em', minWidth: 48,
            }}>{n}</div>
            <div style={{ fontSize: 26, fontWeight: 600, color: NW.coreSlate, letterSpacing: '-0.01em', lineHeight: 1.35 }}>{t}</div>
          </div>
        ))}
      </div>
      <div style={{
        position: 'absolute', bottom: 220, left: 56, right: 56,
        display: 'flex', alignItems: 'center', gap: 16,
        padding: '16px 24px', background: NW.coreSlate, color: '#fff',
      }}>
        <div style={{ fontSize: 28 }}>🔖</div>
        <div style={{
          fontFamily: MONO, fontSize: 14, fontWeight: 700, letterSpacing: '0.22em',
        }}>SALVE ESSE POST · VOLTE QUANDO PRECISAR</div>
      </div>
    </Frame>
  );
};

// ---------- T08 · BASTIDORES / INSTITUCIONAL (foto + caption) ----------
const T08_Bastidores = () => (
  <Frame bg="#000" dark>
    <div style={{ position: 'absolute', inset: 0 }}>
      <DuotoneStub h="100%" tone={NW.aurora}>bastidor · workshop</DuotoneStub>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.95) 100%)`,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px)',
      }} />
    </div>
    <SysHeader id="NW//BTS.034" status="● REC" dark />
    <div style={{
      position: 'absolute', top: 260, left: 56, right: 56,
    }}>
      <div style={{
        display: 'inline-block', padding: '8px 16px',
        background: '#000', border: '1px solid rgba(255,255,255,.3)',
        color: '#fff', fontFamily: MONO, fontSize: 12, fontWeight: 700,
        letterSpacing: '0.25em', textTransform: 'uppercase',
      }}>BTS · WORKSHOP CLIENTE</div>
    </div>
    <div style={{
      position: 'absolute', bottom: 220, left: 56, right: 56,
    }}>
      <h2 style={{
        fontSize: 84, fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.03em',
        margin: 0, color: '#fff', textWrap: 'balance',
      }}>
        12 horas mapeando <span style={{ fontStyle: 'italic', fontWeight: 300, color: NW.quantum }}>onde a decisão trava.</span>
      </h2>
      <div style={{
        marginTop: 32, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.2)',
        display: 'flex', justifyContent: 'space-between', fontSize: 14, fontFamily: MONO,
        color: 'rgba(255,255,255,.7)', letterSpacing: '0.15em', textTransform: 'uppercase',
      }}>
        <span>São Paulo · 04.2026</span>
        <span>NW Studio</span>
      </div>
    </div>
  </Frame>
);

// ---------- T09 · EVENTO / PALESTRA (data + local + hora) ----------
const T09_Evento = () => (
  <Frame bg={NW.neuralNight} dark>
    <GridBg dark />
    <Waves tone="bottomleft" />
    <SysHeader id="NW//EVENT.07" status="● UPCOMING" dark />
    <div style={{
      position: 'absolute', top: 260, left: 56, right: 56,
    }}>
      <EyebrowMono color={NW.quantum}>palestra_aberta</EyebrowMono>
      <h1 style={{
        fontSize: 110, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.04em',
        margin: 0, color: '#fff', textWrap: 'balance',
      }}>
        IA aplicada a decisões de <span style={{ color: NW.aurora }}>verdade.</span>
      </h1>
    </div>
    <div style={{
      position: 'absolute', top: 920, left: 56, right: 56,
      padding: 36, background: 'rgba(255,255,255,.06)', backdropFilter: 'blur(20px)',
      border: '1px solid rgba(255,255,255,.15)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
        paddingBottom: 28, borderBottom: '1px solid rgba(255,255,255,.15)', marginBottom: 28,
      }}>
        <div>
          <div style={{ fontSize: 14, color: NW.quantum, fontFamily: MONO, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 12 }}>DATA</div>
          <div style={{ fontSize: 40, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1 }}>22.05</div>
          <div style={{ fontSize: 18, color: 'rgba(255,255,255,.6)', marginTop: 4, fontFamily: MONO }}>QUI · 19h00</div>
        </div>
        <div>
          <div style={{ fontSize: 14, color: NW.quantum, fontFamily: MONO, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 12 }}>ONDE</div>
          <div style={{ fontSize: 28, fontWeight: 700, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.01em' }}>NW Studio<br /><span style={{ fontSize: 18, color: 'rgba(255,255,255,.6)', fontWeight: 400 }}>São Paulo · Pinheiros</span></div>
        </div>
      </div>
      <div>
        <div style={{ fontSize: 14, color: NW.quantum, fontFamily: MONO, letterSpacing: '0.22em', fontWeight: 700, marginBottom: 12 }}>FACILITADOR</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: '#fff' }}>Netto Bonatelli · CEO New Way</div>
      </div>
    </div>
    <div style={{
      position: 'absolute', bottom: 220, left: 56, right: 56,
      padding: '18px 28px', background: NW.aurora, color: '#fff',
      fontFamily: MONO, fontSize: 16, fontWeight: 700, letterSpacing: '0.22em',
      textAlign: 'center',
    }}>RSVP · LINK NA BIO →</div>
  </Frame>
);

// ---------- T10 · CAROUSEL DIVIDER (Slide 1 de N) ----------
const T10_CarouselDivider = ({ active }) => {
  const text = 'Por que IA não move o ponteiro nas empresas que precisam mover.';
  const typed = useTypewriter(active ? text : '', 28, 300);
  return (
    <Frame bg={NW.neuralNight} dark>
      <GridBg dark intensity={0.9} />
      <Waves tone="topright" />
      <SysHeader id="NW//CAROUSEL.07" status="01 / 06" dark />
      <div style={{
        position: 'absolute', top: 280, left: 56, right: 56,
        display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 1200,
      }}>
        <div style={{
          fontSize: 320, fontWeight: 800, color: `${NW.aurora}25`,
          fontFamily: MONO, lineHeight: 0.85, marginBottom: -120, letterSpacing: '-0.05em',
        }}>01</div>
        <EyebrowMono color={NW.quantum}>thread · arrasta →</EyebrowMono>
        <h1 style={{
          fontSize: 92, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.035em',
          margin: 0, color: '#fff', textWrap: 'balance', minHeight: 480,
        }}>
          {typed}
          {typed.length < text.length && <Cursor color={NW.quantum} />}
        </h1>
      </div>
      <div style={{
        position: 'absolute', bottom: 220, left: 56, right: 56,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 24px', background: `${NW.aurora}25`, border: `1px solid ${NW.aurora}80`,
      }}>
        <div style={{ fontFamily: MONO, fontSize: 14, color: '#fff', letterSpacing: '0.22em', fontWeight: 700 }}>ARRASTA</div>
        <div style={{
          fontSize: 36, color: NW.quantum, fontWeight: 700,
          animation: 'arrow-right 1.4s ease-in-out infinite',
        }}>→</div>
      </div>
    </Frame>
  );
};

// ============================================================
// EXPORTS
// ============================================================
window.STORIES_TEMPLATES = [
  { id: 'T01', label: 'Hook · Pergunta', cat: 'Hook', anim: 'typewriter', Comp: T01_Hook },
  { id: 'T02', label: 'Stat · Dado +67%', cat: 'Stat', anim: 'count-up', Comp: T02_Stat },
  { id: 'T03', label: 'Quote · Depoimento', cat: 'Quote', anim: 'static', Comp: T03_Quote },
  { id: 'T04', label: 'Anúncio · Lançamento', cat: 'Anúncio', anim: 'pulse', Comp: T04_Anuncio },
  { id: 'T05', label: 'CTA · Link na bio', cat: 'CTA', anim: 'arrow-up', Comp: T05_CTA },
  { id: 'T06', label: 'Reel cover · NEW EP', cat: 'Reel', anim: 'gradient', Comp: T06_ReelCover },
  { id: 'T07', label: 'Salve · Educativo', cat: 'Save', anim: 'static', Comp: T07_Save },
  { id: 'T08', label: 'Bastidores · BTS', cat: 'BTS', anim: 'static', Comp: T08_Bastidores },
  { id: 'T09', label: 'Evento · Palestra', cat: 'Evento', anim: 'static', Comp: T09_Evento },
  { id: 'T10', label: 'Carousel divider', cat: 'Carousel', anim: 'typewriter', Comp: T10_CarouselDivider },
];