// 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: 760 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Parte 1 · Nossa inspiração</div>
        <h2 style={{
          fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05,
          fontWeight: 700, color: 'var(--bv-purple)',
          letterSpacing: '-0.02em', margin: 0,
        }}>
          Universidade de Navarra:<br/>Nossa inspiração
        </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)' }}>
            A Universidade de Navarra nasceu em 1952 a partir dessa convicção.
            Ele queria formar pessoas que pensassem com profundidade — e que
            essa profundidade se tornasse serviço.
          </p>
        </aside>

        <div>
          <div className="pull-quote large">
            "Os intelectuais são como os cumes com neve: quando esta se desfaz,
            desce a água que faz frutificar os vales."
            <cite>— São Josemaria</cite>
          </div>

          <div className="pull-quote">
            "A Universidade não vive de costas a nenhuma incerteza, a nenhuma
            inquietação, a nenhuma necessidade dos homens. 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."
            <cite>— São Josemaria, Universidade de Navarra</cite>
          </div>
        </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',
          }}>
            Uma faculdade nasce no Brasil
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--bv-gray-dark)', margin: '0 0 16px' }}>
            Após alguns anos, o sonho de uma universidade no Brasil se torna
            realidade e em <strong style={{ color: 'var(--bv-purple)' }}>2024 nasce a Faculdade Belavista</strong>,
            com a missão de promover na sociedade uma visão humanística de
            grande impacto transformador.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--bv-gray-dark)', margin: 0 }}>
            Como obra corporativa do Opus Dei, a Belavista oferece uma formação
            que vai além da excelência técnica, ao assumir o compromisso de
            levar o ensino do <strong style={{ color: 'var(--bv-purple)' }}>Direito e da Economia</strong> a
            um patamar sem precedentes no país, e inspirar jovens talentosos a
            desenvolver, de maneira inusitada, todos os seus potenciais — tanto
            intelectuais quanto comportamentais e morais.
          </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;