/* 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 placeholder
// =============================================================
function Demo() {
  useLangProof();
  const t = window.t || ((k) => k);
  return (
    <section className="demo tone-light" id="demo">
      <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">
            <div className="mockup-placeholder demo-video">
              <button className="demo-play" aria-label={t('demo_play')}>
                <span className="dp-bg"></span>
                <span className="dp-icon">▶</span>
              </button>
              <span className="mp-label demo-label">{t('demo_label')}</span>
            </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;