// Feature panels — long-form, two-column cards. Left side: media (video / image).
// Right side: title + small label + benefits list.
// Inspired by the user's reference image: image-left / dark-right with check bullets.

const { useEffect: useEffectFP, useRef: useRefFP } = React;

const PANELS = [
{
  id: 'timer',
  media: { kind: 'video', src: 'assets/feature-01.mp4', poster: 'assets/feature-01-poster.jpg?v=2' },
  caption: 'Tu ejército crece con cada minuto.',
  label: '01 / Timer',
  title: 'Timer con recompensa',
  body:
  'Programa sesiones de estudio, trabajo, entrenamiento o lo que desees, ' +
  'bloquea aplicaciones distractoras y gana hermosas y poderosas mini figuras de caballeros templarios.',
  bullets: [
  'Recompensa real por cada hora ganada',
  'Cuatro rangos de rareza, 58 personajes únicos',
  'Tu progreso hecho visible',
  'Misiones diarias que mantienen el ritmo']

},
{
  id: 'army',
  media: { kind: 'video', src: 'assets/feature-02.mp4' },
  label: '02 / Ejército',
  title: 'Tu ejército de templarios',
  body:
  'Cada figura ganada se suma a un ejército que crece, gira y brilla en 3D. ' +
  'Tocá cualquier templario para ver su detalle, su rareza y la hora que lo desbloqueó.',
  bullets: [
  '58 personajes únicos en 4 rangos de rareza',
  'Vista 3D interactiva con tu colección entera',
  'Detalle de cada figura: estadísticas y origen',
  'Objetivo del día siempre visible']

},
{
  id: 'biblia',
  media: { kind: 'video', src: 'assets/feature-03.mp4' },
  label: '03 / Biblia',
  title: 'La Palabra, siempre a mano',
  body:
  'Biblia completa integrada con planes de lectura diarios. ' +
  'Amor, emprendimiento, paz, estudios, nuevos en la Fe, ' +
  'elige entre muchas temáticas para acercarte a Él.',
  bullets: [
  'Antiguo y Nuevo Testamento, traducción cuidada',
  'Planes personalizados según tus objetivos',
  'Marca, subraya y guarda versículos sin fricción',
  'Lectura del día siempre lista al abrir la app']

},
{
  id: 'mood',
  media: { kind: 'video', src: 'assets/feature-04.mp4' },
  label: '04 / Humor',
  title: 'REGISTRA TU HUMOR',
  body:
  'Antes de dormir, Balduino te pregunta cómo estuviste. ' +
  'Un toque para registrar tu estado: Puntúa del 1 al 10 como te fue ' +
  'en el día y accede al registro completo y estadísticas.',
  bullets: [
  'Registro de ánimo en menos de 10 segundos',
  'Estadísticas avanzadas diarias, mensuales y anuales',
  'Historial visual de tu mes espiritual',
  'Detecta patrones: cuándo caes, cuándo creces']

},
{
  id: 'todo',
  media: { kind: 'video', src: 'assets/feature-05.mp4' },
  label: '05 / To Do',
  title: 'Tareas con propósito',
  body:
  'No es otro to-do más. Es la lista completa del día — lo que importa, ' +
  'lo que postergas, lo que ofreces. Se integra con tus sesiones de enfoque ' +
  'para que terminar una tarea valga puntos reales.',
  bullets: [
  'Tareas divididas por etiquetas',
  'Cada tarea cumplida suma al progreso de tu Fe',
  'Añade nuevas etiquetas según tus objetivos',
  'Cero culpas: lo no hecho vuelve mañana']

}];


function FeaturePanels() {
  return (
    <section id="features" style={{ padding: '70px 0 80px', position: 'relative' }}>
      <div className="wrap">
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div className="reveal eyebrow"></div>
          <h2 className="reveal d1 h-section" style={{ marginTop: 16 }}>
            Cinco herramientas. <span className="display accent-up">Una sola guerra.</span>
          </h2>
          <p className="reveal d2 lead" style={{ marginTop: 22, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
            Cada minuto que ganas se convierte en algo tangible.
            Cada batalla espiritual tiene una pieza que la representa.
          </p>
        </div>

        <div style={{ marginTop: 50, display: 'flex', flexDirection: 'column', gap: 28 }}>
          {PANELS.map((p, i) =>
          <FeaturePanel key={p.id} panel={p} index={i} />
          )}
        </div>
      </div>
    </section>);

}

function FeaturePanel({ panel, index }) {
  return (
    <article
      className="reveal d1 feature-panel"
      style={{
        display: 'grid',
        gridTemplateColumns: '0.7fr 1fr',
        background: '#000',
        borderRadius: 0,
        overflow: 'hidden',
        border: 'none',
        boxShadow: 'none',
        minHeight: 420
      }}>
      
      {/* LEFT — phone-shaped media panel. Vertical, contained (no crop). */}
      <div style={{
        position: 'relative',
        background: '#000',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingRight: 0,
        minHeight: 520
      }}>
        <div style={{
          position: 'relative',
          width: 'min(240px, 92%)',
          aspectRatio: '9 / 19.5',
          borderRadius: 0,
          overflow: 'hidden',
          background: '#000',
          boxShadow: 'none'
        }}>
          <PanelMedia media={panel.media} />
        </div>
      </div>

      {/* RIGHT — copy, vertically centered */}
      <div style={{
        padding: '42px 44px 42px 32px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        gap: 18,
        position: 'relative'
      }}>
        <span style={{
          fontSize: 11,
          letterSpacing: '.22em',
          textTransform: 'uppercase',
          color: 'var(--muted)',
          fontWeight: 600
        }}>
          {panel.label}
        </span>

        <h3 className="display" style={{
          margin: 0,
          fontSize: 'clamp(28px, 2.4vw, 36px)',
          lineHeight: 1.1,
          letterSpacing: '-.01em',
          color: 'var(--mist)'
        }}>
          {panel.title}
        </h3>

        <p style={{
          margin: 0,
          fontSize: 'clamp(15px, 1.05vw, 16.5px)',
          lineHeight: 1.55,
          color: 'var(--muted)',
          maxWidth: 460
        }}>
          {panel.body}
        </p>

        <ul style={{
          margin: '14px 0 0',
          padding: 0,
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'column',
          gap: 12
        }}>
          {panel.bullets.map((b) =>
          <li key={b} style={{
            display: 'flex',
            gap: 14,
            alignItems: 'flex-start',
            color: 'var(--mist)',
            fontSize: 15,
            lineHeight: 1.4
          }}>
              <span style={{
              flexShrink: 0,
              width: 22, height: 22,
              borderRadius: '50%',
              background: 'rgba(0,214,138,.12)',
              border: '1px solid rgba(0,214,138,.35)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: 1
            }}>
                <svg width="11" height="9" viewBox="0 0 11 9" fill="none">
                  <path d="M1 4.5L4 7.5L10 1.5" stroke="#00d68a" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              <span>{b}</span>
            </li>
          )}
        </ul>
      </div>
    </article>);

}

function PanelMedia({ media }) {
  const ref = useRefFP(null);
  const [ready, setReady] = React.useState(false);

  useEffectFP(() => {
    if (media.kind !== 'video') return;
    const v = ref.current;
    if (!v) return;
    v.muted = true;
    v.defaultMuted = true;
    v.volume = 0;
    const onReady = () => setReady(true);
    if (v.readyState >= 3) onReady();
    v.addEventListener('canplay', onReady);
    v.addEventListener('playing', onReady);
    v.play().catch(() => {});
    const reMute = () => {v.muted = true;v.volume = 0;};
    v.addEventListener('volumechange', reMute);
    return () => {
      v.removeEventListener('volumechange', reMute);
      v.removeEventListener('canplay', onReady);
      v.removeEventListener('playing', onReady);
    };
  }, []);

  if (media.kind === 'video') {
    return (
      <React.Fragment>
        {/* Poster shown immediately so there's no black flash before the video is ready */}
        {media.poster &&
        <img
          src={media.poster}
          alt=""
          aria-hidden="true"
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'contain',
            background: '#000',
            opacity: ready ? 0 : 1,
            transition: 'opacity .4s ease',
            pointerEvents: 'none'
          }} />

        }
        <video
          ref={ref}
          src={media.src}
          poster={media.poster}
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'contain',
            background: '#000',
            display: 'block',
            opacity: ready ? 1 : 0,
            transition: 'opacity .4s ease'
          }} />
        
      </React.Fragment>);

  }
  return (
    <img
      src={media.src}
      alt=""
      style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover'
      }} />);


}

window.FeaturePanels = FeaturePanels;