// Template reutilizable para las 8 sub-páginas /funcionalidades/[categoria]
// Composants exportés sur window:
//   FuncionalidadHero, VideoDemo, FuncionalidadBenefits, FuncionalidadCTA

const FuncionalidadHero = ({ eyebrow = 'Funcionalidad', title, titleAccent, subtitle, cta, compact = false }) => (
  <section style={{ paddingTop: 140, paddingBottom: 24, position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -300, left: '20%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(84,181,227,0.18) 0%, transparent 70%)', filter: 'blur(40px)' }} />
      <div style={{ position: 'absolute', top: -200, right: '15%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(198,156,255,0.18) 0%, transparent 70%)', filter: 'blur(40px)' }} />
    </div>
    <div className="container" style={{ position: 'relative' }}>
      <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto' }}>
        <div className="reveal in" style={{ marginBottom: 28 }}>
          <div className="eyebrow"><span className="eyebrow-dot" />{eyebrow}</div>
        </div>
        <h1 className={`h1 reveal in reveal-delay-1${compact ? ' cb-hero-compact' : ''}`} style={{ marginBottom: 22, textWrap: 'balance', fontSize: 'clamp(36px, 5.2vw, 64px)' }}>
          {title}
          {titleAccent && (
            <>
              {' '}
              <span className="serif" style={{ fontStyle: 'italic' }}>{titleAccent}</span>
            </>
          )}
        </h1>
        {subtitle && (
          <p className="reveal in reveal-delay-2" style={{ fontSize: 18, color: 'var(--fg-soft)', textWrap: 'pretty', maxWidth: 680, margin: '0 auto 28px' }}>
            {subtitle}
          </p>
        )}
        {cta && (
          <div className="reveal in reveal-delay-3" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href={cta.href} className="btn btn-secondary">
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {cta.label}
                <Icon name="arrow" size={14} />
              </span>
            </a>
          </div>
        )}
      </div>
    </div>
  </section>
);

// ────────────────────────────────────────────────────────────
// VideoDemo — placeholder par défaut, vidéo si videoSrc fourni
// ────────────────────────────────────────────────────────────

const VideoDemo = ({ videoSrc, posterSrc, placeholderLabel = 'Vista previa próximamente' }) => {
  const videoRef = React.useRef(null);
  const [started, setStarted] = React.useState(false);

  const handlePlay = () => {
    setStarted(true);
    if (videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  };

  return (
  <section style={{ paddingTop: 16, paddingBottom: 32 }}>
    <div className="container">
      <div
        className="reveal cb-video-demo"
        style={{
          maxWidth: 960,
          margin: '0 auto',
          borderRadius: 16,
          border: '1px solid var(--border)',
          background: 'linear-gradient(135deg, rgba(84,181,227,0.05) 0%, rgba(198,156,255,0.05) 100%), #F3F4F6',
          boxShadow: '0 24px 60px -20px rgba(15,23,42,0.18), 0 1px 2px rgba(0,0,0,0.04)',
          overflow: 'hidden',
          position: 'relative',
        }}
      >
        <div style={{ position: 'relative', width: '100%', paddingTop: '56.25%' }}>
          {videoSrc ? (
            <>
              <video
                ref={videoRef}
                controls={started}
                playsInline
                preload="metadata"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#000' }}
              >
                <source src={videoSrc} type="video/mp4" />
              </video>
              {!started && (
                <button
                  type="button"
                  onClick={handlePlay}
                  aria-label="Reproducir video"
                  style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%',
                    backgroundImage: posterSrc ? `url(${posterSrc})` : 'none',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                    backgroundColor: '#000',
                    border: 'none', padding: 0, margin: 0,
                    cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}
                >
                  <span
                    className="cb-video-play"
                    style={{
                      width: 84, height: 84, borderRadius: '50%',
                      background: 'rgba(10, 10, 10, 0.65)',
                      backdropFilter: 'blur(8px)',
                      WebkitBackdropFilter: 'blur(8px)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 10px 32px rgba(0, 0, 0, 0.35)',
                      transition: 'transform 0.2s ease, background 0.2s ease',
                    }}
                  >
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff" aria-hidden="true" style={{ marginLeft: 4 }}>
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </span>
                </button>
              )}
            </>
          ) : (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              gap: 18, padding: 24, textAlign: 'center',
            }}>
              <div style={{
                width: 76, height: 76, borderRadius: '50%',
                background: 'var(--grad)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 12px 32px -8px rgba(84,181,227,0.45)',
              }}>
                <Icon name="play" size={28} color="#fff" />
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                Demo video
              </div>
              <div style={{ fontSize: 15, color: 'var(--fg-muted)' }}>
                {placeholderLabel}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
    <style>{`
      .cb-video-demo button:hover .cb-video-play {
        transform: scale(1.06);
        background: rgba(10, 10, 10, 0.8);
      }
    `}</style>
  </section>
  );
};

// ────────────────────────────────────────────────────────────
// FuncionalidadBenefits — liste de bénéfices avec checkmark
// ────────────────────────────────────────────────────────────

const FuncionalidadBenefits = ({ eyebrow = 'Lo que incluye', title, titleAccent, subtitle, items = [] }) => {
  const listRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const el = listRef.current;
    if (!el) return;
    const compute = () => {
      const max = el.scrollWidth - el.clientWidth;
      if (max <= 0) { setProgress(0); return; }
      setProgress(Math.max(0, Math.min(1, el.scrollLeft / max)));
    };
    el.addEventListener('scroll', compute, { passive: true });
    window.addEventListener('resize', compute);
    compute();
    return () => {
      el.removeEventListener('scroll', compute);
      window.removeEventListener('resize', compute);
    };
  }, []);

  return (
  <section>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }} className="reveal">
        <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />{eyebrow}</div>
        <h2 className="h2" style={{ marginBottom: 16, textWrap: 'balance' }}>
          {title}
          {titleAccent && (
            <>
              {' '}
              <span className="serif" style={{ fontStyle: 'italic' }}>{titleAccent}</span>
            </>
          )}
        </h2>
        {subtitle && (
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', textWrap: 'pretty' }}>
            {subtitle}
          </p>
        )}
      </div>

      <div ref={listRef} className="reveal cb-funcb-list" style={{ maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 28 }}>
        {items.map((it, i) => (
          <div
            key={i}
            className="cb-funcb-card"
            style={{
              display: 'grid',
              gridTemplateColumns: '44px 1fr',
              gap: 20,
              alignItems: 'flex-start',
              padding: '24px 28px',
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 16,
              transition: 'border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(198,156,255,0.45)';
              e.currentTarget.style.boxShadow = '0 12px 32px -16px rgba(84,181,227,0.25)';
              e.currentTarget.style.transform = 'translateY(-2px)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = 'var(--border)';
              e.currentTarget.style.boxShadow = 'none';
              e.currentTarget.style.transform = 'translateY(0)';
            }}
          >
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'rgba(22, 163, 74, 0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, marginTop: 2,
            }}>
              <Icon name="check" size={18} color="#16a34a" />
            </div>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg)', marginBottom: 6, letterSpacing: '-0.005em' }}>
                {it.title}
              </div>
              <div style={{ fontSize: 15, color: 'var(--fg-soft)', lineHeight: 1.6, textWrap: 'pretty' }}>
                {it.desc}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="cb-funcb-track" aria-hidden="true">
        <div className="cb-funcb-track-fill" style={{ width: `${progress * 100}%` }} />
      </div>
    </div>
    <style>{`
      .cb-funcb-track { display: none; }
      @media (max-width: 760px) {
        .cb-funcb-list {
          flex-direction: row !important;
          align-items: stretch;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          gap: 14px !important;
          margin: 0 -16px;
          padding: 4px 16px 8px;
          scroll-padding-left: 16px;
          scrollbar-width: none;
          max-width: none !important;
          overscroll-behavior-x: contain;
        }
        .cb-funcb-list::-webkit-scrollbar { display: none; }
        .cb-funcb-card {
          flex: 0 0 calc(100% - 48px) !important;
          scroll-snap-align: start;
          scroll-snap-stop: always;
          grid-template-columns: 1fr !important;
          gap: 8px !important;
          padding: 28px 24px !important;
        }
        /* Add breathing room between title (1st div in 2nd column) and description (2nd div) */
        .cb-funcb-card > div:last-child > div:first-child {
          margin-bottom: 14px !important;
        }
        .cb-funcb-track {
          display: block !important;
          position: relative;
          height: 3px;
          background: var(--border);
          border-radius: 999px;
          margin: 18px 24px 0;
          overflow: hidden;
          max-width: 820px;
          margin-left: auto;
          margin-right: auto;
        }
        .cb-funcb-track-fill {
          position: absolute;
          top: 0; left: 0; bottom: 0;
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          border-radius: 999px;
          transition: width 0.12s linear;
          box-shadow: 0 0 8px rgba(198, 156, 255, 0.4);
        }
      }
    `}</style>
  </section>
  );
};

// ────────────────────────────────────────────────────────────
// FuncionalidadCTA — bloc CTA final renvoyant vers /precios
// ────────────────────────────────────────────────────────────

const FuncionalidadCTA = ({ eyebrow = '¿Listo para empezar?', title, titleAccent, subtitle, cta }) => (
  <section>
    <div className="container">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }} className="reveal">
        <div className="eyebrow" style={{ marginBottom: 22 }}><span className="eyebrow-dot" />{eyebrow}</div>
        <h2 className="h2" style={{ marginBottom: 18, textWrap: 'balance' }}>
          {title}
          {titleAccent && (
            <>
              {' '}
              <span className="serif" style={{ fontStyle: 'italic' }}>{titleAccent}</span>
            </>
          )}
        </h2>
        {subtitle && (
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', textWrap: 'pretty', marginBottom: 36, maxWidth: 580, margin: '0 auto 36px' }}>
            {subtitle}
          </p>
        )}
        {cta && (
          <a href={cta.href} className="btn btn-grad btn-lg">
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {cta.label}
              <Icon name="arrow" size={15} />
            </span>
          </a>
        )}
      </div>
    </div>
  </section>
);

window.FuncionalidadHero = FuncionalidadHero;
window.VideoDemo = VideoDemo;
window.FuncionalidadBenefits = FuncionalidadBenefits;
window.FuncionalidadCTA = FuncionalidadCTA;