/* ================================================================
   Tracker FMN — Palestra Fluxo Copia e Cola 2026
   Felipe passou na seletiva de palestrantes (12/11/2026). Tema pedido
   pelo time do Fluxo: produção de criativos em alto volume, como era
   feito e quais foram os resultados.

   Tudo que é editável mora em app_config.chave='palestra_copia_e_cola'
   (jsonb), mesmo padrão do Desafio MMM: sem tabela nova, sem migration.
   O que é regra do evento (manual do palestrante) fica fixo aqui no código.

   Nomes com prefixo PCC_ de propósito: tudo vira global depois do Babel.
   ================================================================ */
const { useState: usePS, useEffect: usePE, useRef: usePR } = React;

const PCC_CHAVE = 'palestra_copia_e_cola';
const PCC_EVENTO_INICIO = '2026-12-03';

const PCC_LINKS = [
  { label: 'Nossa apresentação (Google Slides)', url: 'https://docs.google.com/presentation/d/13QkCZWVp5GtxvMk_5yabwjFpH-M0e2dhILUnbhSKr7o/edit', icon: 'file-text' },
  { label: 'Agendar alinhamento com a Fernanda', url: 'https://calendar.app.google/xxXZ6qE34PawXUMj6', icon: 'calendar-plus' },
  { label: 'Manual do palestrante', url: 'https://drive.google.com/file/d/1A6MA9ULzGdRnOjx7sgcHJlHtMbJ2JOoX/view', icon: 'book-open' },
  { label: 'Modelo de slides (dias 03 e 04)', url: 'https://docs.google.com/presentation/d/18Ly0YY9WGxfT4dnmtoRLH0K4_u0Nw7H-njIOCl_clHc/edit?usp=sharing', icon: 'presentation' },
  { label: 'Modelo Pro e Master (dia 05)', url: 'https://docs.google.com/presentation/d/1-p1Nc1Kbjpg0WA4SDJYpmkGFdZHPR9BCIPJbRJGGEgk/edit?usp=sharing', icon: 'presentation' },
  { label: 'Referência: Dany Sakugawa', url: 'https://youtu.be/JuVf4G9sDpY', icon: 'play-circle' },
  { label: 'Referência: Leandro Ladeira', url: 'https://youtu.be/aepAs9sgydM', icon: 'play-circle' },
];

/* Os 35 minutos, na ordem e no tempo que o manual pede. */
const PCC_BLOCOS = [
  { id: 'quem',     min: 2,  titulo: 'Quem é você',          guia: 'Nome, nicho, produto e há quanto tempo está no Fluxo. Breve e pontual.' },
  { id: 'resultado', min: 5, titulo: 'O resultado, logo de cara', guia: 'Antes e depois, com o print que prova. É o que faz a sala prestar atenção.' },
  { id: 'passo',    min: 20, titulo: 'O que eu fiz e como você faz', guia: 'Passo a passo real, na ordem em que aconteceu, com prints, telas, planilhas e copys.' },
  { id: 'entrega',  min: 5,  titulo: 'A entrega copia e cola', guia: 'A peça pronta que o mentorado leva: skill, checklist, template, prompt, exercício.' },
  { id: 'fecho',    min: 3,  titulo: 'Resumo final e despedida', guia: 'Tópicos curtos, relembrar o resultado, frase pra comunidade e aviso de que o material fica disponível.' },
];

const PCC_STATUS = [
  { id: 'ideia',   label: 'Ideia',   tone: 'neutral' },
  { id: 'fazendo', label: 'Fazendo', tone: 'info' },
  { id: 'pronto',  label: 'Pronto',  tone: 'ok' },
];

const PCC_TIPOS_ENTREGA = ['Skill', 'Checklist', 'Template', 'Prompt', 'Exercício', 'Agente', 'Planilha'];

const PCC_CHECK_ALINHAMENTO = [
  'Palestra montada no modelo, mesmo que em rascunho',
  'Prints dos resultados separados',
  'Entrega copia e cola desenhada',
  'Cronômetro do lado pra treinar os 35 minutos',
  'Dúvidas anotadas pra levar',
];
const PCC_CHECK_TECNICO = [
  'Internet estável, de preferência no cabo',
  'Fone com microfone e ambiente silencioso',
  'Câmera na altura dos olhos e luz de frente',
  'Slides abertos e testados antes de entrar',
  'Vídeos anexados na apresentação e enviados separados, como backup',
  'Links e materiais da entrega com acesso liberado',
];

const PCC_NAO_FAZER = [
  'Citar ou mostrar outra mentoria, curso ou mastermind. Nos slides, só a marca do Fluxo e, no máximo, a da FMN.',
  'Vender o próprio produto. Nada de pitch.',
  'Passar dos 35 minutos.',
  'Contar a história da vida ou fazer discurso motivacional. História entra em no máximo 3 minutos.',
  'Deixar o momento difícil virar o foco.',
  'Indicar ferramenta que o Fluxo não usa sem mostrar antes para a Fernanda.',
  'Sair do que foi alinhado. O que vai pro palco é o que foi ensaiado.',
];

const PCC_DIRETRIZES = [
  'Ser objetivo: mostrar o que foi de fato implementado.',
  'Evitar teoria de livro ou de outra pessoa.',
  'Mostrar tudo com print, a começar pelo do resultado.',
  'Usar a linguagem do Fluxo: quadro, furadeira, decorado, Mandala, análise.',
  'Fechar com resumo em tópicos curtos.',
  'Título com pitada VTSD: resultado mais curiosidade.',
];

const PCC_PADRAO = {
  alinhamento: '',   // data do segundo alinhamento, quando marcar
  diaPalestra: '',   // 03, 04 ou 05, quando o Fluxo definir
  titulos: [],
  blocos: {},        // { [id]: { texto, status } }
  entregas: [],      // { id, tipo, nome, descricao, status, link }
  checks: {},        // { [texto]: true }
  numeros: [],       // { id, rotulo, valor, prova }
  notas: '',
};

const pccNovoId = () => Math.random().toString(36).slice(2, 9);
const pccHoje = () => window.FMNFinancas.dataBRT();
function pccDias(ate) {
  if (!ate) return null;
  return Math.round((new Date(ate + 'T12:00:00') - new Date(pccHoje() + 'T12:00:00')) / 86400000);
}
function pccData(iso) {
  if (!iso) return '';
  const [a, m, d] = iso.split('-');
  return `${d}/${m}/${a}`;
}

/* Campo de texto que salva ao sair, sem perder o cursor enquanto digita. */
function PccCampo({ valor, onSalvar, placeholder, linhas = 1, style = {} }) {
  const [v, setV] = usePS(valor || '');
  usePE(() => { setV(valor || ''); }, [valor]);
  const base = {
    width: '100%', background: 'var(--app-bg)', color: 'var(--text-1)',
    border: '1px solid var(--app-border)', borderRadius: 'var(--app-radius-md)',
    padding: '8px 10px', fontSize: 13, fontFamily: 'Roboto, sans-serif', lineHeight: 1.5,
    outline: 'none', resize: 'vertical', boxSizing: 'border-box', ...style,
  };
  const sair = () => { if (v !== (valor || '')) onSalvar(v); };
  return linhas > 1
    ? <textarea rows={linhas} value={v} placeholder={placeholder} onChange={e => setV(e.target.value)} onBlur={sair} style={base}/>
    : <input value={v} placeholder={placeholder} onChange={e => setV(e.target.value)} onBlur={sair} style={base}/>;
}

function PccStatus({ valor, onChange }) {
  const atual = PCC_STATUS.find(s => s.id === valor) || PCC_STATUS[0];
  const proximo = () => {
    const i = PCC_STATUS.findIndex(s => s.id === atual.id);
    onChange(PCC_STATUS[(i + 1) % PCC_STATUS.length].id);
  };
  return (
    <button onClick={proximo} title="Clique para trocar"
      style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
      <window.Badge tone={atual.tone} dot>{atual.label}</window.Badge>
    </button>
  );
}

function PccCheck({ texto, marcado, onToggle }) {
  return (
    <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer',
      fontSize: 13, fontFamily: 'Roboto, sans-serif', color: marcado ? 'var(--text-3)' : 'var(--text-1)',
      textDecoration: marcado ? 'line-through' : 'none', padding: '5px 0' }}>
      <input type="checkbox" checked={!!marcado} onChange={onToggle}
        style={{ marginTop: 2, accentColor: 'var(--app-primary)' }}/>
      <span>{texto}</span>
    </label>
  );
}

function PccKpi({ rotulo, valor, sub }) {
  return (
    <div style={{ background: 'var(--app-surface)', border: '1px solid var(--app-border)',
      borderRadius: 'var(--app-radius-xl)', padding: '16px 18px', minWidth: 0 }}>
      <div style={{ fontSize: 12, color: 'var(--text-3)', fontFamily: 'Roboto, sans-serif' }}>{rotulo}</div>
      <div style={{ fontSize: 24, fontWeight: 600, color: 'var(--text-1)', fontFamily: 'Roboto, sans-serif', marginTop: 4 }}>{valor}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--text-2)', fontFamily: 'Roboto, sans-serif', marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function PalestraScreen() {
  const { TopBar, SectionCard, Btn, LucideIcon } = window;
  const [dados, setDados] = usePS(null);
  const [salvando, setSalvando] = usePS(false);
  const [erro, setErro] = usePS('');

  usePE(() => {
    if (!window.db) return;
    let vivo = true;
    window.db.from('app_config').select('valor').eq('chave', PCC_CHAVE).maybeSingle()
      .then(({ data, error }) => {
        if (!vivo) return;
        if (error) setErro('Não consegui ler a palestra: ' + error.message);
        setDados({ ...PCC_PADRAO, ...(data?.valor || {}) });
      });
    return () => { vivo = false; };
  }, []);

  async function gravar(novo) {
    setDados(novo);
    setSalvando(true);
    const { error } = await window.db.from('app_config')
      .upsert({ chave: PCC_CHAVE, valor: novo, updated_at: new Date().toISOString() }, { onConflict: 'chave' });
    setErro(error ? 'Não salvou: ' + error.message : '');
    setSalvando(false);
  }
  const mudar = (campo, valor) => gravar({ ...dados, [campo]: valor });

  if (!dados) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar title="Palestra Copia e Cola"/>
        <div style={{ padding: 32, color: 'var(--text-3)', fontFamily: 'Roboto, sans-serif', fontSize: 13 }}>Carregando...</div>
      </div>
    );
  }

  const blocoDe = id => dados.blocos[id] || { texto: '', status: 'ideia' };
  const mudarBloco = (id, parcial) => mudar('blocos', { ...dados.blocos, [id]: { ...blocoDe(id), ...parcial } });
  const alternarCheck = t => mudar('checks', { ...dados.checks, [t]: !dados.checks[t] });

  const mudarItem = (lista, id, parcial) => mudar(lista, dados[lista].map(i => i.id === id ? { ...i, ...parcial } : i));
  const tirarItem = (lista, id) => mudar(lista, dados[lista].filter(i => i.id !== id));

  const diasEvento = pccDias(PCC_EVENTO_INICIO);
  const diasAlinhamento = pccDias(dados.alinhamento);
  const blocosProntos = PCC_BLOCOS.filter(b => blocoDe(b.id).status === 'pronto').length;
  const entregasProntas = dados.entregas.filter(e => e.status === 'pronto').length;
  const checksAlinhamento = PCC_CHECK_ALINHAMENTO.filter(t => dados.checks[t]).length;

  const rotuloPequeno = { fontSize: 12, color: 'var(--text-3)', fontFamily: 'Roboto, sans-serif', marginBottom: 6, display: 'block' };
  const textoGuia = { fontSize: 12.5, color: 'var(--text-2)', fontFamily: 'Roboto, sans-serif', lineHeight: 1.5 };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <TopBar title="Palestra Copia e Cola" actions={
        <span style={{ fontSize: 12, color: erro ? 'var(--clr-neg)' : 'var(--text-3)', fontFamily: 'Roboto, sans-serif' }}>
          {erro || (salvando ? 'Salvando...' : 'Tudo salvo')}
        </span>
      }/>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 32px 40px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

        {/* Números do topo */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
          <PccKpi rotulo="Evento" valor={diasEvento > 0 ? `${diasEvento} dias` : diasEvento === 0 ? 'Hoje' : 'Passou'}
            sub="03, 04 e 05 de dezembro, online"/>
          <PccKpi rotulo="Alinhamento com a Fernanda"
            valor={dados.alinhamento ? (diasAlinhamento > 0 ? `${diasAlinhamento} dias` : diasAlinhamento === 0 ? 'Hoje' : 'Feito') : 'A agendar'}
            sub={dados.alinhamento ? pccData(dados.alinhamento) : 'chegar com tudo pronto'}/>
          <PccKpi rotulo="Roteiro" valor={`${blocosProntos}/${PCC_BLOCOS.length}`} sub="blocos prontos"/>
          <PccKpi rotulo="Entregas" valor={`${entregasProntas}/${dados.entregas.length}`} sub="peças prontas"/>
          <PccKpi rotulo="Pronto pro alinhamento" valor={`${checksAlinhamento}/${PCC_CHECK_ALINHAMENTO.length}`} sub="itens do checklist"/>
        </div>

        {/* Briefing */}
        <SectionCard title="O que pediram" icon="mic">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ ...textoGuia, color: 'var(--text-1)', fontSize: 14 }}>
                Produção de criativos em alto volume: como eu fazia e quais foram os resultados.
              </div>
              <div style={textoGuia}>
                35 minutos, ao vivo para toda a mentoria. No segundo alinhamento eu chego com a simulação completa:
                slides no modelo do evento, a apresentação e os materiais que vou liberar, como se fosse o dia.
                Depois de aprovada, até mais 3 encontros com a Fernanda para lapidar.
              </div>
              <div style={textoGuia}>
                Prêmio para as três melhores: 1º ingresso VIP Dourado no Fluxo Festival e 6 meses de Fluxo,
                2º ingresso extra para o Festival, 3º 3 meses de Fluxo.
              </div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <label style={{ flex: 1, minWidth: 140 }}>
                  <span style={rotuloPequeno}>Data do alinhamento</span>
                  <input type="date" value={dados.alinhamento} onChange={e => mudar('alinhamento', e.target.value)}
                    style={{ width: '100%', background: 'var(--app-bg)', color: 'var(--text-1)', border: '1px solid var(--app-border)',
                      borderRadius: 'var(--app-radius-md)', padding: '7px 10px', fontSize: 13, colorScheme: 'dark', boxSizing: 'border-box' }}/>
                </label>
                <label style={{ flex: 1, minWidth: 140 }}>
                  <span style={rotuloPequeno}>Dia da palestra</span>
                  <window.Pilulas opcoes={[{ id: '', label: 'A definir' }, '03/12', '04/12', '05/12']}
                    valor={dados.diaPalestra} onChange={v => mudar('diaPalestra', v)}/>
                </label>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {PCC_LINKS.map(l => (
                <a key={l.url} href={l.url} target="_blank" rel="noopener noreferrer"
                  style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 'var(--app-radius-md)',
                    border: '1px solid var(--app-border)', background: 'var(--app-bg)', color: 'var(--text-1)',
                    fontSize: 13, fontFamily: 'Roboto, sans-serif', textDecoration: 'none' }}>
                  <LucideIcon icon={l.icon} size={15} style={{ color: 'var(--app-primary)' }}/>
                  <span style={{ flex: 1 }}>{l.label}</span>
                  <LucideIcon icon="external-link" size={13} style={{ color: 'var(--text-3)' }}/>
                </a>
              ))}
            </div>
          </div>
        </SectionCard>

        {/* Títulos */}
        <SectionCard title="Título da palestra" icon="type" headerRight={
          <Btn size="sm" variant="secondary" icon="plus"
            onClick={() => mudar('titulos', [...dados.titulos, { id: pccNovoId(), texto: '', escolhido: false }])}>Opção</Btn>
        }>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={textoGuia}>Resultado mais curiosidade, com pitada VTSD. A estrela marca o escolhido.</div>
            {dados.titulos.length === 0 && <div style={{ ...textoGuia, color: 'var(--text-3)' }}>Nenhuma opção ainda.</div>}
            {dados.titulos.map(t => (
              <div key={t.id} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <button onClick={() => mudar('titulos', dados.titulos.map(x => ({ ...x, escolhido: x.id === t.id ? !t.escolhido : false })))}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4,
                    color: t.escolhido ? 'var(--app-primary)' : 'var(--text-3)' }}>
                  <LucideIcon icon="star" size={16}/>
                </button>
                <PccCampo valor={t.texto} placeholder="Escreva uma opção de título" onSalvar={v => mudarItem('titulos', t.id, { texto: v })}/>
                <Btn size="sm" variant="ghost" icon="trash-2" onClick={() => tirarItem('titulos', t.id)}/>
              </div>
            ))}
          </div>
        </SectionCard>

        {/* Números e provas */}
        <SectionCard title="Resultados e prints" icon="bar-chart-3" headerRight={
          <Btn size="sm" variant="secondary" icon="plus"
            onClick={() => mudar('numeros', [...dados.numeros, { id: pccNovoId(), rotulo: '', valor: '', prova: '' }])}>Resultado</Btn>
        }>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={textoGuia}>
              Os números que valem mostrar segundo o manual: faturamento, CPA, conversão, reembolso, views e seguidores
              qualificados, tempo economizado. Cada um com o link do print que prova.
            </div>
            {dados.numeros.length === 0 && <div style={{ ...textoGuia, color: 'var(--text-3)' }}>Nenhum resultado registrado ainda.</div>}
            {dados.numeros.map(n => (
              <div key={n.id} style={{ display: 'grid', gridTemplateColumns: 'minmax(140px,1.2fr) minmax(100px,1fr) minmax(140px,1.5fr) auto', gap: 8, alignItems: 'center' }}>
                <PccCampo valor={n.rotulo} placeholder="O que (ex.: criativos no mês)" onSalvar={v => mudarItem('numeros', n.id, { rotulo: v })}/>
                <PccCampo valor={n.valor} placeholder="Número" onSalvar={v => mudarItem('numeros', n.id, { valor: v })}/>
                <PccCampo valor={n.prova} placeholder="Link do print" onSalvar={v => mudarItem('numeros', n.id, { prova: v })}/>
                <Btn size="sm" variant="ghost" icon="trash-2" onClick={() => tirarItem('numeros', n.id)}/>
              </div>
            ))}
          </div>
        </SectionCard>

        {/* Roteiro dos 35 minutos */}
        <SectionCard title="Roteiro dos 35 minutos" icon="timer">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', height: 8, borderRadius: 999, overflow: 'hidden', gap: 2 }}>
              {PCC_BLOCOS.map(b => {
                const st = blocoDe(b.id).status;
                return <div key={b.id} title={`${b.titulo} · ${b.min} min`}
                  style={{ flex: b.min, background: st === 'pronto' ? 'var(--clr-pos)' : st === 'fazendo' ? 'var(--clr-info)' : 'var(--app-surface-2)' }}/>;
              })}
            </div>
            {PCC_BLOCOS.map((b, i) => {
              const bl = blocoDe(b.id);
              return (
                <div key={b.id} style={{ border: '1px solid var(--app-border)', borderRadius: 'var(--app-radius-lg, 12px)', padding: 14,
                  display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--app-primary)', fontFamily: 'Roboto, sans-serif' }}>
                      {i + 1} · {b.min} min
                    </span>
                    <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)', fontFamily: 'Roboto, sans-serif', flex: 1 }}>{b.titulo}</span>
                    <PccStatus valor={bl.status} onChange={s => mudarBloco(b.id, { status: s })}/>
                  </div>
                  <div style={textoGuia}>{b.guia}</div>
                  <PccCampo linhas={4} valor={bl.texto} placeholder="O que entra neste bloco, slide a slide"
                    onSalvar={v => mudarBloco(b.id, { texto: v })}/>
                </div>
              );
            })}
          </div>
        </SectionCard>

        {/* Entregas */}
        <SectionCard title="Entregas copia e cola" icon="package" headerRight={
          <Btn size="sm" variant="secondary" icon="plus"
            onClick={() => mudar('entregas', [...dados.entregas, { id: pccNovoId(), tipo: 'Skill', nome: '', descricao: '', link: '', status: 'ideia' }])}>Entrega</Btn>
        }>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={textoGuia}>
              O teste do manual: um mentorado que nunca fez isso consegue aplicar no dia seguinte só com o que eu entreguei?
            </div>
            {dados.entregas.length === 0 && <div style={{ ...textoGuia, color: 'var(--text-3)' }}>Nenhuma entrega ainda.</div>}
            {dados.entregas.map(e => (
              <div key={e.id} style={{ border: '1px solid var(--app-border)', borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                  <select value={e.tipo} onChange={ev => mudarItem('entregas', e.id, { tipo: ev.target.value })}
                    style={{ background: 'var(--app-bg)', color: 'var(--text-1)', border: '1px solid var(--app-border)',
                      borderRadius: 'var(--app-radius-md)', padding: '7px 8px', fontSize: 13 }}>
                    {PCC_TIPOS_ENTREGA.map(t => <option key={t}>{t}</option>)}
                  </select>
                  <div style={{ flex: 1, minWidth: 180 }}>
                    <PccCampo valor={e.nome} placeholder="Nome da entrega" onSalvar={v => mudarItem('entregas', e.id, { nome: v })}/>
                  </div>
                  <PccStatus valor={e.status} onChange={s => mudarItem('entregas', e.id, { status: s })}/>
                  <Btn size="sm" variant="ghost" icon="trash-2" onClick={() => tirarItem('entregas', e.id)}/>
                </div>
                <PccCampo linhas={2} valor={e.descricao} placeholder="O que ela faz e o que o mentorado sai com ela na mão"
                  onSalvar={v => mudarItem('entregas', e.id, { descricao: v })}/>
                <PccCampo valor={e.link} placeholder="Link de acesso (liberado antes do alinhamento)"
                  onSalvar={v => mudarItem('entregas', e.id, { link: v })}/>
              </div>
            ))}
          </div>
        </SectionCard>

        {/* Checklists */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
          <SectionCard title="Antes do alinhamento" icon="list-checks">
            <div style={{ padding: 0 }}>
              {PCC_CHECK_ALINHAMENTO.map(t => <PccCheck key={t} texto={t} marcado={dados.checks[t]} onToggle={() => alternarCheck(t)}/>)}
            </div>
          </SectionCard>
          <SectionCard title="Checklist técnico do dia" icon="monitor-check">
            <div style={{ padding: 0 }}>
              {PCC_CHECK_TECNICO.map(t => <PccCheck key={t} texto={t} marcado={dados.checks[t]} onToggle={() => alternarCheck(t)}/>)}
            </div>
          </SectionCard>
        </div>

        {/* Regras do evento */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
          <SectionCard title="O que não fazer" icon="ban" recolhivel idRecolher="palestra-nao-fazer">
            <ol style={{ padding: '0 0 0 20px', margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {PCC_NAO_FAZER.map(t => <li key={t} style={textoGuia}>{t}</li>)}
            </ol>
          </SectionCard>
          <SectionCard title="Padrão das palestras nota máxima" icon="award" recolhivel idRecolher="palestra-diretrizes">
            <ol style={{ padding: '0 0 0 20px', margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {PCC_DIRETRIZES.map(t => <li key={t} style={textoGuia}>{t}</li>)}
            </ol>
          </SectionCard>
        </div>

        {/* Notas */}
        <SectionCard title="Anotações e dúvidas pra Fernanda" icon="notebook-pen">
          <div>
            <PccCampo linhas={6} valor={dados.notas} placeholder="Ideias soltas, dúvidas, o que ficou combinado em cada alinhamento"
              onSalvar={v => mudar('notas', v)}/>
          </div>
        </SectionCard>
      </div>
      </div>
    </div>
  );
}

Object.assign(window, { PalestraScreen });