/* global React */

function useLangProof() {
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(x => x + 1);
    window.addEventListener('limify-lang-changed', h);
    return () => window.removeEventListener('limify-lang-changed', h);
  }, []);
  return (typeof window !== 'undefined' && window.LIMIFY_LANG) || 'pt';
}

// =============================================================
// PROBLEMS. Antes vs Depois
// =============================================================
function Problems() {
  useLangProof();
  const t = window.t || ((k) => k);
  const rows = [
    { before: t('problems_row1_b'), after: t('problems_row1_a') },
    { before: t('problems_row2_b'), after: t('problems_row2_a') },
    { before: t('problems_row3_b'), after: t('problems_row3_a') },
    { before: t('problems_row4_b'), after: t('problems_row4_a') },
  ];

  return (
    <section className="problems tone-light" id="problemas">
      <div className="container">
        <div className="problems-head">
          <span className="eyebrow">{t('problems_eyebrow')}</span>
          <h2 className="mt-16">
            {t('problems_title_1')} <br />
            <span className="grad-text">{t('problems_title_2')}</span>
          </h2>
          <p className="problems-sub mt-20">{t('problems_sub')}</p>
        </div>

        <div className="prb-stage mt-72">
          <div className="prb-axis">
            <div className="prb-axis-cell prb-axis-cell--before">
              <span className="prb-axis-dot prb-axis-dot--bad"></span>
              <span className="prb-axis-label">{t('problems_axis_before')}</span>
            </div>
            <div className="prb-axis-arrow" aria-hidden="true"></div>
            <div className="prb-axis-cell prb-axis-cell--after">
              <span className="prb-axis-dot prb-axis-dot--good"></span>
              <span className="prb-axis-label prb-axis-label--brand">{t('problems_axis_after')}</span>
            </div>
          </div>

          <div className="prb-rows">
            {rows.map((r, i) => (
              <div className="prb-row" key={i}>
                <div className="prb-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="prb-before">
                  <span className="prb-strike">{r.before}</span>
                </div>
                <div className="prb-arrow" aria-hidden="true">
                  <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
                    <path d="M1 7h17M13 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <div className="prb-after">{r.after}</div>
              </div>
            ))}
          </div>

          <div className="prb-foot">
            <div className="prb-foot-stat">
              <span className="prb-foot-num">{t('problems_foot1_v')}</span>
              <span className="prb-foot-lbl">{t('problems_foot1_l')}</span>
            </div>
            <div className="prb-foot-stat">
              <span className="prb-foot-num">{t('problems_foot2_v')}</span>
              <span className="prb-foot-lbl">{t('problems_foot2_l')}</span>
            </div>
            <div className="prb-foot-stat">
              <span className="prb-foot-num">{t('problems_foot3_v')}</span>
              <span className="prb-foot-lbl">{t('problems_foot3_l')}</span>
            </div>
            <div className="prb-foot-stat">
              <span className="prb-foot-num">{t('problems_foot4_v')}</span>
              <span className="prb-foot-lbl">{t('problems_foot4_l')}</span>
            </div>
          </div>
        </div>

        <div className="center mt-48">
          <a href="https://app.limify.pro/signup" className="btn btn-primary">{t('problems_cta')}</a>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// DEMO — vídeo rodando mudo no fundo; "Assistir" recomeça com áudio
// =============================================================
const IconPlay = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>
);
const IconPause = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg>
);
const IconVolume = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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>
);
const IconMute = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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.18v2.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>
);

function Demo() {
  useLangProof();
  const t = window.t || ((k) => k);
  const videoRef = React.useRef(null);
  const sectionRef = React.useRef(null);
  const [watching, setWatching] = React.useState(false);
  const [paused, setPaused] = React.useState(false);
  const [muted, setMuted] = React.useState(true);
  const [volume, setVolume] = React.useState(1);

  // Teaser mudo: toca em loop quando a seção entra na viewport (respeita reduced-motion)
  React.useEffect(() => {
    const v = videoRef.current;
    const sec = sectionRef.current;
    if (!v || !sec || !("IntersectionObserver" in window)) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          if (!watching && !reduce) {
            v.muted = true;
            v.loop = true;
            v.play().catch(() => {});
          }
        } else {
          v.pause();
          if (watching) setPaused(true);
        }
      });
    }, { threshold: 0.4 });
    io.observe(sec);
    return () => io.disconnect();
  }, [watching]);

  const handleWatch = () => {
    const v = videoRef.current;
    if (!v) return;
    v.currentTime = 0;
    v.muted = false;
    v.volume = volume;
    v.loop = false;
    v.play().catch(() => {});
    setMuted(false);
    setPaused(false);
    setWatching(true);
  };

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

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

  const onVolume = (e) => {
    const v = videoRef.current;
    if (!v) return;
    const val = Number(e.target.value);
    setVolume(val);
    v.volume = val;
    const m = val === 0;
    v.muted = m;
    setMuted(m);
  };

  const handleEnded = () => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.loop = true;
    v.currentTime = 0;
    v.play().catch(() => {});
    setMuted(true);
    setPaused(false);
    setWatching(false);
  };

  return (
    <section className="demo tone-light" id="demo" ref={sectionRef}>
      <div className="container">
        <div className="demo-head center">
          <span className="eyebrow">{t('demo_eyebrow')}</span>
          <h2 className="mt-16">
            {t('demo_title_1')} <span className="grad-text">{t('demo_title_2')}</span>
          </h2>
          <p className="lead mt-24" style={{ margin: "24px auto 0" }}>{t('demo_lead')}</p>
        </div>

        <div className="demo-stage mt-48">
          <div className={"demo-frame" + (watching ? " is-watching" : "")}>
            <video
              ref={videoRef}
              className="demo-video"
              src="/assets/limify-demo.mp4"
              poster="/assets/demo-poster.jpg"
              preload="metadata"
              muted
              loop
              playsInline
              disablePictureInPicture
              controlsList="nodownload nofullscreen noremoteplayback"
              onContextMenu={(e) => e.preventDefault()}
              onClick={watching ? togglePlay : handleWatch}
              onEnded={handleEnded}
            ></video>

            {!watching && (
              <button className="demo-watch" onClick={handleWatch} aria-label={t('demo_watch')}>
                <span className="dw-label">{t('demo_watch')}</span>
                <span className="dw-play"><IconPlay /></span>
              </button>
            )}

            {watching && (
              <div className="demo-controls">
                {/* Sem botão de play: tocar no vídeo já dá play/pause (onClick acima).
                    Volume: botão (mute) + slider pra ajustar o nível. */}
                <button className="dc-btn" onClick={toggleMute} aria-label={muted ? t('demo_unmute') : t('demo_mute')}>
                  {muted ? <IconMute /> : <IconVolume />}
                </button>
                <input className="dc-vol" type="range" min="0" max="1" step="0.05" value={muted ? 0 : volume} onChange={onVolume} aria-label="Volume" />
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// SOCIAL PROOF, depoimentos dentro de células de grid tracejado
// =============================================================
function SocialProof() {
  useLangProof();
  const t = window.t || ((k) => k);
  // 12 testimonials com tamanhos bem variados (curtos + medios + longos)
  // pra dar a sensacao de tijolo organico do Relume.
  // pravatar.cc gera foto consistente a partir do seed.
  // Ordem deliberada: alterna tamanhos pra distribuir bem nas colunas.
  const quotes = [
    { name: "Rafael Brito",     role: t('tq_1_role'),  seed: "limify-rafael-1",  body: t('tq_1')  },
    { name: "Yoni Belson",      role: t('tq_2_role'),  seed: "limify-yoni-2",    body: t('tq_2')  },  // curto
    { name: "Marina Costa",     role: t('tq_7_role'),  seed: "limify-marina-7",  body: t('tq_7')  },  // longo
    { name: "Pedro Almeida",    role: t('tq_8_role'),  seed: "limify-pedro-8",   body: t('tq_8')  },  // muito curto
    { name: "Joel Mendes",      role: t('tq_3_role'),  seed: "limify-joel-3",    body: t('tq_3')  },
    { name: "Carlos Tavares",   role: t('tq_9_role'),  seed: "limify-carlos-9",  body: t('tq_9')  },  // longo
    { name: "Steve Radabaugh",  role: t('tq_5_role'),  seed: "limify-steve-5",   body: t('tq_5')  },
    { name: "Bianca Rocha",     role: t('tq_10_role'), seed: "limify-bianca-10", body: t('tq_10') },  // muito curto
    { name: "Valentina Nunes",  role: t('tq_4_role'),  seed: "limify-valent-4",  body: t('tq_4')  },
    { name: "Luiza Fernandes",  role: t('tq_11_role'), seed: "limify-luiza-11",  body: t('tq_11') },  // medio
    { name: "Wilco de Kreij",   role: t('tq_6_role'),  seed: "limify-wilco-6",   body: t('tq_6')  },
    { name: "Ricardo Mendes",   role: t('tq_12_role'), seed: "limify-ricardo-12", body: t('tq_12') }, // medio
  ];

  // Avatar row do topo, 7 fotos pequenas sobrepostas (estilo Relume)
  const stackSeeds = ["av-a","av-b","av-c","av-d","av-e","av-f","av-g"];

  return (
    <section className="social tone-light">
      <div className="container">
        <div className="social-head center">
          <div className="t-avatars-row">
            <div className="t-avatars-stack" aria-hidden="true">
              {stackSeeds.map(s => (
                <img
                  key={s}
                  src={`https://i.pravatar.cc/64?u=limify-stack-${s}`}
                  alt=""
                  loading="lazy"
                  decoding="async"
                  width="36"
                  height="36"
                />
              ))}
            </div>
            <p className="t-avatars-caption">{t('social_caption')}</p>
          </div>

          <h2 className="mt-24">
            {t('social_title_1')} <span className="grad-text">{t('social_title_brand')}</span><br />
            {t('social_title_2')}
          </h2>
          <p className="lead mt-24">{t('social_lead')}</p>
        </div>
      </div>

      <div className="tcards-wrap mt-64">
        <div className="tcards">
          {quotes.map((q, i) => (
            <article className="tcard" key={i}>
              <p className="tcard-body">{q.body}</p>
              <div className="tcard-foot">
                <img
                  className="tcard-photo"
                  src={`https://i.pravatar.cc/96?u=${q.seed}`}
                  alt={q.name}
                  loading="lazy"
                  decoding="async"
                  width="40"
                  height="40"
                />
                <div className="tcard-id">
                  <div className="tcard-name">{q.name}</div>
                  <div className="tcard-role">{q.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Problems = Problems;
window.Demo = Demo;
window.SocialProof = SocialProof;