// =========================================
// PAIN — Editorial split with live divergence card
// =========================================
function Pain() {
  const t = useT();
  return (
    <Section id="pain" style={{paddingTop:120}}>
      <div className="pain-hero">
        <FadeIn>
          <div className="pain-hero-text">
            <Eyebrow>{t('pain.eyebrow')}</Eyebrow>
            <h2 className="display-section">
              {t('pain.title.1')} <span className="italic">{t('pain.title.2')}</span> {t('pain.title.3')}<br/>
              <span className="accent">{t('pain.title.4')}</span>
            </h2>
            <p className="lead">{t('pain.lead')}</p>
            <div className="pain-cta-row">
              <a href="#cta" className="btn btn-primary lg">{t('pain.cta')} <Icon.ArrowRight size={16}/></a>
              <span className="pain-cta-meta">{t('pain.cta.meta')}</span>
            </div>
          </div>
        </FadeIn>
        <FadeIn delay={120}>
          <div className="divergence-mockup">
            <div className="div-mockup-head">
              <div className="left">
                <div className="icon-box"><Icon.AlertCircle size={18}/></div>
                <div>
                  <div className="ttl">{t('pain.div.ttl')}</div>
                  <div className="sub">#ML-8842371 · iPhone 15 256GB</div>
                </div>
              </div>
              <div className="status-badge status-danger"><span className="dot"></span>{t('pain.div.status.critical')}</div>
            </div>

            <div className="div-diff">
              <div className="div-diff-side expected">
                <div className="lab">{t('pain.div.expected')}</div>
                <div className="val">R$ 1.247,00</div>
              </div>
              <div className="div-diff-arrow">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
              </div>
              <div className="div-diff-side actual">
                <div className="lab">{t('pain.div.charged')}</div>
                <div className="val">R$ 1.659,80</div>
              </div>
            </div>

            <div className="contest-detail" style={{marginTop:0}}>
              <div className="contest-detail-row"><span className="l">{t('pain.div.row.category')}</span><span className="v">{t('pain.div.row.category.val')}</span></div>
              <div className="contest-detail-row"><span className="l">{t('pain.div.row.rate')}</span><span className="v">{t('pain.div.row.rate.val')}</span></div>
              <div className="contest-detail-row"><span className="l">{t('pain.div.row.applied')}</span><span className="v" style={{color:'var(--danger-700)'}}>{t('pain.div.row.applied.val')}</span></div>
              <div className="contest-detail-row"><span className="l">{t('pain.div.row.recur')}</span><span className="v">{t('pain.div.row.recur.val')}</span></div>
            </div>

            <div className="div-actions">
              <div className="meta">
                <div className="lab">{t('pain.div.impact')}</div>
                <div className="val">R$ 4.540,80</div>
              </div>
              <a href="/signup" className="contest-btn">{t('pain.div.contest.btn')} <Icon.ArrowRight size={14}/></a>
            </div>
          </div>
        </FadeIn>
      </div>
    </Section>
  );
}

// =========================================
// HOW IT WORKS — Vertical timeline w/ real UI per step
// =========================================
function StepConnect() {
  const t = useT();
  const banks = [
    { name: 'Mercado Livre', acct: 'CNPJ · 12.345.678/0001-90', logo:'ML', bg:'#FFE600', color:'#000' },
    { name: 'Shopee', acct: 'CNPJ · 12.345.678/0001-90', logo:'SH', bg:'#EE4D2D', color:'#fff' },
    { name: 'Amazon', acct: 'CNPJ · 12.345.678/0001-90', logo:'AM', bg:'#FF9900', color:'#000' },
    { name: t('connect.bank.itau'), acct: 'Ag 1234 · CC 56789-0', logo:'IT', bg:'#EC7000', color:'#fff' },
  ];
  return (
    <div className="connect-card">
      <div className="connect-head">
        <div className="icon-box"><Icon.Lock size={16}/></div>
        <div>
          <div className="ttl">{t('connect.ttl')}</div>
          <div className="sub">{t('connect.sub')}</div>
        </div>
      </div>
      <div className="connect-list">
        {banks.map((b, i) => (
          <div key={i} className="connect-item">
            <div className="brand-logo" style={{background:b.bg, color:b.color}}>{b.logo}</div>
            <div>
              <div className="name">{b.name}</div>
              <div className="mono" style={{fontSize:10.5,color:'var(--text-tertiary)'}}>{b.acct}</div>
            </div>
            <div className="status-badge status-success"><span className="dot"></span>{t('connect.status.connected')}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepMonitor() {
  const t = useT();
  return (
    <div className="timeline-card">
      <div className="timeline-card-head">
        <div className="ttl">{t('tl.ttl')}</div>
        <div className="protocol">R$ 10.392,50</div>
      </div>
      <div className="timeline">
        <div className="timeline-event">
          <div className="ev-l">
            <div className="ev-ttl">{t('tl.created')}</div>
            <div className="ev-sub">28 set · 14:22</div>
          </div>
          <div className="ev-val">R$ 10.392,50</div>
        </div>
        <div className="timeline-event warn">
          <div className="ev-l">
            <div className="ev-ttl">{t('tl.commission.applied')}</div>
            <div className="ev-sub">{t('tl.commission.applied.sub')}</div>
          </div>
          <div className="ev-val danger">−R$ 1.659,80</div>
        </div>
        <div className="timeline-event">
          <div className="ev-l">
            <div className="ev-ttl">{t('tl.shipping.discount')}</div>
            <div className="ev-sub">28 set · 14:23</div>
          </div>
          <div className="ev-val danger">−R$ 47,90</div>
        </div>
        <div className="timeline-event danger">
          <div className="ev-l">
            <div className="ev-ttl">{t('tl.divergence.detected')}</div>
            <div className="ev-sub">{t('tl.divergence.detected.sub')}</div>
          </div>
          <div className="ev-val danger">−R$ 412,80</div>
        </div>
        <div className="timeline-event">
          <div className="ev-l">
            <div className="ev-ttl">{t('tl.payout')}</div>
            <div className="ev-sub">12 out · 09:15</div>
          </div>
          <div className="ev-val success">+R$ 8.684,80</div>
        </div>
      </div>
    </div>
  );
}

function StepDetect() {
  const t = useT();
  const rows = [
    { name:'Cafeteira Oster Prima Latte', sku:'SKU-OST-9821', actual:'R$ 89,40', ok:true },
    { name:'Tênis Nike Air Max 270', sku:'SKU-NIK-2210', actual:'R$ 156,20', ok:true },
    { name:'iPhone 15 256GB Titânio', sku:'SKU-APL-1500', actual:'−R$ 412,80', ok:false, flag:t('detect.flag.commission') },
    { name:'Smart TV LG 65" OLED', sku:'SKU-LG-OLD65', actual:'R$ 524,10', ok:true },
    { name:'Headphone Sony WH-1000XM5', sku:'SKU-SNY-XM5', actual:'−R$ 89,40', ok:false, flag:t('detect.flag.shipping') },
  ];
  return (
    <div className="detect-card">
      <div className="div-mockup-head">
        <div className="left">
          <div className="icon-box" style={{background:'var(--brand-50)',color:'var(--brand-700)'}}>
            <Icon.Search size={16}/>
          </div>
          <div>
            <div className="ttl">{t('detect.ttl')}</div>
            <div className="sub">{t('detect.sub')}</div>
          </div>
        </div>
      </div>
      <div className="detect-rows">
        {rows.map((r, i) => (
          <div key={i} className={`detect-row ${r.ok ? '' : 'flagged'}`}>
            <div>
              <div className="name">{r.name}<span className="sku">{r.sku}{r.flag ? ` · ${r.flag}` : ''}</span></div>
            </div>
            <div className={`val ${r.ok ? '' : 'danger'}`}>{r.actual}</div>
            <div>
              {r.ok ? <span className="status-badge status-success"><span className="dot"></span>{t('status.ok')}</span>
                    : <span className="status-badge status-danger"><span className="dot"></span>{t('status.flag')}</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepContest() {
  const t = useT();
  return (
    <div className="contest-card">
      <div className="div-mockup-head">
        <div className="left">
          <div className="icon-box" style={{background:'var(--brand-50)',color:'var(--brand-700)'}}>
            <Icon.Inbox size={16}/></div>
          <div>
            <div className="ttl">{t('contest.ttl')}</div>
            <div className="sub">{t('contest.sub')}</div>
          </div>
        </div>
      </div>
      <div className="contest-steps">
        <div className="contest-step"><div className="dot-num"><Icon.Check size={14}/></div><div className="lab">{t('contest.step.detected')}</div></div>
        <div className="contest-arrow"><Icon.ChevronRight/></div>
        <div className="contest-step"><div className="dot-num"><Icon.Check size={14}/></div><div className="lab">{t('contest.step.formatted')}</div></div>
        <div className="contest-arrow"><Icon.ChevronRight/></div>
        <div className="contest-step"><div className="dot-num"><Icon.Check size={14}/></div><div className="lab">{t('contest.step.filed')}</div></div>
        <div className="contest-arrow"><Icon.ChevronRight/></div>
        <div className="contest-step pending"><div className="dot-num">4</div><div className="lab">{t('contest.step.response')}</div></div>
        <div className="contest-arrow"><Icon.ChevronRight/></div>
        <div className="contest-step pending"><div className="dot-num">5</div><div className="lab">{t('contest.step.confirm')}</div></div>
      </div>
      <div className="contest-detail">
        <div className="contest-detail-row"><span className="l">{t('contest.row.type')}</span><span className="v">{t('contest.row.type.val')}</span></div>
        <div className="contest-detail-row"><span className="l">{t('contest.row.order')}</span><span className="v">#ML-8842371</span></div>
        <div className="contest-detail-row"><span className="l">{t('contest.row.amount')}</span><span className="v" style={{color:'var(--success-700)'}}>R$ 412,80</span></div>
        <div className="contest-detail-row"><span className="l">{t('contest.row.deadline')}</span><span className="v">{t('contest.row.deadline.val')}</span></div>
      </div>
    </div>
  );
}

function StepRecover() {
  const t = useT();
  return (
    <div className="recover-card">
      <div className="lab">{t('recover.lab')}</div>
      <div className="recover-amount">R$ 38.420</div>
      <p className="sublab">{t('recover.sublab')}</p>
      <div className="recover-list">
        <div className="recover-item">
          <div>
            <div className="ttl">Mercado Livre</div>
            <div className="meta">8 {t('recover.item.meta')}</div>
          </div>
          <div className="val">R$ 23.140</div>
        </div>
        <div className="recover-item">
          <div>
            <div className="ttl">Shopee</div>
            <div className="meta">12 {t('recover.item.meta')}</div>
          </div>
          <div className="val">R$ 11.260</div>
        </div>
        <div className="recover-item">
          <div>
            <div className="ttl">Amazon</div>
            <div className="meta">3 {t('recover.item.meta')}</div>
          </div>
          <div className="val">R$ 4.020</div>
        </div>
      </div>
    </div>
  );
}

function HowItWorks() {
  const t = useT();
  const steps = [
    { lab:t('how.step.connect.lab'), t:<>{t('how.step.connect.t1')} <span className="italic">{t('how.step.connect.t2')}</span> {t('how.step.connect.t3')}</>, d:t('how.step.connect.d'), V: StepConnect },
    { lab:t('how.step.monitor.lab'), t:<>{t('how.step.monitor.t1')} <span className="italic">{t('how.step.monitor.t2')}</span>{t('how.step.monitor.t3')}</>, d:t('how.step.monitor.d'), V: StepMonitor },
    { lab:t('how.step.detect.lab'), t:<>{t('how.step.detect.t1')} <span className="italic">{t('how.step.detect.t2')}</span>{t('how.step.detect.t3')}</>, d:t('how.step.detect.d'), V: StepDetect },
    { lab:t('how.step.contest.lab'), t:<>{t('how.step.contest.t1')} <span className="italic">{t('how.step.contest.t2')}</span></>, d:t('how.step.contest.d'), V: StepContest },
    { lab:t('how.step.recover.lab'), t:<>{t('how.step.recover.t1')} <span className="italic">{t('how.step.recover.t2')}</span> {t('how.step.recover.t3')}</>, d:t('how.step.recover.d'), V: StepRecover },
  ];
  return (
    <Section id="how" style={{background:'#fff',borderTop:'1px solid var(--border-subtle)',borderBottom:'1px solid var(--border-subtle)'}}>
      <FadeIn>
        <div className="section-head-ed">
          <Eyebrow>{t('how.eyebrow')}</Eyebrow>
          <h2 className="display-section">
            {t('how.title.1')} <span className="italic">{t('how.title.2')}</span> {t('how.title.3')} <span className="italic">{t('how.title.4')}</span>.
          </h2>
          <p className="lead">{t('how.lead')}</p>
        </div>
      </FadeIn>
      <div className="how-steps">
        {steps.map((s, i) => {
          const V = s.V;
          return (
            <FadeIn key={i}>
              <div className="how-step">
                <div className="how-step-text">
                  <div className="step-eyebrow">
                    <span className="step-num">0{i+1}</span>
                    <span className="step-lab">{s.lab}</span>
                  </div>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                <div className="how-step-visual"><V/></div>
              </div>
            </FadeIn>
          );
        })}
      </div>
    </Section>
  );
}

// =========================================
// METRICS — Full bleed editorial
// =========================================
function MetricsBar() {
  const t = useT();
  return (
    <Section id="metrics" style={{padding:0}}>
      <div className="container">
        <FadeIn>
          <div className="metrics-row">
            <div className="metric-cell">
              <div className="value">R$ 12<span className="unit">M+</span></div>
              <div className="label">{t('metrics.l1')}</div>
            </div>
            <div className="metric-cell">
              <div className="value">1,8<span className="unit">%</span></div>
              <div className="label">{t('metrics.l2')}</div>
            </div>
            <div className="metric-cell">
              <div className="value">&lt;72<span className="unit">h</span></div>
              <div className="label">{t('metrics.l3')}</div>
            </div>
            <div className="metric-cell">
              <div className="value">78<span className="unit">%</span></div>
              <div className="label">{t('metrics.l4')}</div>
            </div>
          </div>
        </FadeIn>
      </div>
    </Section>
  );
}

window.Pain = Pain;
window.HowItWorks = HowItWorks;
window.MetricsBar = MetricsBar;