/* ESUP · Social pieces — componentes das peças de divulgação */
const LOGO = "assets/logo-esup-navy.png";
const LOGO_COLOR = "assets/logo-esup-color.png";
const WA = "(62) 3300-4400";

/* ---------- FEED A · Tipográfico ---------- */
function FeedA() {
  return (
    <div className="sp" style={{ width: '100%', height: '100%' }}>
      <div className="glow"></div>
      <div className="pad" style={{ padding: '80px', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '34px', alignItems: 'flex-start' }}>
          <img className="sp-logo" src={LOGO} alt="ESUP" />
          <span className="sp-eye" style={{ fontSize: '20px' }}>Pós-Graduação Lato Sensu</span>
        </div>
        <div>
          <h1 className="sp-title" style={{ fontSize: '92px' }}>Saia do<br />operacional.</h1>
          <h2 className="sp-title sp-gold" style={{ fontSize: '58px', marginTop: '18px', lineHeight: 1.05 }}>Vire o especialista<br />que blinda o DP.</h2>
          <p className="sp-lead" style={{ fontSize: '30px', marginTop: '26px', maxWidth: '18ch' }}>Departamento Pessoal &amp; Legislação Trabalhista</p>
        </div>
        <div className="sp-stats" style={{ gap: '10px' }}>
          <div className="sp-stat"><div className="n" style={{ fontSize: '52px' }}>360h</div><div className="l" style={{ fontSize: '19px' }}>Carga horária</div></div>
          <div className="sp-stat"><div className="n" style={{ fontSize: '52px' }}>14</div><div className="l" style={{ fontSize: '19px' }}>Meses</div></div>
          <div className="sp-stat"><div className="n" style={{ fontSize: '52px' }}>15</div><div className="l" style={{ fontSize: '19px' }}>Módulos</div></div>
        </div>
      </div>
    </div>);

}

/* ---------- FEED B · Com foto ---------- */
function FeedB() {
  return (
    <div className="sp" style={{ width: '100%', height: '100%' }}>
      <image-slot id="feedb-photo" src="assets/esup-estudo.jpg" fit="cover"></image-slot>
      <div className="scrim" style={{ background: 'linear-gradient(180deg, rgba(0,30,73,0.30) 0%, rgba(0,30,73,0.55) 45%, rgba(0,20,49,0.96) 100%)' }}></div>
      <div className="pad" style={{ padding: '80px', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <img className="sp-logo" src={LOGO} alt="ESUP" />
          <span className="sp-eye" style={{ fontSize: '19px', background: 'var(--gold)', color: 'var(--navy)', borderColor: 'var(--gold)' }}>Matrículas abertas</span>
        </div>
        <div>
          <span className="sp-eye" style={{ fontSize: '20px', marginBottom: '26px' }}>Pós-Graduação Lato Sensu</span>
          <h1 className="sp-title" style={{ fontSize: '80px', marginTop: '26px' }}>Departamento<br />Pessoal &amp; <span className="sp-gold">Legislação<br />Trabalhista</span></h1>
          <p className="sp-lead" style={{ fontSize: '29px', marginTop: '26px', maxWidth: '24ch' }}>A formação que transforma analistas em <strong style={{ color: '#fff' }}>Business Partners</strong> do negócio.</p>
          <div className="sp-cta" style={{ marginTop: '40px', padding: '24px 38px', fontSize: '28px' }}>Garanta sua vaga <span className="a" style={{ width: '52px', height: '52px', fontSize: '24px' }}>→</span></div>
        </div>
      </div>
    </div>);

}

/* ---------- FEED C · Dados / estrutura ---------- */
function FeedC() {
  const chips = ["e-Social & SST", "Folha de Pagamento", "Rescisões", "PJECALC", "Compliance & LGPD", "IA aplicada"];
  return (
    <div className="sp" style={{ width: '100%', height: '100%' }}>
      <div className="glow"></div>
      <div className="pad" style={{ padding: '80px', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <img className="sp-logo" src={LOGO} alt="ESUP" />
          <span className="sp-eye" style={{ fontSize: '18px' }}>Turma Set/2026</span>
        </div>
        <div>
          <h2 className="sp-title sp-gold" style={{ fontSize: '34px', letterSpacing: '0.04em' }}>O QUE VOCÊ VAI DOMINAR</h2>
          <h1 className="sp-title" style={{ fontSize: '66px', marginTop: '18px' }}>15 módulos.<br />360 horas.<br /><span className="sp-gold">Zero enrolação.</span></h1>
          <div className="sp-chips" style={{ marginTop: '40px' }}>
            {chips.map((c, i) => <span key={i} className="sp-chip" style={{ fontSize: '24px', padding: '14px 26px' }}>{c}</span>)}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1.5px solid rgba(255,255,255,0.14)', paddingTop: '30px' }}>
          <div className="sp-lead" style={{ fontSize: '24px' }}>Presencial · 1 fim de semana/mês</div>
          <div className="sp-cta" style={{ padding: '18px 30px', fontSize: '24px' }}>WhatsApp {WA}</div>
        </div>
      </div>
    </div>);

}

/* ---------- STORY A · Tipográfico ---------- */
function StoryA() {
  return (
    <div className="sp" style={{ width: '100%', height: '100%' }}>
      <div className="glow"></div>
      <div className="pad" style={{ padding: '110px 80px', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '40px', alignItems: 'flex-start' }}>
          <img className="sp-logo lg" src={LOGO} alt="ESUP" />
          <span className="sp-eye" style={{ fontSize: '24px' }}>Pós-Graduação Lato Sensu</span>
        </div>
        <div>
          <h1 className="sp-title" style={{ fontSize: '112px' }}>Saia do<br />operacional.</h1>
          <h2 className="sp-title sp-gold" style={{ fontSize: '64px', marginTop: '24px', lineHeight: 1.05 }}>Torne-se o<br />especialista do DP.</h2>
          <p className="sp-lead" style={{ fontSize: '34px', marginTop: '34px', maxWidth: '20ch' }}>Departamento Pessoal &amp; Legislação Trabalhista · 360h · 14 meses</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '34px', alignItems: 'flex-start' }}>
          <div className="sp-cta" style={{ padding: '30px 50px', fontSize: '38px' }}>Garanta sua vaga <span className="a" style={{ width: '64px', height: '64px', fontSize: '30px' }}>→</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '18px' }}>
            <span style={{ fontSize: '40px' }}>↑</span>
            <span className="sp-lead" style={{ fontSize: '30px' }}>Arraste para cima · Turma Set/2026</span>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- STORY B · Com foto ---------- */
function StoryB() {
  return (
    <div className="sp" style={{ width: '100%', height: '100%' }}>
      <image-slot id="storyb-photo" src="assets/esup-alunos.jpg" fit="cover"></image-slot>
      <div className="scrim" style={{ background: 'linear-gradient(180deg, rgba(0,30,73,0.25) 0%, rgba(0,30,73,0.10) 38%, rgba(0,20,49,0.98) 80%)' }}></div>
      <div className="pad" style={{ padding: '110px 80px', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <img className="sp-logo lg" src={LOGO} alt="ESUP" />
          <span className="sp-eye" style={{ fontSize: '22px', background: 'var(--gold)', color: 'var(--navy)', borderColor: 'var(--gold)' }}>Vagas abertas</span>
        </div>
        <div>
          <span className="sp-eye" style={{ fontSize: '24px', marginBottom: '30px' }}>Pós-Graduação · Set/2026</span>
          <h1 className="sp-title" style={{ fontSize: '96px', marginTop: '30px' }}>Sua carreira<br />no <span className="sp-gold">próximo<br />nível.</span></h1>
          <p className="sp-lead" style={{ fontSize: '34px', marginTop: '30px', maxWidth: '22ch' }}>Departamento Pessoal &amp; Legislação Trabalhista</p>
          <div className="sp-cta" style={{ marginTop: '46px', padding: '30px 50px', fontSize: '36px' }}>Quero saber mais <span className="a" style={{ width: '62px', height: '62px', fontSize: '28px' }}>→</span></div>
        </div>
      </div>
    </div>);

}

/* ---------- CARROSSEL · 6 slides ---------- */
function CSlide({ children, page, bg, style }) {
  return (
    <div className={"sp " + (bg || "")} style={{ width: '100%', height: '100%', ...style }}>
      {!bg && <div className="glow"></div>}
      {page && <div className="sp-page" style={{ fontSize: '180px', top: '-30px', right: '30px' }}>{page}</div>}
      <div className="pad" style={{ padding: '80px', justifyContent: 'space-between' }}>{children}</div>
    </div>);

}

function Carousel() {
  const topics = ["e-Social & SST", "Folha & Desoneração", "Rescisões & PJECALC", "Férias & 13º", "Compliance & LGPD", "Auditoria Trabalhista", "DCTFWeb & EFD-Reinf", "IA aplicada ao DP"];
  return [
  /* 1 — capa */
  <CSlide page="01">
      <img className="sp-logo" src={LOGO} alt="ESUP" style={{ objectFit: "scale-down" }} />
      <div>
        <span className="sp-eye" style={{ fontSize: '20px', marginBottom: '30px' }}>Pós-Graduação Lato Sensu</span>
        <h1 className="sp-title" style={{ fontSize: '74px', marginTop: '28px' }}>Sua carreira no DP<br />travou no <span className="sp-gold">operacional?</span></h1>
        <p className="sp-lead" style={{ fontSize: '30px', marginTop: '28px', maxWidth: '26ch' }}>Existe um caminho do executor vulnerável ao braço estratégico do negócio. Arraste →</p>
      </div>
      <div className="sp-lead" style={{ fontSize: '24px' }}>Departamento Pessoal &amp; Legislação Trabalhista</div>
    </CSlide>,

  /* 2 — dores */
  <CSlide page="02">
      <h2 className="sp-title sp-gold" style={{ fontSize: '32px', letterSpacing: '0.04em' }}>HOJE VOCÊ VIVE ISSO</h2>
      <ul className="sp-list" style={{ gap: '34px' }}>
        {[["Insegurança ao fechar a folha e enviar o e-Social"], ["Medo de gerar multas e passivos trabalhistas"], ["Preso a tarefas repetitivas, sem perspectiva de crescer"], ["Currículo comum, sem diferenciação no mercado"]].map((t, i) =>
      <li key={i}><span className="mk" style={{ width: '58px', height: '58px', fontSize: '26px', background: 'rgba(255,255,255,0.08)', color: '#fff' }}>{i + 1}</span><span style={{ fontSize: '34px', lineHeight: 1.3, fontWeight: 600, paddingTop: '6px' }}>{t[0]}</span></li>
      )}
      </ul>
      <div className="sp-lead" style={{ fontSize: '26px' }}>A boa notícia: tudo isso tem solução. →</div>
    </CSlide>,

  /* 3 — transformação */
  <CSlide page="03">
      <h2 className="sp-title" style={{ fontSize: '58px' }}>A virada de<br />carreira.</h2>
      <ul className="sp-list" style={{ gap: '30px' }}>
        {["Consultor interno e Business Partner do negócio", "Domínio absoluto do e-Social, DCTFWeb e EFD-Reinf", "Capacidade de auditar, blindar e proteger o caixa", "Cargos de liderança e remuneração maior"].map((t, i) =>
      <li key={i}><span className="mk" style={{ width: '56px', height: '56px', fontSize: '28px', background: 'var(--gold)', color: 'var(--navy)' }}>✓</span><span style={{ fontSize: '33px', lineHeight: 1.3, fontWeight: 600, paddingTop: '6px' }}>{t}</span></li>
      )}
      </ul>
      <div className="sp-lead" style={{ fontSize: '26px' }}>É isso que a especialização entrega. →</div>
    </CSlide>,

  /* 4 — o que vai dominar */
  <CSlide page="04">
      <div>
        <h2 className="sp-title sp-gold" style={{ fontSize: '32px', letterSpacing: '0.04em' }}>15 MÓDULOS · 360 HORAS</h2>
        <h1 className="sp-title" style={{ fontSize: '62px', marginTop: '16px' }}>O que você<br />vai dominar</h1>
      </div>
      <div className="sp-chips" style={{ gap: '16px' }}>
        {topics.map((c, i) => <span key={i} className="sp-chip" style={{ fontSize: '26px', padding: '16px 28px' }}>{c}</span>)}
      </div>
      <div className="sp-lead" style={{ fontSize: '26px' }}>Aprenda hoje, aplique amanhã. →</div>
    </CSlide>,

  /* 5 — formato */
  <CSlide page="05">
      <h2 className="sp-title" style={{ fontSize: '58px' }}>Feito para quem<br /><span className="sp-gold">trabalha.</span></h2>
      <ul className="sp-list" style={{ gap: '30px' }}>
        {[["Sexta", "19h – 22h"], ["Sábado", "08h – 18h"], ["Domingo", "08h – 13h"]].map((t, i) =>
      <li key={i} style={{ alignItems: 'center', gap: '28px' }}><span className="mk" style={{ width: '70px', height: '70px', fontSize: '28px', background: 'var(--gold)', color: 'var(--navy)' }}>{t[0][0]}</span><span style={{ display: 'flex', flexDirection: 'column' }}><span style={{ fontSize: '38px', fontWeight: 800, fontFamily: 'var(--fd)' }}>{t[1]}</span><span className="sp-lead" style={{ fontSize: '24px' }}>{t[0]}-feira</span></span></li>
      )}
      </ul>
      <div className="sp-lead" style={{ fontSize: '28px' }}><strong style={{ color: '#fff' }}>1 fim de semana por mês</strong> · presencial + suporte EAD</div>
    </CSlide>,

  /* 6 — CTA */
  <CSlide page="06" bg="gold-bg">
      <img className="sp-logo" src={LOGO_COLOR} alt="ESUP" style={{ objectFit: "scale-down" }} />
      <div>
        <h1 className="sp-title" style={{ fontSize: '82px', color: 'var(--navy)' }}>Vagas abertas.<br />Turma Set/2026.</h1>
        <p style={{ fontSize: '32px', marginTop: '26px', color: 'var(--navy)', fontWeight: 600, maxWidth: '24ch', lineHeight: 1.4 }}>Turma reduzida para garantir a imersão. Assegure seu lugar agora.</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'flex-start' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '18px', background: 'var(--navy)', color: '#fff', borderRadius: '999px', padding: '26px 44px', fontFamily: 'var(--fd)', fontWeight: 800, fontSize: '34px' }}>WhatsApp {WA}</div>
        <span style={{ fontSize: '24px', color: 'var(--navy)', fontWeight: 600 }}>Pós-Graduação Lato Sensu · Reconhecida pelo MEC</span>
      </div>
    </CSlide>];

}

Object.assign(window, { FeedA, FeedB, FeedC, StoryA, StoryB, Carousel });