/* global React */

/* ======================================================
   MANIFESTO — film
   ====================================================== */
function Manifesto() {
  const [playing, setPlaying] = React.useState(false);
  const VIDEO_ID = 'l6Xv-kb2mUI';
  return (
    <section id="manifesto" className="section wrap manifesto">
      <div className="section-head reveal">
        <div className="section-num">/03</div>
        <div className="section-label">What we believe</div>
      </div>
      <figure className="film reveal">
        <div className={'film-frame' + (playing ? ' is-playing' : '')}>
          {playing ? (
            <iframe
              className="film-embed"
              src={`https://www.youtube-nocookie.com/embed/${VIDEO_ID}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
              title="Morse — Manifesto"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          ) : (
            <button type="button" className="film-trigger" onClick={() => setPlaying(true)} aria-label="Reproduzir o filme manifesto">
              <img
                className="film-poster"
                src={`https://i.ytimg.com/vi/${VIDEO_ID}/maxresdefault.jpg`}
                alt=""
                aria-hidden="true"
                onError={(e) => { e.currentTarget.src = `https://i.ytimg.com/vi/${VIDEO_ID}/hqdefault.jpg`; }}
              />
              <span className="film-scrim" />
              <span className="film-play"><span className="film-tri" /></span>
            </button>
          )}
        </div>
      </figure>
    </section>
  );
}

/* ======================================================
   HOW WE WORK
   ====================================================== */
const PRINCIPLES = [
  ['Pensamento', 'Estratégia antes da estética.'],
  ['Processo', 'Menos ruído. Mais intenção.'],
  ['Design', 'Sistema antes da arte.'],
  ['Tecnologia', 'IA como ampliação criativa.'],
  ['Relações', 'Poucos clientes. Mais presença.'],
  ['Resultado', 'Significado antes de visibilidade.'],
];

function HowWeWork() {
  return (
    <section id="metodo" className="section wrap">
      <div className="section-head reveal">
        <div className="section-num">/05</div>
        <div className="section-label">How we work</div>
      </div>
      <div className="principles">
        {PRINCIPLES.map(([k, v], i) => (
          <div className="principle reveal" key={i}>
            <div className="pr-k mono">// {k}</div>
            <div className="pr-v">{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Manifesto = Manifesto;
window.HowWeWork = HowWeWork;