// =========================================
// BEFORE / AFTER — split cinema (Sem Auditcash vs Com Auditcash)
// =========================================
function BeforeAfter() {
  const t = useT();
  return (
    <Section id="before-after" className="snap-section">
      <FadeIn>
        <div className="ba-head">
          <Eyebrow>{t('ba.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('ba.title.1')} <span className="italic">{t('ba.title.2')}</span> {t('ba.title.3')}</h2>
        </div>
      </FadeIn>

      <FadeIn>
        <figure className="ba-cinema">
          <img
            src="/landing/img/before-after-cinema.jpg"
            alt={t('ba.cinema.alt')}
            width="2400"
            height="1029"
            loading="lazy"
          />
          <span className="ba-cinema-tag left">{t('ba.before')}</span>
          <span className="ba-cinema-tag right">{t('ba.after')}</span>
        </figure>
      </FadeIn>

      <FadeIn>
        <div className="ba-compare">
          <div className="ba-compare-col">
            <div className="ba-side-card danger">
              <div className="ba-side-icon"><Icon.AlertCircle size={20}/></div>
              <div className="ba-side-ttl">{t('ba.side.before.ttl')}</div>
              <div className="ba-side-sub">{t('ba.side.before.sub')}</div>
            </div>
            <div className="ba-side-stats">
              <div><span className="num danger">R$ 220k</span><span className="lab">{t('ba.side.before.stat1')}</span></div>
              <div><span className="num danger">14h</span><span className="lab">{t('ba.side.before.stat2')}</span></div>
              <div><span className="num danger">0%</span><span className="lab">{t('ba.side.before.stat3')}</span></div>
            </div>
          </div>

          <div className="ba-compare-col">
            <div className="ba-side-card success">
              <div className="ba-side-icon"><Icon.Check size={20}/></div>
              <div className="ba-side-ttl">{t('ba.side.after.ttl')}</div>
              <div className="ba-side-sub">{t('ba.side.after.sub')}</div>
            </div>
            <div className="ba-side-stats">
              <div><span className="num success">+R$ 220k</span><span className="lab">{t('ba.side.after.stat1')}</span></div>
              <div><span className="num success">0h</span><span className="lab">{t('ba.side.after.stat2')}</span></div>
              <div><span className="num success">78%</span><span className="lab">{t('ba.side.after.stat3')}</span></div>
            </div>
          </div>
        </div>
      </FadeIn>
    </Section>
  );
}

// =========================================
// COMPARISON TABLE — Auditcash vs Planilha vs Contador
// =========================================
function Comparison() {
  const t = useT();
  const rows = [
    { feat: t('comp.row.detection'), planilha: t('comp.row.detection.spread'), contador: t('comp.row.detection.acc'), auditcash: t('comp.row.detection.ac') },
    { feat: t('comp.row.coverage'), planilha: t('comp.row.coverage.spread'), contador: t('comp.row.coverage.acc'), auditcash: t('comp.row.coverage.ac') },
    { feat: t('comp.row.contest'), planilha: t('comp.row.contest.spread'), contador: t('comp.row.contest.acc'), auditcash: t('comp.row.contest.ac') },
    { feat: t('comp.row.openfin'), planilha: t('comp.row.openfin.spread'), contador: t('comp.row.openfin.acc'), auditcash: t('comp.row.openfin.ac') },
    { feat: t('comp.row.time'), planilha: t('comp.row.time.spread'), contador: t('comp.row.time.acc'), auditcash: t('comp.row.time.ac') },
    { feat: t('comp.row.cost'), planilha: t('comp.row.cost.spread'), contador: t('comp.row.cost.acc'), auditcash: t('comp.row.cost.ac') },
    { feat: t('comp.row.recovery'), planilha: t('comp.row.recovery.spread'), contador: t('comp.row.recovery.acc'), auditcash: t('comp.row.recovery.ac') },
    { feat: t('comp.row.feel'), planilha: '😫 ' + t('comp.row.feel.spread'), contador: '😐 ' + t('comp.row.feel.acc'), auditcash: '😎 ' + t('comp.row.feel.ac') },
  ];

  const tableRef = React.useRef(null);
  const [revealing, setRevealing] = React.useState(false);

  React.useEffect(() => {
    const el = tableRef.current;
    if (!el || typeof IntersectionObserver === 'undefined') { setRevealing(true); return; }
    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setRevealing(true); io.disconnect(); } },
      { threshold: 0.3 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <Section id="comparison" className="snap-section" style={{background:'#fff', borderTop:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)'}}>
      <FadeIn>
        <div className="section-head-ed centered">
          <Eyebrow>{t('comp.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('comp.title.1')} <span className="italic">{t('comp.title.2')}</span></h2>
        </div>
      </FadeIn>
      <FadeIn>
        <div ref={tableRef} className={`comp-table${revealing ? ' is-revealing' : ''}`}>
          <div className="comp-row comp-head">
            <div className="comp-cell-label"></div>
            <div className="comp-cell">{t('comp.head.1')}</div>
            <div className="comp-cell">{t('comp.head.2')}</div>
            <div className="comp-cell featured">
              <span className="brand-tag"><Icon.Spark size={11}/> Auditcash</span>
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="comp-row" style={{'--row-i': i}}>
              <div className="comp-cell-label">{r.feat}</div>
              <div className="comp-cell muted">{r.planilha}</div>
              <div className="comp-cell muted">{r.contador}</div>
              <div className="comp-cell featured">{r.auditcash}</div>
            </div>
          ))}
        </div>
      </FadeIn>
    </Section>
  );
}

window.BeforeAfter = BeforeAfter;
window.Comparison = Comparison;