/* sections-bruno.jsx — Bruno case (about-style layout with video) + testimonials grid */

const BRUNO_LEFT = [
  {
    icon: "target",
    title: "Vocabulário executivo",
    text: "Não estudamos inglês genérico. Construímos o vocabulário específico de produto, mercado e liderança que o Bruno usava todo dia.",
  },
  {
    icon: "chat",
    title: "Reuniões reais",
    text: "Treinamos com as situações que ele de fato enfrentava — reuniões com stakeholders globais, pitches internos, conversas difíceis.",
  },
  {
    icon: "clipboard",
    title: "Business cases",
    text: "Montamos cases e apresentações em inglês. O idioma deixou de ser barreira e virou ferramenta de demonstração de competência.",
  },
];

const BRUNO_RIGHT = [
  {
    icon: "rocket",
    title: "Discurso técnico",
    text: "Discussões técnicas do mercado dele, com a mesma profundidade que ele já tinha em português. Sem simplificar, sem infantilizar.",
  },
  {
    icon: "star",
    title: "Confiança em palco",
    text: "Preparação focada em apresentar para audiência grande — respiração, ritmo, recuperação de erro. Palco é técnica.",
  },
  {
    icon: "check",
    title: "Liderança bilíngue",
    text: "O resultado: o mesmo nível profissional, nos dois idiomas. Bruno saiu melhor não só como falante de inglês — saiu melhor como profissional.",
  },
];

const BRUNO_STATS = [
  { value: 6, suffix: "", label: "meses até reuniões com confiança" },
  { value: 12, suffix: "", label: "meses até palco global em Atlanta" },
  { value: 500, suffix: "", label: "pessoas presencialmente na plateia" },
  { value: 5000, suffix: "", label: "acompanhando ao vivo no mundo" },
];

const YT_BRUNO_ID = "rn_niemfx7c";

function useCountUp(target, start, duration = 1600) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!start) { setN(0); return; }
    let raf, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.floor(eased * target));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, start, duration]);
  return n;
}

function useInView(ref, { threshold = 0.25 } = {}) {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, threshold, seen]);
  return seen;
}

function BrunoFeature({ icon, title, text, dir }) {
  return (
    <div className={"bruno-feat bruno-feat--" + dir}>
      <div className="bruno-feat__head">
        <span className="bruno-feat__icon"><Icon name={icon} /></span>
        <h3 className="bruno-feat__title">{title}</h3>
      </div>
      <p className="bruno-feat__text">{text}</p>
    </div>
  );
}

function BrunoStat({ value, suffix, label, active, delay }) {
  const n = useCountUp(value, active);
  return (
    <div className="bruno-stat" style={{ transitionDelay: delay + "ms" }}>
      <div className="bruno-stat__value">
        {n.toLocaleString("pt-BR")}{suffix}
      </div>
      <div className="bruno-stat__label">{label}</div>
      <div className="bruno-stat__rule" />
    </div>
  );
}

function BrunoCase() {
  const statsRef = React.useRef(null);
  const inView = useInView(statsRef, { threshold: 0.35 });

  return (
    <section className="section section-bruno" id="case">
      <div className="bruno-bg bruno-bg--a" />
      <div className="bruno-bg bruno-bg--b" />
      <div className="bruno-dot bruno-dot--a" />
      <div className="bruno-dot bruno-dot--b" />

      <div className="container bruno-wrap">
        <div className="bruno-intro reveal">
          <span className="bruno-kicker"><Icon name="spark" /> CASE REAL · BRUNO</span>
          <h2 className="bruno-h2">De travar em reunião a <em>palco global</em>, em 1 ano.</h2>
          <span className="bruno-rule" />
          <p className="bruno-lede">
            CPO da Equifax. Chegou sabendo falar algumas coisas, mas travava onde mais
            importava. Em 12 meses, apresentou para 500 pessoas em Atlanta — e foi elogiado pela CPO global.
          </p>
        </div>

        <figure className="bruno-pull reveal">
          <blockquote>
            Se eu precisasse desligar agora e começar uma reunião em inglês, eu estaria pronto.
            Há um ano isso era impensável.
          </blockquote>
          <figcaption>— Bruno Gonzales, CPO da Equifax · dezembro/2024</figcaption>
        </figure>

        <div className="bruno-grid">
          <div className="bruno-col">
            {BRUNO_LEFT.map((f, i) => (
              <BrunoFeature key={i} {...f} dir="left" />
            ))}
          </div>

          <div className="bruno-center">
            <div className="bruno-video">
              <div className="bruno-video__frame">
                <iframe
                  src={"https://www.youtube-nocookie.com/embed/" + YT_BRUNO_ID + "?rel=0&modestbranding=1"}
                  title="Case Bruno — CEO Fluente"
                  loading="lazy"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                />
              </div>
              <div className="bruno-video__ring" />
              <div className="bruno-video__blob bruno-video__blob--a" />
              <div className="bruno-video__blob bruno-video__blob--b" />
              <div className="bruno-video__pip bruno-video__pip--top" />
              <div className="bruno-video__pip bruno-video__pip--bot" />
            </div>
            <div className="bruno-person bruno-person--center">
              <div className="av">B</div>
              <div className="meta">
                <div className="nm">Bruno</div>
                <div className="rl">CPO · Equifax</div>
              </div>
            </div>
          </div>

          <div className="bruno-col">
            {BRUNO_RIGHT.map((f, i) => (
              <BrunoFeature key={i} {...f} dir="right" />
            ))}
          </div>
        </div>

        <div className="bruno-stats" ref={statsRef}>
          {BRUNO_STATS.map((s, i) => (
            <BrunoStat key={i} {...s} active={inView} delay={i * 90} />
          ))}
        </div>

        <div className="bruno-cta-card reveal">
          <div className="bruno-cta-card__copy">
            <h3>Pronto para esse tipo de resultado?</h3>
            <p>Diagnóstico de 30min + mini-mapa de gaps por e-mail em 24h. <b>Sem custo.</b></p>
          </div>
          <a className="btn btn-primary btn-lg" href={CTA_URL} target="_blank" rel="noopener">
            Agendar meu diagnóstico <Icon name="arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

function TestimonialCard({ t, i }) {
  const [active, setActive] = React.useState(false);
  return (
    <div className="tcard reveal">
      <div className={"thumb thumb--yt" + (active ? " is-active" : "")} onClick={() => setActive(true)}>
        {active ? (
          <iframe
            src={"https://www.youtube-nocookie.com/embed/" + t.youtubeId + "?autoplay=1&rel=0&modestbranding=1&playsinline=1"}
            title={"Depoimento — " + t.nm}
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
          />
        ) : (
          <React.Fragment>
            <img
              src={"https://i.ytimg.com/vi/" + t.youtubeId + "/hqdefault.jpg"}
              alt={"Depoimento de " + t.nm}
              loading="lazy"
            />
            <div className="thumb__veil" />
            <div className="play"><Icon name="play" /></div>
          </React.Fragment>
        )}
      </div>
      <div className="body">
        <p className="quote">"{t.q}"</p>
        <div className="who">
          <div>
            <div className="nm">{t.nm}</div>
            <div className="rl">{t.rl}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  return (
    <section className="section section-testimonials" id="depoimentos">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", margin: "0 auto" }}>
          <span className="eyebrow">Não foi só o Bruno</span>
          <h2 className="section-title">Quem já lidera em inglês com o CEO Fluente.</h2>
          <p className="section-lede">Profissionais que estavam onde você está — e hoje conduzem reuniões, lideram squads internacionais e apresentam em palco global.</p>
        </div>
        <div className="tg">
          {TESTIMONIALS.map((t, i) => (
            <TestimonialCard t={t} i={i} key={t.youtubeId} />
          ))}
        </div>
        <div className="reveal" style={{ textAlign: "center", marginTop: 40 }}>
          <a className="btn-link" href={CTA_URL} target="_blank" rel="noopener" style={{ fontSize: 18 }}>
            Pronto para o seu caso? <Icon name="arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BrunoCase, Testimonials });