// =========================================
// PRODUCT CAROUSEL
// =========================================
const { useState: _bs, useEffect: _be, useRef: _br } = React;

function ProductBento() {
  const t = useT();
  const slides = [
    {
      eyebrow: t('product.detect.eyebrow'),
      t: <>{t('product.detect.t1')} <span className="italic">{t('product.detect.t2')}</span></>,
      d: t('product.detect.d'),
      visual: (
        <div className="visual visual-img">
          <img src="/landing/img/product-detect.jpg" alt={t('product.detect.alt')} width="2200" height="1228" loading="lazy" decoding="async"/>
        </div>
      )
    },
    {
      eyebrow: t('product.recon.eyebrow'),
      t: <>{t('product.recon.t1')} <span className="italic">{t('product.recon.t2')}</span></>,
      d: t('product.recon.d'),
      visual: (
        <div className="visual visual-img">
          <img src="/landing/img/product-recon.jpg" alt={t('product.recon.alt')} width="2200" height="1228" loading="lazy" decoding="async"/>
        </div>
      )
    },
    {
      eyebrow: t('product.openfin.eyebrow'),
      t: <>{t('product.openfin.t1')} <span className="italic">{t('product.openfin.t2')}</span> {t('product.openfin.t3')}</>,
      d: t('product.openfin.d'),
      visual: (
        <div className="visual visual-img">
          <img src="/landing/img/product-openfin.jpg" alt={t('product.openfin.alt')} width="2200" height="1228" loading="lazy" decoding="async"/>
        </div>
      )
    },
    {
      eyebrow: t('product.audit.eyebrow'),
      t: <>{t('product.audit.t1')} <span className="italic">{t('product.audit.t2')}</span>{t('product.audit.t3')}</>,
      d: t('product.audit.d'),
      visual: (
        <div className="visual visual-img">
          <img src="/landing/img/product-audit.jpg" alt={t('product.audit.alt')} width="2200" height="1228" loading="lazy" decoding="async"/>
        </div>
      )
    },
    {
      eyebrow: t('product.contest.eyebrow'),
      t: <>{t('product.contest.t1')} <span className="italic">{t('product.contest.t2')}</span></>,
      d: t('product.contest.d'),
      visual: (
        <div className="visual visual-img">
          <img src="/landing/img/product-contest.jpg" alt={t('product.contest.alt')} width="2200" height="1228" loading="lazy" decoding="async"/>
        </div>
      )
    },
  ];

  const [idx, setIdx] = _bs(0);
  const [inView, setInView] = _bs(false);
  const [manualUntil, setManualUntil] = _bs(0);
  const trackRef = _br(null);
  const carouselRef = _br(null);

  // Auto-advance só quando o carrossel está visível no viewport
  _be(() => {
    const el = carouselRef.current;
    if (!el || typeof IntersectionObserver === 'undefined') { setInView(true); return; }
    const io = new IntersectionObserver(
      ([entry]) => setInView(entry.isIntersecting),
      { threshold: 0.35 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  _be(() => {
    if (!inView) return;
    const id = setInterval(() => {
      if (Date.now() < manualUntil) return;
      setIdx(i => (i + 1) % slides.length);
    }, 5000);
    return () => clearInterval(id);
  }, [inView, manualUntil, slides.length]);

  // Pausa breve (10s) após interação manual, depois retoma sozinho
  const pauseManually = () => setManualUntil(Date.now() + 10000);

  const goto = (i) => setIdx((i + slides.length) % slides.length);

  const onKey = (e) => {
    if (e.key === 'ArrowLeft') { e.preventDefault(); goto(idx - 1); pauseManually(); }
    if (e.key === 'ArrowRight') { e.preventDefault(); goto(idx + 1); pauseManually(); }
  };

  return (
    <Section id="product" className="snap-section">
      <FadeIn>
        <div className="section-head-ed">
          <Eyebrow>{t('product.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('product.title.1')} <span className="italic">{t('product.title.2')}</span>{t('product.title.3')}</h2>
        </div>
      </FadeIn>
      <FadeIn>
        <div
          ref={carouselRef}
          className="carousel"
          onKeyDown={onKey}
          tabIndex="0"
          role="region"
          aria-roledescription="carousel"
          aria-label={t('product.aria.label')}
        >
          <button
            className="carousel-arrow prev"
            onClick={() => { goto(idx - 1); pauseManually(); }}
            aria-label={t('product.aria.prev')}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <div className="carousel-stage" ref={trackRef} aria-live="polite">
            <div className="carousel-track" style={{transform: `translateX(-${idx * 100}%)`}}>
              {slides.map((s, i) => (
                <div
                  key={i}
                  className={`carousel-slide ${i === idx ? 'active' : ''}`}
                  aria-hidden={i !== idx}
                  role="group"
                  aria-roledescription="slide"
                  aria-label={`${i+1} / ${slides.length}: ${s.eyebrow}`}
                >
                  <div className="carousel-card">
                    <div className="carousel-card-text">
                      <Eyebrow>{s.eyebrow}</Eyebrow>
                      <div className="carousel-t">{s.t}</div>
                      <div className="carousel-d">{s.d}</div>
                      <div className="carousel-meta">
                        <span className="carousel-counter">{String(i+1).padStart(2,'0')} <span style={{color:'var(--text-tertiary)'}}>/ {String(slides.length).padStart(2,'0')}</span></span>
                      </div>
                    </div>
                    <div className="carousel-card-visual">
                      {s.visual}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <button
            className="carousel-arrow next"
            onClick={() => { goto(idx + 1); pauseManually(); }}
            aria-label={t('product.aria.next')}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
        <div className="carousel-dots" role="tablist">
          {slides.map((s, i) => (
            <button
              key={i}
              className={`carousel-dot ${i === idx ? 'active' : ''}`}
              onClick={() => { goto(i); pauseManually(); }}
              role="tab"
              aria-selected={i === idx}
              aria-label={`Slide ${i+1}: ${s.eyebrow}`}
            >
              <span className="dot-label">{s.eyebrow}</span>
              <span className="dot-progress"></span>
            </button>
          ))}
        </div>
      </FadeIn>
    </Section>
  );
}

// =========================================
// INTEGRATIONS
// =========================================
function Integrations() {
  const t = useT();
  const groups = [
    { ttl:t('integ.group.mp'), sub:t('integ.group.mp.sub'), items:['Mercado Livre','Amazon','Shopee','Magalu','Americanas','Shein','Casas Bahia','Carrefour','VTEX','Olist']},
    { ttl:t('integ.group.erp'), sub:t('integ.group.erp.sub'), items:['Bling','Tiny','Omie','SAP','TOTVS','Linx']},
    { ttl:t('integ.group.bank'), sub:t('integ.group.bank.sub'), items:['Itaú','Bradesco','Santander','Nubank','BTG','Banco do Brasil','Caixa','Inter','C6']},
  ];
  return (
    <Section id="integ" style={{background:'#fff',borderTop:'1px solid var(--border-subtle)',borderBottom:'1px solid var(--border-subtle)'}}>
      <FadeIn>
        <div className="section-head-ed">
          <Eyebrow>{t('integ.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('integ.title.1')} <span className="italic">{t('integ.title.2')}</span>{t('integ.title.3')}</h2>
        </div>
      </FadeIn>
      {groups.map((g, gi) => (
        <FadeIn key={gi} delay={gi*80}>
          <div style={{borderTop:'1px solid var(--border-subtle)',padding:'40px 0',display:'grid',gridTemplateColumns:'minmax(220px, 320px) 1fr',gap:48}}>
            <div>
              <h4 className="h2" style={{fontSize:24,marginBottom:8}}>{g.ttl}</h4>
              <p className="body-m">{g.sub}</p>
            </div>
            <div style={{display:'flex',flexWrap:'wrap',gap:8,alignContent:'flex-start'}}>
              {g.items.map((it) => (
                <div key={it} style={{padding:'10px 16px',background:'var(--bg-canvas)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-pill)',fontSize:14,fontWeight:500,color:'var(--text-secondary)'}}>{it}</div>
              ))}
            </div>
          </div>
        </FadeIn>
      ))}
      <FadeIn>
        <p className="body-m" style={{marginTop:32,textAlign:'center',color:'var(--text-tertiary)'}}>
          {t('integ.footnote.1')} <a href="#cta" style={{color:'var(--brand-700)',fontWeight:500,textDecoration:'underline'}}>{t('integ.footnote.link')}</a> {t('integ.footnote.2')}
        </p>
      </FadeIn>
    </Section>
  );
}

// =========================================
// USE CASES
// =========================================
function UseCases() {
  const t = useT();
  return (
    <Section id="usecases">
      <FadeIn>
        <div className="section-head-ed">
          <Eyebrow>{t('uc.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('uc.title.1')} <span className="italic">{t('uc.title.2')}</span> {t('uc.title.3')}</h2>
        </div>
      </FadeIn>
      <div className="usecase-row">
        <FadeIn><div className="usecase">
          <div className="visual">
            <div className="uc-visual-multi">
              <div className="uc-chip b">Mercado Livre</div>
              <div className="uc-chip">Shopee</div>
              <div className="uc-chip b">Amazon</div>
              <div className="uc-chip">Magalu</div>
              <div className="uc-chip">Shein</div>
            </div>
          </div>
          <div className="num">{t('uc.1.num')}</div>
          <h3>{t('uc.1.h1')} <span className="italic">{t('uc.1.h2')}</span></h3>
          <p>{t('uc.1.p')}</p>
        </div></FadeIn>

        <FadeIn delay={120}><div className="usecase">
          <div className="visual">
            <div className="uc-visual-volume">
              <div className="caption" style={{color:'var(--text-tertiary)'}}>{t('uc.2.gmv.lab')}</div>
              <div className="uc-mega-num">R$ 500k+<span className="sub">{t('uc.2.gmv.sub')}</span></div>
            </div>
          </div>
          <div className="num">{t('uc.2.num')}</div>
          <h3>{t('uc.2.h1')} <span className="italic">{t('uc.2.h2')}</span> {t('uc.2.h3')}</h3>
          <p>{t('uc.2.p.1')} <span className="mono">R$ 500k+</span> {t('uc.2.p.2')} <span className="mono">R$ 5k</span> {t('uc.2.p.3')}</p>
        </div></FadeIn>

        <FadeIn delay={240}><div className="usecase">
          <div className="visual">
            <div className="uc-visual-team">
              <div className="uc-avatar" style={{background:'#2E5BDB'}}>JM</div>
              <div className="uc-avatar" style={{background:'#7BA3F0'}}>CT</div>
              <div className="uc-avatar" style={{background:'#1C3FA8'}}>RA</div>
              <div className="uc-avatar" style={{background:'#0A0F1E'}}>+5</div>
            </div>
          </div>
          <div className="num">{t('uc.3.num')}</div>
          <h3>{t('uc.3.h1')} <span className="italic">{t('uc.3.h2')}</span>{t('uc.3.h3')}</h3>
          <p>{t('uc.3.p')}</p>
        </div></FadeIn>
      </div>
    </Section>
  );
}

window.ProductBento = ProductBento;
window.Integrations = Integrations;
window.UseCases = UseCases;