// Sonho.jsx — Seção 2: O sonho de São Josemaria
const NavarraVideo = () => {
  const [play, setPlay] = React.useState(false);
  if (play) {
    return (
      <div className="video-embed" style={{ marginTop: 64, display: 'block', aspectRatio: '16/9' }}>
        <iframe
          src="https://www.youtube.com/embed/NQVu5wLnucM?autoplay=1&rel=0"
          title="San Josemaría na Universidade de Navarra"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
          style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
        />
      </div>
    );
  }
  return (
    <button
      type="button"
      onClick={() => setPlay(true)}
      className="video-embed"
      style={{ marginTop: 64, display: 'flex', cursor: 'pointer', border: 0, padding: 0, background: 'transparent', textAlign: 'left', width: '100%', font: 'inherit' }}
    >
      <img src="assets/photos/sanjosemaria-navarra.jpg" alt="" />
      <div className="video-overlay">
        <div className="play"><Icon.Play size={28} /></div>
        <div className="label">
          San Josemaría na Universidade de Navarra<br/>
          <span style={{ opacity: 0.85, fontWeight: 500, fontSize: 13 }}>
            "Las tareas científicas deben llevarnos al Creador"
          </span>
        </div>
      </div>
    </button>
  );
};

const Sonho = () => (
  <section id="sonho" className="section section-alt" style={{ position: 'relative' }}>
    <div className="bv-container">
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Parte 1 · O sonho</div>
        <h2 style={{
          fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05,
          fontWeight: 700, color: 'var(--bv-purple)',
          letterSpacing: '-0.02em', margin: 0,
        }}>
          Por que São Josemaria queria<br/>começar uma faculdade?
        </h2>
      </div>

      <div className="sonho-grid">
        <aside>
          <div className="timeline-mark">Navarra · 1952</div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--bv-gray-dark)' }}>
            A Universidade de Navarra nasceu da convicção de São Josemaria
            de que <strong style={{ color: 'var(--bv-purple)' }}>a fé e a razão não se opõem: se completam</strong>.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--bv-gray)' }}>
            Ele queria formar pessoas que pensassem com profundidade — e que essa
            profundidade se tornasse serviço.
          </p>
        </aside>

        <div>
          <div className="pull-quote large">
            "A Universidade tem como sua mais alta missão o serviço aos homens —
            ser fermento da sociedade em que vive."
            <cite>— São Josemaria, Universidade de Navarra</cite>
          </div>

          <p>
            Por isso ela deve investigar a verdade em todos os campos, desde a
            Teologia até as demais ciências do espírito e da natureza.
            A Universidade não vive de costas a nenhuma incerteza, a nenhuma
            inquietação, a nenhuma necessidade dos homens.
          </p>
          <p>
            Não é sua missão oferecer soluções imediatas. Mas, ao estudar com
            profundidade científica os problemas, ela também move os corações,
            esporeia a passividade, desperta forças que dormitam — e forma
            cidadãos dispostos a construir uma sociedade mais justa.
          </p>
        </div>
      </div>

      {/* Brazil arrival */}
      <div style={{
        marginTop: 96, paddingTop: 64,
        borderTop: '1px solid var(--bv-border)',
        display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64,
      }} className="bv-arrival-grid">
        <div>
          <div className="timeline-mark" style={{ color: 'var(--bv-blue)' }}>Brasil · 2024</div>
          <h3 style={{
            fontSize: 32, lineHeight: 1.1, fontWeight: 700,
            color: 'var(--bv-purple)', letterSpacing: '-0.015em',
            margin: '0 0 20px',
          }}>
            A chegada ao Brasil
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--bv-gray-dark)', margin: '0 0 16px' }}>
            Décadas depois, esse mesmo ideal chegou ao Brasil. A Faculdade
            Belavista é obra corporativa do Opus Dei. Uma formação que vai
            além da técnica.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--bv-gray-dark)', margin: 0 }}>
            Um projeto que muitos de nós sonhamos ver crescer, e que começou
            suas primeiras turmas em 2024:
            <strong style={{ color: 'var(--bv-purple)' }}> Direito e Economia</strong>.
          </p>
        </div>

        <div>
          <div className="pull-quote">
            "Queremos fazer de Navarra um foco cultural de primeira ordem
            a serviço de nossa Mãe a Igreja. Queremos que aqui se formem
            homens doutos com sentido cristão da vida — e que sua luz
            se projete por todos os caminhos do saber."
            <cite>— São Josemaria, 1960</cite>
          </div>
        </div>
      </div>

      {/* Video block */}
      <NavarraVideo />
    </div>

    <style>{`
      @media (max-width: 980px) {
        .bv-arrival-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      }
    `}</style>
  </section>
);
window.Sonho = Sonho;