/* global React, useReveal, Icon */
const { useRef, useState, useEffect } = React;

function Manifesto() {
  const [ref, visible] = useReveal();
  const videoRef = useRef(null);
  const [playing, setPlaying] = useState(false);
  const [muted, setMuted] = useState(true);
  const [started, setStarted] = useState(false);

  // Autoplay muted when scrolled into view
  useEffect(() => {
    if (!visible || !videoRef.current) return;
    const v = videoRef.current;
    const tryPlay = v.play();
    if (tryPlay && typeof tryPlay.catch === 'function') tryPlay.catch(() => {});
  }, [visible]);

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  };

  const toggleMute = (e) => {
    e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
    if (v.paused) v.play();
  };

  // Chapter markers based on the 9 clips
  const chapters = [
    'Familia',
    'Negocio',
    'Libertad',
    'Protección',
    'App',
    'Funciones',
    'Más alertas',
    'Cobertura',
    'Setza',
  ];

  return (
    <section className="section manifesto" id="manifiesto">
      <div className="container">
        <div ref={ref} className={'mf-head reveal' + (visible ? ' is-visible' : '')}>
          <div className="mf-eyebrow">
            <span className="eyebrow">Manifiesto</span>
            <span className="mf-eyebrow-line" />
            <span className="mono mf-runtime">00:00 / Setza</span>
          </div>
          <h2 className="display mf-title">
            Cada vehículo<br/>
            <em>cuenta una historia.</em>
          </h2>
          <p className="mf-sub">
            Una camioneta familiar, una flotilla en ruta, una moto al amanecer.
            Detrás de cada uno hay algo que proteger.
          </p>
        </div>

        <div className={'mf-stage' + (visible ? ' is-visible' : '')}>
          <div className="mf-frame" onClick={togglePlay}>
            <video
              ref={videoRef}
              src="assets/video-2-sub-w-logo-w-watermark.mp4"
              playsInline
              muted={muted}
              loop
              preload="metadata"
              onPlay={() => { setPlaying(true); setStarted(true); }}
              onPause={() => setPlaying(false)}
            />

            {/* Letterbox edge gradient overlays */}
            <div className="mf-vignette" aria-hidden />

            {/* HUD: top-left status pill */}
            <div className="mf-hud-top">
              <span className="mf-pill">
                <span className="mf-pill-dot" />
                <span className="mono">PROTECCIÓN INTELIGENTE</span>
              </span>
            </div>

            {/* HUD: top-right SETZA mark */}
            <div className="mf-hud-mark mono">SETZA / 01</div>

            {/* Center play affordance — only when paused */}
            {!playing && (
              <div className="mf-center">
                <button type="button" className="mf-play" aria-label="Reproducir">
                  <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </button>
                {!started && (
                  <div className="mono mf-center-cap">▶ Reproducir manifiesto</div>
                )}
              </div>
            )}

            {/* Mute toggle */}
            <button type="button" className="mf-mute" onClick={toggleMute} aria-label={muted ? 'Activar audio' : 'Silenciar'}>
              {muted ? (
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                  <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.17v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
                </svg>
              ) : (
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
                </svg>
              )}
            </button>
          </div>

          {/* Chapter strip */}
          <div className="mf-chapters" aria-hidden>
            {chapters.map((c, i) => (
              <div key={i} className="mf-chip">
                <span className="mf-chip-num mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="mf-chip-name">{c}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .manifesto {
          background:
            radial-gradient(900px 500px at 100% 0%, color-mix(in oklab, var(--petrol) 14%, transparent), transparent 60%),
            var(--bg);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .mf-head {
          max-width: 760px;
          margin-bottom: 44px;
        }
        .mf-eyebrow {
          display: flex;
          align-items: center;
          gap: 14px;
          margin-bottom: 18px;
        }
        .mf-eyebrow-line {
          flex: 0 0 64px;
          height: 1px;
          background: var(--line-strong);
        }
        .mf-runtime {
          color: var(--ink-mute);
          font-size: 10px;
          letter-spacing: 0.18em;
        }
        .mf-title {
          font-size: clamp(40px, 5vw, 72px);
          font-weight: 500;
          line-height: 0.98;
          margin: 0 0 18px;
        }
        .mf-title em {
          font-style: normal;
          color: var(--petrol);
        }
        .mf-sub {
          font-size: 17px;
          color: var(--ink-2);
          line-height: 1.55;
          max-width: 58ch;
          margin: 0;
          text-wrap: pretty;
        }

        .mf-stage {
          position: relative;
          opacity: 0;
          transform: translateY(20px);
          transition: opacity .9s ease, transform .9s ease;
        }
        .mf-stage.is-visible {
          opacity: 1;
          transform: translateY(0);
        }

        .mf-frame {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 9;
          background: #000;
          border-radius: var(--radius-xl);
          overflow: hidden;
          border: 1px solid var(--line-strong);
          box-shadow:
            0 40px 80px -30px rgba(0,0,0,0.7),
            0 0 0 1px rgba(79, 179, 196, 0.08);
          cursor: pointer;
        }
        .mf-frame video {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
          background: #000;
        }
        .mf-vignette {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.45) 100%);
        }

        .mf-hud-top {
          position: absolute;
          top: 20px;
          left: 20px;
        }
        .mf-pill {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 7px 14px;
          background: rgba(7, 23, 26, 0.7);
          border: 1px solid var(--line-strong);
          border-radius: 999px;
          backdrop-filter: blur(10px);
          font-size: 10px;
          letter-spacing: 0.18em;
          color: var(--ink);
        }
        .mf-pill-dot {
          width: 7px; height: 7px;
          border-radius: 50%;
          background: var(--petrol-bright);
          box-shadow: 0 0 12px var(--petrol-bright);
          animation: pulse 1.6s infinite;
        }
        .mf-hud-mark {
          position: absolute;
          top: 24px;
          right: 24px;
          font-size: 10px;
          letter-spacing: 0.24em;
          color: var(--ink-2);
          opacity: 0.7;
        }

        .mf-center {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 18px;
          background: radial-gradient(circle at center, rgba(7,23,26,0.15) 0%, rgba(7,23,26,0.55) 100%);
          transition: opacity .25s ease;
        }
        .mf-play {
          width: 96px; height: 96px;
          border-radius: 50%;
          background: var(--petrol);
          color: #07171a;
          border: 0;
          display: grid; place-items: center;
          cursor: pointer;
          box-shadow:
            0 0 0 12px rgba(79, 179, 196, 0.18),
            0 30px 60px -20px rgba(79, 179, 196, 0.5);
          transition: transform .2s ease, box-shadow .25s ease;
        }
        .mf-frame:hover .mf-play {
          transform: scale(1.06);
          box-shadow:
            0 0 0 18px rgba(79, 179, 196, 0.22),
            0 30px 60px -20px rgba(79, 179, 196, 0.6);
        }
        .mf-play svg { margin-left: 4px; }
        .mf-center-cap {
          color: var(--ink);
          opacity: 0.85;
          font-size: 11px;
        }

        .mf-mute {
          position: absolute;
          right: 20px;
          bottom: 20px;
          width: 42px; height: 42px;
          border-radius: 50%;
          background: rgba(7, 23, 26, 0.78);
          color: var(--ink);
          border: 1px solid var(--line-strong);
          display: grid; place-items: center;
          backdrop-filter: blur(10px);
          cursor: pointer;
          transition: background .2s ease, transform .2s ease;
        }
        .mf-mute:hover {
          background: rgba(7, 23, 26, 0.95);
          transform: scale(1.05);
        }

        .mf-chapters {
          display: flex;
          gap: 6px;
          margin-top: 22px;
          overflow-x: auto;
          padding-bottom: 4px;
          scrollbar-width: none;
        }
        .mf-chapters::-webkit-scrollbar { display: none; }
        .mf-chip {
          flex: 1 1 0;
          min-width: 92px;
          padding: 12px 14px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          gap: 4px;
          transition: border-color .25s ease, transform .25s ease;
        }
        .mf-chip:hover {
          border-color: var(--petrol);
          transform: translateY(-2px);
        }
        .mf-chip-num {
          color: var(--peach-deep);
          font-size: 9px;
          letter-spacing: 0.18em;
        }
        .mf-chip-name {
          font-family: var(--font-display);
          font-size: 13px;
          font-weight: 500;
          color: var(--ink);
          letter-spacing: -0.01em;
        }

        @media (max-width: 700px) {
          .mf-chip-name { font-size: 12px; }
          .mf-chapters { gap: 4px; }
          .mf-chip { padding: 10px 10px; min-width: 78px; }
          .mf-hud-mark { display: none; }
          .mf-play { width: 76px; height: 76px; }
        }
      `}</style>
    </section>
  );
}

window.Manifesto = Manifesto;