// app.jsx — Sessão Informativa Online · Belavista (landing page)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardStyle": "outlined"
}/*EDITMODE-END*/;

const SECTION_PAD = '120px 64px';
const SECTION_PAD_MOBILE = '64px 22px';
const CONTAINER_MAX = 1360;
const JOTFORM_ID = '261596111012042';
const MEDIA = {
  fachada: (window.__resources && window.__resources.fachada) || 'media/fachada.jpg',
  grafite: (window.__resources && window.__resources.grafite) || 'media/grafite.jpg',
};

const scrollToForm = () => {
  const el = document.getElementById('agende');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

// ─── Hero ─────────────────────────────────────────────────────────────────
function Hero() {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        maxWidth: CONTAINER_MAX, margin: '0 auto',
        padding: mob ? '36px 22px 56px' : '88px 64px 120px',
        display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.05fr 1fr',
        gap: mob ? 40 : 80,
        alignItems: 'center', position: 'relative',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: mob ? 24 : 30, maxWidth: 620 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 56, height: 1, background: 'var(--purple)' }}></span>
            <span className="mono" style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--purple)', fontWeight: 600,
            }}>Sessão informativa online · Vagas limitadas</span>
          </div>

          <h1 style={{
            fontSize: 'clamp(40px, 5.6vw, 78px)',
            color: 'var(--ink)', letterSpacing: '-0.025em', lineHeight: 1.0,
          }}>
            <span style={{ color: 'var(--purple)' }}>Conheça a Belavista</span> de perto, sem sair de casa.
          </h1>

          <p style={{
            fontSize: mob ? 17 : 19, lineHeight: 1.55, color: 'var(--ink-2)',
            fontWeight: 400, maxWidth: 580,
          }}>
            Uma conversa exclusiva com a diretoria da faculdade para você entender,
            em profundidade, como é se formar em <strong style={{ color: 'var(--purple)', fontWeight: 700 }}>Direito</strong> ou
            <strong style={{ color: 'var(--purple)', fontWeight: 700 }}> Economia</strong> em uma instituição que combina
            o Método do Caso de Harvard, formação humanística e acompanhamento individual
            ao longo de toda a graduação.
          </p>

          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start' }}>
            <CTAButton large onClick={scrollToForm}>Agende uma sessão informativa</CTAButton>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
              fontSize: 13, color: 'var(--ink-3)', fontWeight: 500,
            }}>
              <MetaChip icon="clock" label="30 minutos"/>
              <MetaChip icon="screen" label="Microsoft Teams"/>
              <MetaChip icon="users" label="Apenas 15 vagas"/>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', alignSelf: 'stretch', minHeight: mob ? 'auto' : 560 }}>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <PhotoPlaceholder
              ratio="4 / 5"
              src={MEDIA.fachada}
              objectPosition="center"
              label="Fachada · Belavista"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function MetaChip({ icon, label }) {
  const ic = {
    clock: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
    screen: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2" y="4" width="20" height="14" rx="1"/><path d="M8 22h8M12 18v4"/></svg>,
    users: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="9" cy="9" r="3.5"/><path d="M2 20c0-3.5 3-6 7-6s7 2.5 7 6M17 8a3 3 0 0 1 0 6M22 20c0-3-2-5-5-5.5"/></svg>,
  }[icon];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--purple)' }}>
      {ic}<span style={{ color: 'var(--ink-2)' }}>{label}</span>
    </span>
  );
}

// ─── Section 2: Não é uma palestra ────────────────────────────────────────
function SectionConversa({ cardStyle }) {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: 'var(--cream)' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <SectionHeader
          eyebrow="O formato"
          title={<>Não é uma palestra. <span style={{ color: 'var(--purple)' }}>É uma conversa.</span></>}
        />
        <div style={{ marginTop: 36, maxWidth: 820, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <p style={{ fontSize: 17.5, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            A maneira mais completa de entender a Belavista sempre foi visitar nosso campus em São Paulo.
            Mas sabemos que nem todo futuro aluno — ou sua família — tem essa possibilidade.
          </p>
          <p style={{ fontSize: 17.5, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            Por isso criamos as <strong style={{ color: 'var(--purple)', fontWeight: 700 }}>Sessões Informativas Online</strong>:
            encontros conduzidos pessoalmente pela Diretora Executiva, pelo Diretor de Admissões e pelo
            Diretor de Pessoas — com a presença de um aluno Belavista, que conta em primeira pessoa
            como é viver essa formação — em grupos de no máximo 15 participantes, para que cada pergunta seja
            respondida e cada dúvida ouvida com atenção.
          </p>
        </div>

        <div style={{
          marginTop: mob ? 48 : 72,
          display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(2, 1fr)', gap: mob ? 18 : 28,
        }}>
          <Card variant={cardStyle} eyebrow="01 · Conteúdo" title="Apresentação aprofundada"
            body="O projeto formativo, a metodologia, o corpo docente e a estrutura do curso explicados por quem vive a Belavista todos os dias."/>
          <Card variant={cardStyle} eyebrow="02 · Voz do aluno" title="A experiência em primeira pessoa"
            body="Um aluno Belavista participa de cada sessão para contar como é, de verdade, o dia a dia do curso — as aulas pelo Método do Caso, a mentoria e a rotina de quem já está vivendo essa formação."/>
          <Card variant={cardStyle} eyebrow="03 · Diálogo" title="Espaço aberto para perguntas"
            body="A maior parte do tempo é dedicada às suas dúvidas — sobre o curso, o processo seletivo, intercâmbios, mentoria, mercado de trabalho ou o que mais importar para sua decisão."/>
          <Card variant={cardStyle} eyebrow="04 · Formato" title="Grupos reduzidos"
            body="No máximo 15 participantes por sessão. Garantimos que cada um seja ouvido e tenha o tempo necessário para tirar suas dúvidas."/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 3: Para quem é ───────────────────────────────────────────────
function SectionParaQuem({ cardStyle }) {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: '#fff' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <SectionHeader
          eyebrow="Para quem é"
          title={<>Pensada para quem está prestes a tomar <span style={{ color: 'var(--purple)' }}>uma das decisões mais importantes da vida.</span></>}
          intro="Escolher onde cursar a graduação é decidir o ambiente em que você se formará como profissional e como pessoa. Por isso, esta sessão é para:"
        />

        <div style={{
          marginTop: mob ? 44 : 64,
          display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 18 : 28,
        }}>
          <ParaQuemCard variant={cardStyle} tag="Aluno" title="Alunos do Ensino Médio"
            body="Que estão considerando Direito ou Economia e querem entender, em detalhe, o que diferencia a Belavista de uma graduação tradicional — e se essa é a formação certa para os próximos anos da sua vida."/>
          <ParaQuemCard variant={cardStyle} tag="Família" title="Pais e responsáveis"
            body="Que querem conhecer a fundo o projeto formativo, a tradição acadêmica e o ambiente em que seu filho ou filha viverá uma das etapas mais decisivas da formação intelectual e profissional."/>
        </div>

        <div style={{
          marginTop: mob ? 40 : 56, padding: mob ? '22px 22px' : '28px 32px',
          background: 'var(--purple-soft)',
          display: 'flex', alignItems: 'center', gap: 18,
          maxWidth: 820,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" strokeWidth="1.8" style={{ flexShrink: 0 }}>
            <path d="M12 2 L 14 9 L 21 9 L 15.5 13.5 L 17.5 21 L 12 16.5 L 6.5 21 L 8.5 13.5 L 3 9 L 10 9 Z"/>
          </svg>
          <p style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.5, fontWeight: 500 }}>
            Você pode participar sozinho ou junto com sua família.{' '}
            <span style={{ color: 'var(--purple)', fontWeight: 700 }}>Recomendamos a presença de ambos.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

function ParaQuemCard({ variant, tag, title, body }) {
  const mob = useIsMobile(900);
  const base = {
    padding: mob ? 28 : 40, display: 'flex', flexDirection: 'column', gap: 18,
    transition: 'all .25s ease', minHeight: mob ? 'auto' : 280,
  };
  let styles = {};
  if (variant === 'outlined') styles = { ...base, background: '#fff', border: '1px solid var(--hairline)', borderTop: '3px solid var(--purple)' };
  else if (variant === 'filled') styles = { ...base, background: 'var(--purple-soft)' };
  else if (variant === 'lifted') styles = { ...base, background: '#fff', boxShadow: '0 18px 40px -24px rgba(42,14,54,0.25)', border: '1px solid rgba(81,24,101,0.06)' };
  else if (variant === 'minimal') styles = { ...base, borderTop: '1px solid var(--purple)', paddingLeft: 0, paddingRight: 0 };
  else if (variant === 'dark') styles = { ...base, background: 'var(--purple-ink)', color: '#fff' };

  const titleColor = variant === 'dark' ? '#fff' : 'var(--ink)';
  const bodyColor = variant === 'dark' ? 'rgba(255,255,255,0.8)' : 'var(--ink-2)';

  return (
    <div style={styles}>
      <div style={{ display: 'inline-flex', alignSelf: 'flex-start' }}>
        <span style={{
          padding: '6px 12px',
          background: variant === 'dark' ? 'rgba(255,255,255,0.12)' : 'var(--purple)',
          color: '#fff',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase',
        }}>{tag}</span>
      </div>
      <h3 style={{ fontSize: mob ? 24 : 30, color: titleColor, letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ fontSize: 16.5, lineHeight: 1.6, color: bodyColor }}>{body}</p>
    </div>
  );
}

// ─── Campus imagery strip ─────────────────────────────────────────────────
function CampusStrip() {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: '#fff', position: 'relative' }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <img
          src={MEDIA.grafite}
          alt="Campus Belavista — pátio externo"
          style={{ width: '100%', height: 'clamp(360px, 56vh, 620px)', objectFit: 'cover', display: 'block' }}
        />
        {/* gradient + caption overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: mob
            ? 'linear-gradient(180deg, rgba(42,14,54,0.30) 0%, rgba(42,14,54,0.70) 100%)'
            : 'linear-gradient(90deg, rgba(42,14,54,0.55) 0%, rgba(42,14,54,0.20) 45%, rgba(42,14,54,0) 70%)',
        }}></div>
        <div style={{
          position: 'absolute', left: mob ? 22 : 64, right: mob ? 22 : 'auto',
          top: '50%', transform: 'translateY(-50%)',
          color: '#fff', maxWidth: mob ? 'none' : 460,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
            <span style={{ width: 36, height: 1, background: 'rgba(255,255,255,0.7)' }}></span>
            <span className="mono" style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.9)', fontWeight: 600,
            }}>Campus em São Paulo</span>
          </div>
          <h2 style={{
            fontSize: 'clamp(26px, 3.2vw, 44px)',
            color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.1,
          }}>
            Um ambiente que reflete o tipo de formação que oferecemos.
          </h2>
        </div>
        <div className="mono" style={{
          position: 'absolute', right: 24, bottom: 18,
          fontSize: 10.5, letterSpacing: '0.10em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.75)', fontWeight: 500,
          padding: '6px 10px',
          background: 'rgba(42,14,54,0.35)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
        }}>Rua Cardeal Arcoverde, 563</div>
      </div>
    </section>
  );
}

// ─── Section 4: O que você vai descobrir (5 pilares) ──────────────────────
function SectionPilares() {
  const mob = useIsMobile(900);
  const pilares = [
    { n: '01', title: 'Método do Caso, o mesmo de Harvard', tag: 'Metodologia',
      body: 'Somos a única graduação do Brasil a utilizar genuinamente o Método do Caso, a metodologia consagrada por Harvard. Em vez de apenas assistir aulas, o aluno analisa dilemas reais, argumenta e decide — desenvolvendo, desde o primeiro semestre, espírito crítico e maturidade profissional.' },
    { n: '02', title: 'Core Curriculum: formação humanística + empreendedora', tag: 'Currículo',
      body: 'Filosofia, Ética, Antropologia, Literatura, Estratégia, Inovação. Um conjunto de disciplinas transversais que prepara o aluno não só para uma profissão, mas para os grandes dilemas da vida e da sociedade contemporânea.' },
    { n: '03', title: 'Mentoria individual ao longo dos quatro anos', tag: 'Mentoria',
      body: 'Cada aluno é acompanhado por um mentor durante toda a graduação, em uma jornada estruturada de desenvolvimento técnico, comportamental e profissional — algo raríssimo no ensino superior brasileiro.' },
    { n: '04', title: 'Internacionalidade real, dentro e fora da sala', tag: 'Internacional',
      body: 'Professores de Chicago, Nova Iorque, Lisboa e parceiros como Universidad de Navarra, Universidad Austral e Universidad de Los Andes. Em Economia, o curso é bilíngue desde o primeiro semestre.' },
    { n: '05', title: 'Conexão direta com o mercado', tag: 'Carreira',
      body: 'Por meio do Núcleo de Desenvolvimento de Carreiras e do programa Conexão Mercado, nossos alunos têm acesso a estágios e relacionamento com escritórios e instituições como ASBZ Advogados, Levy & Salomão, Pinheiro Guimarães, Banco Sofisa, Constância Investimentos e Spectra Investimentos, entre outros.' },
  ];
  return (
    <section style={{ background: 'var(--purple-ink)', color: '#fff' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 24 : 80, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
              <span style={{ width: 56, height: 1, background: 'rgba(255,255,255,0.5)' }}></span>
              <span className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.7)', fontWeight: 600,
              }}>O que torna a Belavista única</span>
            </div>
            <h2 style={{
              fontSize: 'clamp(32px, 4.2vw, 56px)',
              color: '#fff', letterSpacing: '-0.02em',
            }}>O que você vai descobrir na sessão</h2>
          </div>
          <p style={{ fontSize: 17.5, lineHeight: 1.65, color: 'rgba(255,255,255,0.78)', paddingTop: mob ? 0 : 60 }}>
            A Belavista nasce da tradição do <strong style={{ color: '#fff', fontWeight: 700 }}>ISE Business School</strong> e
            da experiência do <strong style={{ color: '#fff', fontWeight: 700 }}>CEU Law School</strong> — duas instituições que há décadas
            formam executivos e juristas no mais alto padrão de excelência do país.
            Esse mesmo padrão chega agora à graduação.
          </p>
        </div>

        <div style={{ marginTop: mob ? 56 : 88, display: 'flex', flexDirection: 'column' }}>
          {pilares.map((p, i) => <Pilar key={p.n} {...p} last={i === pilares.length - 1}/>)}
        </div>

        <div style={{ marginTop: mob ? 56 : 88, display: 'flex', justifyContent: 'center' }}>
          <CTAButton large onClick={scrollToForm}>Agende uma sessão informativa</CTAButton>
        </div>
      </div>
    </section>
  );
}

function Pilar({ n, title, body, tag, last }) {
  const [hover, setHover] = useState(false);
  const mob = useIsMobile(900);
  const tagEl = (
    <span className="mono" style={{
      display: 'inline-block', padding: '6px 12px',
      border: '1px solid rgba(255,255,255,0.25)',
      fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.7)', fontWeight: 500,
    }}>{tag}</span>
  );
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: mob ? 'auto 1fr' : '160px 1fr 200px',
        gap: mob ? '0 18px' : 60, padding: mob ? '26px 0' : '40px 0',
        borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.10)',
        borderTop: '1px solid rgba(255,255,255,0.10)',
        marginBottom: last ? 0 : -1,
        transition: 'background .3s ease',
        background: hover ? 'rgba(255,255,255,0.025)' : 'transparent',
        alignItems: mob ? 'start' : 'baseline',
      }}
    >
      <div style={{
        fontFamily: "'Avenir Next','Mulish',sans-serif",
        fontWeight: 900, fontSize: mob ? 42 : 78, letterSpacing: '-0.05em',
        color: hover ? '#fff' : 'rgba(255,255,255,0.45)',
        lineHeight: 0.9, transition: 'color .3s ease',
      }}>{n}</div>
      <div>
        <h3 style={{ fontSize: mob ? 22 : 28, color: '#fff', letterSpacing: '-0.02em', marginBottom: 14, lineHeight: 1.15 }}>{title}</h3>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', maxWidth: 620 }}>{body}</p>
        {mob && <div style={{ marginTop: 16 }}>{tagEl}</div>}
      </div>
      {!mob && <div style={{ textAlign: 'right' }}>{tagEl}</div>}
    </div>
  );
}

// ─── Section 5: Vídeo ─────────────────────────────────────────────────────
function SectionVideo() {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: '#fff' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <SectionHeader
          eyebrow="Prova social"
          title="Quem já vive a Belavista"
          intro="Conheça histórias de quem escolheu a Belavista e está vivendo essa formação na prática."
        />
        <div style={{ marginTop: mob ? 40 : 56 }}>
          <div style={{
            aspectRatio: '16 / 9', width: '100%',
            position: 'relative', overflow: 'hidden',
            background: 'var(--purple-ink)',
            boxShadow: '0 40px 80px -40px rgba(42,14,54,0.4)',
          }}>
            <iframe
              src="https://www.youtube-nocookie.com/embed/tVWK24oHh3U?rel=0&modestbranding=1"
              title="Histórias Belavista — Por que escolhi a Belavista"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 6: Como funciona ─────────────────────────────────────────────
function SectionComoFunciona() {
  const mob = useIsMobile(900);
  const steps = [
    { n: '01', title: 'Você se inscreve', body: 'Preencha o formulário e escolha a data que melhor se encaixa na sua agenda.' },
    { n: '02', title: 'Confirmação imediata por e-mail', body: 'Sua vaga é confirmada na hora. Você recebe um e-mail com o link de acesso à sessão.' },
    { n: '03', title: 'Participa da conversa', body: 'No dia e horário escolhidos, conecte-se via Microsoft Teams. A sessão dura cerca de 30 minutos.' },
    { n: '04', title: 'Tira todas as suas dúvidas', body: 'Saia da conversa com clareza sobre se a Belavista é o lugar certo para você ou seu filho.' },
  ];
  return (
    <section style={{ background: 'var(--cream)' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <SectionHeader eyebrow="Passo a passo" title="Como funciona"/>
        <div style={{
          marginTop: mob ? 44 : 64,
          display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(4, 1fr)', gap: mob ? 36 : 0,
          position: 'relative',
        }}>
          {!mob && <div style={{
            position: 'absolute', top: 28, left: '12.5%', right: '12.5%',
            height: 1, background: 'var(--hairline-strong)', zIndex: 0,
          }}></div>}
          {steps.map((s) => (
            <div key={s.n} style={{
              display: 'flex', flexDirection: 'column', gap: 18,
              padding: mob ? 0 : '0 24px 0 0', position: 'relative', zIndex: 1,
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: '#fff',
                border: '1px solid var(--hairline-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Avenir Next','Mulish',sans-serif",
                fontWeight: 800, fontSize: 18, color: 'var(--purple)',
                flexShrink: 0,
              }}>{s.n}</div>
              <h3 style={{ fontSize: 22, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{s.title}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink-2)' }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Inscrição: formulário JotForm embutido (inline) ──────────────────────
function SessionFormEmbed() {
  const mob = useIsMobile(900);
  useEffect(() => {
    let tries = 0;
    const wire = () => {
      if (window.jotformEmbedHandler) {
        window.jotformEmbedHandler(`iframe[id='JotFormIFrame-${JOTFORM_ID}']`, 'https://form.jotform.com');
      } else if (tries++ < 40) {
        setTimeout(wire, 250);
      }
    };
    wire();
  }, []);
  return (
    <div style={{
      width: '100%', maxWidth: 740, margin: '0 auto',
      background: '#fff', borderRadius: 8, overflow: 'hidden',
      boxShadow: '0 30px 70px -28px rgba(0,0,0,0.45)',
    }}>
      <iframe
        id={`JotFormIFrame-${JOTFORM_ID}`}
        title="Inscrição · Sessão Informativa Online · Belavista"
        src={`https://form.jotform.com/${JOTFORM_ID}`}
        allow="geolocation; microphone; camera; fullscreen"
        frameBorder="0"
        scrolling="no"
        style={{
          width: '1px', minWidth: '100%', maxWidth: '100%',
          height: mob ? 1220 : 1040, border: 'none', display: 'block',
        }}
      />
    </div>
  );
}

// ─── Section 7: CTA final + formulário de inscrição ───────────────────────
function SectionCTAFinal() {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: '#fff' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? SECTION_PAD_MOBILE : SECTION_PAD }}>
        <div style={{
          background: 'var(--purple)',
          padding: mob ? '44px 18px' : '80px 64px',
          position: 'relative', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: mob ? 28 : 40,
        }}>
          <div style={{ textAlign: 'center', maxWidth: 680, position: 'relative', zIndex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginBottom: 22 }}>
              <span style={{ width: 40, height: 1, background: 'rgba(255,255,255,0.6)' }}></span>
              <span className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.85)', fontWeight: 600,
              }}>Garanta sua vaga</span>
              <span style={{ width: 40, height: 1, background: 'rgba(255,255,255,0.6)' }}></span>
            </div>
            <h2 style={{
              fontSize: 'clamp(30px, 4.2vw, 52px)',
              color: '#fff', letterSpacing: '-0.02em', marginBottom: 18,
            }}>
              São apenas <span style={{ borderBottom: '3px solid rgba(255,255,255,0.5)' }}>15 vagas</span> por sessão.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', margin: '0 auto', maxWidth: 540 }}>
              Distribuídas por ordem de inscrição. Escolha a data que melhor encaixa na sua agenda —
              ao se inscrever, <strong style={{ color: '#fff', fontWeight: 700 }}>sua vaga já está confirmada</strong> e o link de acesso chega no seu e-mail.
            </p>
          </div>

          <div style={{ width: '100%', position: 'relative', zIndex: 1 }}>
            <SessionFormEmbed/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 8: Quote ─────────────────────────────────────────────────────
function SectionQuote() {
  const mob = useIsMobile(900);
  return (
    <section style={{ background: 'var(--cream)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: mob ? '56px 22px' : '120px 64px' }}>
        <div style={{ position: 'relative', paddingLeft: mob ? 0 : 80 }}>
          <div style={{
            position: 'absolute', left: 0, top: mob ? -22 : -10,
            fontFamily: 'Georgia, serif', fontSize: mob ? 84 : 140, lineHeight: 0.8,
            color: 'var(--purple)', fontWeight: 700, opacity: mob ? 0.5 : 1,
          }}>“</div>
          <blockquote style={{
            fontSize: 'clamp(22px, 2.4vw, 32px)',
            color: 'var(--ink)', lineHeight: 1.35, fontWeight: 500,
            letterSpacing: '-0.01em',
            marginTop: mob ? 36 : 0,
            marginBottom: 32,
          }}>
            A Belavista é mais que uma faculdade; é uma verdadeira esperança para o ensino
            jurídico do Brasil, orientada pelo compromisso com a dignidade da pessoa humana,
            com a liberdade e com a busca pela verdade.
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <div style={{ width: 36, height: 1, background: 'var(--purple)' }}></div>
            <div>
              <div style={{ fontWeight: 800, color: 'var(--ink)', fontSize: 15 }}>Dr. Ives Gandra Martins</div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 2 }}>Jurista · Membro da Academia Brasileira de Filosofia</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer() {
  const mob = useIsMobile(900);
  return (
    <footer style={{ background: 'var(--purple-ink)', color: 'rgba(255,255,255,0.75)' }}>
      <div style={{ maxWidth: CONTAINER_MAX, margin: '0 auto', padding: mob ? '48px 22px 28px' : '64px 64px 32px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mob ? '1fr 1fr' : '1.4fr 1fr 1fr 1fr',
          gap: mob ? '32px 24px' : 40, marginBottom: mob ? 40 : 56,
        }}>
          <div style={{ gridColumn: mob ? '1 / -1' : 'auto' }}>
            <BelavistaLogo size={1.18} white/>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', marginTop: 28, maxWidth: 320 }}>
              Faculdade de Direito e Economia em São Paulo. Tradição do ISE Business
              School e do CEU Law School aplicada à graduação.
            </p>
          </div>
          {[
            { h: 'Cursos', items: ['Direito', 'Economia', 'Processo seletivo'] },
            { h: 'A Belavista', items: ['Quem somos', 'Diferenciais', 'Faça um tour', 'Notícias'] },
            { h: 'Contato', items: ['Fale conosco', 'Central do Aluno', 'Portal do Professor'] },
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.5)', marginBottom: 18, fontWeight: 600,
              }}>{col.h}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.items.map(i => (
                  <li key={i}><a href="#" style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.85)' }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.10)',
          display: 'flex', flexDirection: mob ? 'column' : 'row',
          justifyContent: 'space-between', alignItems: mob ? 'flex-start' : 'center', gap: mob ? 16 : 24,
          fontSize: 13, color: 'rgba(255,255,255,0.55)',
        }}>
          <div>© 2026 Faculdade Belavista. Todos os direitos reservados.</div>
          <div style={{ display: 'flex', gap: 16 }}>
            {['Instagram','LinkedIn','YouTube','TikTok'].map(s => (
              <a key={s} href="#" aria-label={s}><SocialIconWhite name={s}/></a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

function SocialIconWhite({ name }) {
  const sz = 16; const stroke = 'rgba(255,255,255,0.7)';
  if (name === 'Instagram') return <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.7" fill={stroke}/></svg>;
  if (name === 'LinkedIn') return <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.5 0H12v1.9h.06c.6-1.1 2.06-2.27 4.24-2.27 4.54 0 5.38 2.98 5.38 6.87V22h-4.56v-6.6c0-1.58-.03-3.62-2.2-3.62-2.2 0-2.54 1.72-2.54 3.5V22H7.72V8z"/></svg>;
  if (name === 'YouTube') return <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}><path d="M23 7c-.3-1.1-1.1-1.9-2.2-2.2C18.9 4.4 12 4.4 12 4.4s-6.9 0-8.8.4C2.1 5.1 1.3 5.9 1 7c-.4 1.9-.4 5-.4 5s0 3.1.4 5c.3 1.1 1.1 1.9 2.2 2.2 1.9.4 8.8.4 8.8.4s6.9 0 8.8-.4c1.1-.3 1.9-1.1 2.2-2.2.4-1.9.4-5 .4-5s0-3.1-.4-5zM9.8 15.4V8.6L15.6 12l-5.8 3.4z"/></svg>;
  return <svg width={sz} height={sz} viewBox="0 0 24 24" fill={stroke}><path d="M19.6 6.4a4.8 4.8 0 0 1-3.3-1.3 4.8 4.8 0 0 1-1.3-3.1h-3.2v13.4a2.8 2.8 0 1 1-2-2.7V9.5a6 6 0 1 0 5.2 5.9V8.6a8 8 0 0 0 4.6 1.5V6.4z"/></svg>;
}

// ─── Top sticky banner ────────────────────────────────────────────────────
function StickyBanner() {
  const mob = useIsMobile(900);
  return (
    <div style={{
      background: 'var(--purple)', color: '#fff',
      padding: mob ? '8px 16px' : '10px 64px', fontSize: mob ? 12 : 13, fontWeight: 500,
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      gap: mob ? 8 : 14, flexWrap: 'wrap', textAlign: 'center',
      letterSpacing: '0.02em',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FFD23F', flexShrink: 0 }}></span>
      <span>Novas datas disponíveis · sessões de maio a julho de 2026</span>
      <a href="#agende" onClick={(e) => { e.preventDefault(); scrollToForm(); }} style={{
        textDecoration: 'underline', textUnderlineOffset: 3,
        color: '#fff', fontWeight: 600, marginLeft: 4,
      }}>Agendar agora →</a>
    </div>
  );
}

// ─── App ──────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <div>
      <StickyBanner/>
      <TopBar/>
      <MainNav/>
      <Hero/>
      <SectionConversa cardStyle={t.cardStyle}/>
      <SectionParaQuem cardStyle={t.cardStyle}/>
      <CampusStrip/>
      <SectionPilares/>
      <SectionVideo/>
      <SectionComoFunciona/>
      <div id="agende">
        <SectionCTAFinal/>
      </div>
      <SectionQuote/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Estilo dos cards"/>
        <TweakSelect
          label="Variante"
          value={t.cardStyle}
          options={[
            { value: 'outlined', label: 'Outlined · borda + topo' },
            { value: 'filled',   label: 'Filled · fundo lilás' },
            { value: 'lifted',   label: 'Lifted · sombra suave' },
            { value: 'minimal',  label: 'Minimal · linha de topo' },
            { value: 'dark',     label: 'Dark · roxo profundo' },
          ]}
          onChange={(v) => setTweak('cardStyle', v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);