// =========================================
// AHA MOMENT — single animated story card
// =========================================
const { useState: _as, useEffect: _ae } = React;

const AHA_STEPS_PT = [
  { t: '14:22', stage: 'Pedido criado', detail: 'iPhone 15 256GB · #ML-8842371', amount: 'R$ 10.392,50', tone: 'neutral', headline: 'Uma venda como outra qualquer.' },
  { t: '14:22', stage: 'Comissão aplicada · 16%', detail: 'Esperado: 12% (categoria Clássico)', amount: '−R$ 1.659,80', tone: 'alert', headline: <>Mas o canal cobrou <span className="italic">a mais</span>.</> },
  { t: '14:24', stage: 'Auditcash detectou', detail: 'Motor de regras · 2s · automático', amount: '−R$ 412,80', tone: 'flag', headline: <>O motor <span className="italic">não dorme</span>.</> },
  { t: '14:25', stage: 'Contestação protocolada', detail: 'ML-CT-29841 · padrão do canal', amount: 'em análise', tone: 'pending', headline: <>1 clique. <span className="italic">Sua equipe nem viu.</span></> },
  { t: '12:08', stage: 'Crédito confirmado · Itaú', detail: 'Open Finance · auditável', amount: '+R$ 412,80', tone: 'success', headline: <>Dinheiro <span className="italic">de volta</span> no caixa.</> },
];

const AHA_STEPS_EN = [
  { t: '14:22', stage: 'Order placed', detail: 'iPhone 15 256GB · #ML-8842371', amount: '$10,392.50', tone: 'neutral', headline: 'Just another sale.' },
  { t: '14:22', stage: 'Commission applied · 16%', detail: 'Expected: 12% (Standard tier)', amount: '−$1,659.80', tone: 'alert', headline: <>But the channel <span className="italic">overcharged</span>.</> },
  { t: '14:24', stage: 'Auditcash detected', detail: 'Rule engine · 2s · automatic', amount: '−$412.80', tone: 'flag', headline: <>The engine <span className="italic">never sleeps</span>.</> },
  { t: '14:25', stage: 'Dispute filed', detail: 'ML-CT-29841 · channel format', amount: 'pending', tone: 'pending', headline: <>One click. <span className="italic">Your team didn't even see it.</span></> },
  { t: '12:08', stage: 'Credit confirmed · Itaú', detail: 'Open Finance · auditable', amount: '+$412.80', tone: 'success', headline: <>Money <span className="italic">back</span> in your account.</> },
];

function Aha() {
  const sys = useSystem();
  const lang = sys.lang;
  const steps = lang === 'en' ? AHA_STEPS_EN : AHA_STEPS_PT;
  const [idx, setIdx] = _as(0);
  const [paused, setPaused] = _as(false);

  _ae(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % steps.length), 3200);
    return () => clearInterval(id);
  }, [paused, steps.length]);

  const s = steps[idx];

  return (
    <Section id="aha" className="snap-section aha-section">
      <FadeIn>
        <div className="aha-head">
          <Eyebrow>{lang === 'en' ? 'Watch it happen · 90s' : 'Veja acontecendo · 90s'}</Eyebrow>
          <h2 className="display-section">
            {lang === 'en'
              ? <>One sale. One overcharge. <span className="italic">R$ 412,80 back.</span></>
              : <>Uma venda. Uma cobrança a mais. <span className="italic">R$ 412,80 de volta.</span></>
            }
          </h2>
        </div>
      </FadeIn>

      <FadeIn>
        <div
          className="aha-player"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          {/* Stage card */}
          <div className={`aha-card tone-${s.tone}`} key={idx}>
            <div className="aha-card-head">
              <div className="aha-card-time">
                <span className={`aha-card-dot tone-${s.tone}`}></span>
                <span className="aha-card-t">{s.t}</span>
                <span className="aha-card-stage">{s.stage}</span>
              </div>
              <div className="aha-card-step">{String(idx+1).padStart(2,'0')} / 05</div>
            </div>

            <h3 className="aha-card-headline">{s.headline}</h3>

            <div className={`aha-card-amount tone-${s.tone}`}>{s.amount}</div>
            <div className="aha-card-detail">{s.detail}</div>
          </div>

          {/* Mini timeline strip */}
          <div className="aha-strip">
            {steps.map((step, i) => (
              <button
                key={i}
                className={`aha-strip-step ${i === idx ? 'active' : ''} ${i < idx ? 'past' : ''}`}
                onClick={() => { setIdx(i); setPaused(true); setTimeout(() => setPaused(false), 6000); }}
                aria-label={step.stage}
              >
                <span className={`aha-strip-dot tone-${step.tone}`}>
                  {i < idx ? <Icon.Check size={10}/> : null}
                </span>
                <span className="aha-strip-label">
                  <span className="aha-strip-t">{step.t}</span>
                  <span className="aha-strip-n">{step.stage}</span>
                </span>
              </button>
            ))}
          </div>
        </div>
      </FadeIn>

      {idx === steps.length - 1 && (
        <FadeIn>
          <div className="aha-cta-row">
            <a href="#cta" className="btn btn-primary">
              {lang === 'en' ? 'Run this on my account' : 'Ver isso na minha conta'} <Icon.ArrowRight size={14}/>
            </a>
          </div>
        </FadeIn>
      )}
    </Section>
  );
}

window.Aha = Aha;