// Stories.jsx — Seção 4: Histórias Belavista
const STORIES = [
  { id: 1, title: 'Por que escolhi Direito na Belavista', meta: 'Pedro Leal - Direito', img: 'assets/photos/aluno-alegre.jpg', yt: 'IZvEm7Qvylo' },
  { id: 2, title: 'Uma sala de aula com 14 alunos', meta: 'Lucas Shimada - Economia', img: 'assets/photos/varios-alunos-palestra2.jpg', yt: 'ZxKb8i_VieM' },
  { id: 3, title: 'O dia em que entendi o projeto', meta: 'Giulia Pratesi - Economia', img: 'assets/photos/varios-alunos-palestra3.jpg', yt: '0VToqZ90wyA', start: 7 },
];

const StoryCard = ({ s }) => {
  const [play, setPlay] = React.useState(false);
  return (
    <article className="story-card">
      <div className="story-thumb">
        {play ? (
          <iframe
            src={`https://www.youtube.com/embed/${s.yt}?autoplay=1&rel=0${s.start ? `&start=${s.start}` : ''}`}
            title={s.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
          />
        ) : (
          <button
            type="button"
            onClick={() => setPlay(true)}
            aria-label={`Reproduzir: ${s.title}`}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', padding: 0, border: 0, background: 'transparent', cursor: 'pointer' }}
          >
            <img src={s.img} alt="" />
            <div className="story-play">
              <div className="play-circle"><Icon.Play size={24} /></div>
            </div>
          </button>
        )}
      </div>
      <div className="story-meta">
        <h4>{s.title}</h4>
        <p>{s.meta}</p>
      </div>
    </article>
  );
};

const Stories = () => (
  <section id="historias" className="section section-alt">
    <div className="bv-container">
      <div style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        marginBottom: 40, gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Parte 3 · Histórias Belavista</div>
          <h2 style={{
            fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.1,
            fontWeight: 700, color: 'var(--bv-purple)',
            letterSpacing: '-0.02em', margin: 0,
          }}>
            Quem já está vivendo<br/>esse sonho.
          </h2>
        </div>
        <a href="https://faculdadebelavista.edu.br/historias/" target="_blank" rel="noopener"
           className="btn btn-ghost btn-sm">
          Ver todas no site <Icon.ArrowRight size={14} />
        </a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}
           className="bv-stories-grid">
        {STORIES.map(s => <StoryCard key={s.id} s={s} />)}
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .bv-stories-grid { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 560px) {
        .bv-stories-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);
window.Stories = Stories;