// Resultados.jsx — Carrosseis Infinitos
const { useRef: useResRef, useEffect: useResEff, useState: useResSt } = React;

/* ── Animated counter ── */
function useCounter(target, duration = 1600) {
  const [val, setVal] = useResSt(0);
  const [started, setStarted] = useResSt(false);
  useResEff(() => {
    if (!started) return;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(ease * target));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [started]);
  return [val, () => setStarted(true)];
}

function CounterStat({ target, suffix = '', label, trigger }) {
  const [val, start] = useCounter(target);
  useResEff(() => { if (trigger) start(); }, [trigger]);
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,3.5vw,48px)',
        fontWeight: 800, color: 'var(--accent)', letterSpacing: '-0.03em', lineHeight: 1,
      }}>{val}{suffix}</div>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: '#9a8a8e', marginTop: 8,
      }}>{label}</div>
    </div>
  );
}

/* ── Card Antes/Depois ── */
function CardAntesDep({ n }) {
  return (
    <div className="card-antes-depois">
      <div className="card-foto-wrapper">
        <div className="card-labels">
          <span className="label-antes">ANTES</span>
          <span className="label-depois">DEPOIS ✦</span>
        </div>
        <div className="card-foto-antes">
          <div style={{ textAlign: 'center' }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style={{ opacity: .3, marginBottom: 6, display: 'block', margin: '0 auto 6px' }}>
              <rect x="2" y="2" width="20" height="20" rx="3" stroke="#9a8a8e" strokeWidth="1.5"/>
              <circle cx="9" cy="9" r="2.5" stroke="#9a8a8e" strokeWidth="1.5"/>
              <path d="M2 17l5-4 4 3.5 3.5-2.5L22 18" stroke="#9a8a8e" strokeWidth="1.5" strokeLinejoin="round"/>
            </svg>
            [FOTO ANTES {n}]
          </div>
        </div>
        <div className="card-foto-depois">
          <div style={{ textAlign: 'center' }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style={{ opacity: .5, marginBottom: 6, display: 'block', margin: '0 auto 6px' }}>
              <rect x="2" y="2" width="20" height="20" rx="3" stroke="#D97B96" strokeWidth="1.5"/>
              <circle cx="9" cy="9" r="2.5" stroke="#D97B96" strokeWidth="1.5"/>
              <path d="M2 17l5-4 4 3.5 3.5-2.5L22 18" stroke="#D97B96" strokeWidth="1.5" strokeLinejoin="round"/>
            </svg>
            [FOTO DEPOIS {n}]
          </div>
        </div>
      </div>
      <div className="card-info">
        <div className="card-nome">[NOME ALUNA {n}]</div>
        <div className="card-resultado">[RESULTADO {n}]</div>
      </div>
    </div>
  );
}

/* ── Card Depoimento ── */
function CardDepo({ n }) {
  return (
    <div className="card-depoimento">
      <span className="aspas">❝</span>
      <div className="texto">
        "[DEPOIMENTO {n} — ex: Com o método da Taty mudei meu corpo e minha rotina de vez. É diferente de tudo que já tentei.]"
      </div>
      <div className="footer-depo">
        <div className="avatar-depo">[F{n}]</div>
        <div className="depo-info">
          <span className="depo-nome">[NOME ALUNA {n}]</span>
          <span className="depo-tag">[SERVIÇO {n}]</span>
        </div>
        <span className="depo-stars">★★★★★</span>
      </div>
    </div>
  );
}

/* ── Card Print ── */
function CardPrint({ n }) {
  return (
    <div className="card-print">
      <div style={{ textAlign: 'center' }}>
        <div style={{ marginBottom: 6 }}>
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" style={{ opacity: .4, display: 'block', margin: '0 auto' }}>
            <rect x="2" y="5" width="24" height="18" rx="3" stroke="#9a8a8e" strokeWidth="1.5"/>
            <path d="M6 10h10M6 14h7M6 18h4" stroke="#9a8a8e" strokeWidth="1.2" strokeLinecap="round"/>
          </svg>
        </div>
        [PRINT MENSAGEM {n}]
      </div>
    </div>
  );
}

/* ── Carrossel 1 — Antes/Depois ── */
function CarrosselAntesDep() {
  const cards = [1, 2, 3, 4, 5];
  const allCards = [...cards, ...cards]; // duplicar para loop

  return (
    <div className="carousel-antes-depois">
      <div className="carousel-track" id="track-antes-depois">
        {allCards.map((n, i) => <CardAntesDep key={i} n={n} />)}
      </div>
    </div>
  );
}

/* ── Carrossel 2 — Depoimentos & Prints ── */
function CarrosselDepo() {
  const items = [
    <CardDepo key="d1" n={1} />,
    <CardPrint key="p1" n={1} />,
    <CardDepo key="d2" n={2} />,
    <CardPrint key="p2" n={2} />,
    <CardDepo key="d3" n={3} />,
    <CardPrint key="p3" n={3} />,
  ];
  const allItems = [...items.map((el, i) => React.cloneElement(el, { key: 'a' + i })),
                    ...items.map((el, i) => React.cloneElement(el, { key: 'b' + i }))];

  return (
    <div className="carousel-depoimentos">
      <div className="carousel-track carousel-track-inv">
        {allItems}
      </div>
    </div>
  );
}

/* ── Main section ── */
function Resultados() {
  const ref = useResRef();
  const [counterTrigger, setCounterTrigger] = useResSt(false);
  useReveal(ref);

  useResEff(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setCounterTrigger(true); obs.disconnect(); }
    }, { threshold: 0.15 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="resultados-section" ref={ref} id="resultados">
      <div className="container">

        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <p className="eyebrow reveal">Resultados reais de mulheres reais</p>
          <h2 className="section-title reveal rev-d1" style={{ maxWidth: 560, margin: '12px auto 0' }}>
            Quando o método é certo,<br />o corpo <em>responde.</em>
          </h2>
          <p className="reveal rev-d2" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase',
            color: '#9a8a8e', marginTop: 16,
          }}>
            Antes &amp; Depois · Depoimentos · Prints
          </p>
        </div>

        {/* Contador */}
        <div className="reveal rev-d2" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0,1fr))',
          gap: 'clamp(20px,3vw,40px)',
          background: 'var(--blush)',
          borderRadius: 'var(--r-xl)',
          padding: 'clamp(28px,3.5vw,48px)',
          marginBottom: 'clamp(40px,5vw,64px)',
          border: '1px solid rgba(217,123,150,0.15)',
        }}>
          <CounterStat target={500} suffix="+" label="Mulheres transformadas" trigger={counterTrigger} />
          <CounterStat target={3} suffix="+" label="Países atendidos" trigger={counterTrigger} />
          <CounterStat target={10} suffix="+" label="Anos de método" trigger={counterTrigger} />
        </div>

      </div>

      {/* Carrossel 1 — full bleed */}
      <div style={{ marginBottom: 48 }}>
        <CarrosselAntesDep />
      </div>

      {/* Frase de impacto */}
      <div className="container">
        <div className="reveal" style={{
          textAlign: 'center',
          padding: 'clamp(32px,4vw,56px) clamp(24px,4vw,64px)',
          marginBottom: 48,
        }}>
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 'clamp(18px,2.2vw,28px)', color: 'var(--rose-dark)', lineHeight: 1.5,
          }}>
            "Você não precisa tentar mais uma vez.<br />
            Você precisa fazer <em style={{ fontStyle: 'normal', fontWeight: 600, color: 'var(--accent)' }}>diferente.</em>"
          </p>
          <p style={{ marginTop: 12, fontSize: 12, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9a8a8e' }}>
            — Taty Vaillant
          </p>
        </div>
      </div>

      {/* Carrossel 2 — full bleed */}
      <div style={{ marginBottom: 48 }}>
        <CarrosselDepo />
      </div>

      {/* CTA final */}
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', paddingTop: 8 }}>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(20px,2.5vw,30px)', letterSpacing: '-0.02em',
            marginBottom: 24, color: 'var(--charcoal)',
          }}>Pronta para escrever o seu resultado?</p>
          <a
            href="https://wa.me/message/SAIETGHLRZR2N1"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-p"
            style={{ fontSize: 16, padding: '16px 40px', textDecoration: 'none', display: 'inline-flex' }}
          >
            Quero me destravar agora →
          </a>
          <p style={{ marginTop: 16, fontSize: 13, color: '#9a8a8e' }}>
            Vagas limitadas · Atendimento via WhatsApp
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Resultados });