// =========================================
// TESTIMONIALS — Editorial
// =========================================
function Testimonials() {
  const t = useT();
  return (
    <Section id="testimonials" className="snap-section" style={{background:'#fff',borderTop:'1px solid var(--border-subtle)',borderBottom:'1px solid var(--border-subtle)'}}>
      <FadeIn>
        <div className="section-head-ed">
          <Eyebrow>{t('test.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('test.title.1')} <span className="italic">{t('test.title.2')}</span> {t('test.title.3')}</h2>
        </div>
      </FadeIn>

      <div className="testimonial-hero">
        <FadeIn>
          <blockquote>
            {t('test.hero.quote.1')} <span className="mono">R$ 23 mil</span> {t('test.hero.quote.2')}
            <div className="attr">
              <div className="avatar">RA</div>
              <div>
                <div className="name">{t('test.hero.name')}</div>
                <div className="role">{t('test.hero.role')}</div>
              </div>
            </div>
          </blockquote>
        </FadeIn>
        <FadeIn delay={120}>
          <div className="testimonial-hero-aside">
            <div className="caption" style={{marginBottom:8}}>{t('test.aside.caption')}</div>
            <div className="testimonial-aside-stat">R$ 38.420</div>
            <div className="testimonial-aside-lab">{t('test.aside.lab')}</div>
            <div className="testimonial-aside-divider"></div>
            <div className="testimonial-aside-list">
              <div className="testimonial-aside-list-item"><span className="l">{t('test.aside.row1')}</span><span className="v">R$ 23.140</span></div>
              <div className="testimonial-aside-list-item"><span className="l">{t('test.aside.row2')}</span><span className="v">R$ 8.420</span></div>
              <div className="testimonial-aside-list-item"><span className="l">{t('test.aside.row3')}</span><span className="v">R$ 6.860</span></div>
            </div>
          </div>
        </FadeIn>
      </div>

      <div className="testimonial-grid">
        <FadeIn delay={60}>
          <div className="testimonial-card">
            <blockquote>{t('test.card1.quote')}</blockquote>
            <div className="attr">
              <div className="avatar">CT</div>
              <div>
                <div className="name">{t('test.card1.name')}</div>
                <div className="role">{t('test.card1.role')}</div>
              </div>
            </div>
          </div>
        </FadeIn>
        <FadeIn delay={140}>
          <div className="testimonial-card">
            <blockquote>{t('test.card2.quote.1')} <span className="mono">R$ 8.400</span> {t('test.card2.quote.2')}</blockquote>
            <div className="attr">
              <div className="avatar">FN</div>
              <div>
                <div className="name">{t('test.card2.name')}</div>
                <div className="role">{t('test.card2.role')}</div>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </Section>
  );
}

// =========================================
// PRICING
// =========================================
function PriceCard({ plan, range, price, custom, features, cta, featured, href }) {
  const t = useT();
  const target = href || (custom ? "/contato" : "/signup");
  return (
    <div className={`price-card ${featured ? 'featured' : ''}`}>
      {featured && <div className="pop-badge">{t('price.popular')}</div>}
      <div className="plan-name">{plan}</div>
      <div className="plan-range">{range}</div>
      <div className="price-prefix" style={{marginTop:24}}>{custom ? t('price.custom.prefix') : t('price.from')}</div>
      <div className="price-row" style={{margin:'4px 0'}}>
        {custom
          ? <span className="custom">{t('price.custom.val')}</span>
          : <><span className="amount">R$ {price}</span><span className="per">{t('price.month')}</span></>}
      </div>
      <ul className="price-features">
        {features.map((f, i) => <li key={i}><Icon.Check/><span>{f}</span></li>)}
      </ul>
      <a href={target} className={featured ? 'btn btn-white' : 'btn btn-secondary'} style={{height:48,fontSize:14}}>{cta}</a>
    </div>
  );
}

function Pricing() {
  const t = useT();
  return (
    <Section id="pricing" className="snap-section">
      <FadeIn>
        <div className="section-head-ed centered">
          <Eyebrow>{t('pricing.eyebrow')}</Eyebrow>
          <h2 className="display-section">{t('pricing.title.1')} <span className="italic">{t('pricing.title.2')}</span>{t('pricing.title.3')}</h2>
          <p className="lead">{t('pricing.sub')}</p>
        </div>
      </FadeIn>
      <div className="pricing-grid">
        <FadeIn>
          <div className="price-card price-card-featured-perf">
            <div className="perf-badge"><Icon.Spark size={11}/> {t('pricing.perf.badge')}</div>
            <div className="plan-name">{t('pricing.perf.name')}</div>
            <div className="plan-range">{t('pricing.perf.range')}</div>
            <div className="price-prefix" style={{marginTop:24}}>{t('pricing.perf.prefix')}</div>
            <div className="price-row">
              <span className="amount">0,7%</span>
              <span className="per">{t('pricing.perf.per')}</span>
            </div>
            <div className="perf-zero">
              <span className="zero-amt">R$ 297</span>
              <span className="zero-label">{t('pricing.perf.zero')}</span>
            </div>
            <ul className="price-features">
              <li><Icon.Check/><span>{t('pricing.perf.feat.mp')}</span></li>
              <li><Icon.Check/><span>{t('pricing.perf.feat.recon')}</span></li>
              <li><Icon.Check/><span>{t('pricing.perf.feat.openfin')}</span></li>
              <li><Icon.Check/><span>{t('pricing.perf.feat.contest')}</span></li>
              <li><Icon.Check/><span>{t('pricing.perf.feat.history')}</span></li>
              <li><Icon.Check/><span>{t('pricing.perf.feat.support')}</span></li>
            </ul>
            <a href="/signup" className="btn btn-primary" style={{height:48,fontSize:14,width:'100%'}}>{t('pricing.perf.cta')} <Icon.ArrowRight size={14}/></a>
          </div>
        </FadeIn>
        <FadeIn delay={80}>
          <PriceCard
            plan={t('pricing.growth.plan')}
            range={t('pricing.growth.range')}
            price="997"
            features={[t('pricing.growth.feat.mp'),t('pricing.growth.feat.recon'),t('pricing.growth.feat.openfin'),t('pricing.growth.feat.history'),t('pricing.growth.feat.support')]}
            cta={t('pricing.growth.cta')}
          />
        </FadeIn>
        <FadeIn delay={160}>
          <PriceCard
            plan={t('pricing.ent.plan')}
            range={t('pricing.ent.range')}
            custom
            features={[t('pricing.ent.feat.all'),t('pricing.ent.feat.multicnpj'),t('pricing.ent.feat.sla'),t('pricing.ent.feat.acct'),t('pricing.ent.feat.api')]}
            cta={t('pricing.ent.cta')}
          />
        </FadeIn>
      </div>
      <FadeIn>
        <div className="pricing-guarantee">
          <Icon.Shield/>
          <div>{t('pricing.guarantee.line')} <b>{t('pricing.guarantee.bold')}</b> {t('pricing.guarantee.tail')}</div>
        </div>
      </FadeIn>
    </Section>
  );
}

// =========================================
// FAQ
// =========================================
const { useState: _ms, useEffect: _me } = React;
const { useState: useStateF, useRef: useRefF, useEffect: useEffectF } = React;
function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useStateF(defaultOpen);
  const innerRef = useRefF(null);
  const [h, setH] = useStateF(defaultOpen ? 'auto' : 0);
  useEffectF(() => {
    if (!innerRef.current) return;
    if (open) setH(innerRef.current.scrollHeight);
    else setH(0);
  }, [open]);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span>{q}</span>
        <span className="icon"><Icon.Plus size={18}/></span>
      </button>
      <div className="faq-a" style={{height:h,transition:'height 280ms cubic-bezier(0.4,0,0.2,1)'}}>
        <div className="faq-a-inner" ref={innerRef}>{a}</div>
      </div>
    </div>
  );
}

function FAQ() {
  const t = useT();
  const items = [
    { q:t('faq.q1'), a:t('faq.a1') },
    { q:t('faq.q2'), a:t('faq.a2') },
    { q:t('faq.q3'), a:<>{t('faq.a3.1')} <span className="mono">78%</span>{t('faq.a3.2')}</> },
    { q:t('faq.q4'), a:t('faq.a4') },
    { q:t('faq.q5'), a:<>{t('faq.a5.1')} <span className="mono">48h</span>{t('faq.a5.2')} <span className="mono">72h</span>{t('faq.a5.3')}</> },
    { q:t('faq.q6'), a:t('faq.a6') },
  ];
  return (
    <Section id="faq" style={{background:'#fff',borderTop:'1px solid var(--border-subtle)'}}>
      <div className="faq-wrap">
        <FadeIn>
          <div className="faq-aside">
            <Eyebrow>{t('faq.eyebrow')}</Eyebrow>
            <h2 className="display-section" style={{marginTop:24}}>{t('faq.title.1')} <span className="italic">{t('faq.title.2')}</span> {t('faq.title.3')}</h2>
            <p>{t('faq.lead')}</p>
            <a href="/contato" className="btn btn-primary">{t('faq.cta')} <Icon.ArrowRight size={14}/></a>
          </div>
        </FadeIn>
        <FadeIn delay={80}>
          <div className="faq-list">
            {items.map((it, i) => <FAQItem key={i} {...it} defaultOpen={i===0}/>)}
          </div>
        </FadeIn>
      </div>
    </Section>
  );
}

// =========================================
// FINAL CTA + FOOTER
// =========================================
function FinalCTA() {
  const sys = useSystem();
  const t = sys.t;
  const [gmv, setGmv] = _useState(500);
  _useEffect(() => {
    const handler = (e) => { if (e.detail && e.detail.gmv) setGmv(e.detail.gmv); };
    window.addEventListener('ac-gmv-change', handler);
    return () => window.removeEventListener('ac-gmv-change', handler);
  }, []);
  const yearly = Math.round(gmv * 1000 * 0.023) * 12;
  const isEn = sys.lang === 'en';
  const cur = isEn ? '$' : 'R$';
  const locale = isEn ? 'en-US' : 'pt-BR';
  const fmt = (n) => n.toLocaleString(locale);
  return (
    <section id="cta" style={{padding:'56px 20px 40px'}}>
      <FadeIn>
        <div className="final-cta">
          <div className="cta-personal-tag">
            <span className="live-dot pulse"></span>
            {t('fcta.tag.prefix')} {cur} {fmt(gmv)}{t('fcta.tag.suffix')}
          </div>
          <h2>{t('fcta.h.1')} <span className="italic" style={{color:'#FF8589'}}>{cur} {fmt(yearly)}</span> {t('fcta.h.2')}</h2>
          <p>{t('fcta.p')}</p>
          <div className="ctas">
            <a href="/signup" className="btn btn-white">{t('fcta.btn.recover')} {cur} {fmt(yearly)} <Icon.ArrowRight size={16}/></a>
            <a href="/contato" className="btn btn-outline-white">{t('cta.secondary')}</a>
          </div>
          <div className="microcopy">{t('cta.micro')} · {t('fcta.guarantee')}</div>
        </div>
      </FadeIn>
    </section>
  );
}

function Footer() {
  const t = useT();
  const year = new Date().getFullYear();
  const [modal, setModal] = _ms(null);
  const open = (id) => (e) => { e.preventDefault(); setModal(id); };
  return (
    <footer className="footer footer-v2">
      <div className="container">
        <div className="footer-hero">
          <div>
            <div className="brand-row footer-brand">
              <span className="logo-mark"><Icon.Logo size={18}/></span>
              Auditcash
            </div>
            <h3 className="footer-cta-title">
              {t('footer.cta.h1')}
            </h3>
            <p className="tagline">{t('footer.tagline')}</p>
            <div className="footer-cta-row">
              <a href="/signup" className="btn btn-primary">{t('hero.cta.primary')} <Icon.ArrowRight size={14}/></a>
              <a href="#pricing" className="btn btn-secondary">{t('nav.pricing')}</a>
            </div>
          </div>
          <div className="footer-trust">
            <div className="trust-row">
              <div className="trust-icon"><Icon.Lock size={16}/></div>
              <div>
                <div className="trust-ttl">LGPD · BCB</div>
                <div className="trust-sub">{t('footer.trust.security')}</div>
              </div>
            </div>
            <div className="trust-row">
              <div className="trust-icon"><Icon.Shield size={16}/></div>
              <div>
                <div className="trust-ttl">Open Finance</div>
                <div className="trust-sub">{t('footer.trust.openfin')}</div>
              </div>
            </div>
            <div className="trust-row">
              <div className="trust-icon"><Icon.Check size={16}/></div>
              <div>
                <div className="trust-ttl">SOC 2 · ISO 27001</div>
                <div className="trust-sub">{t('footer.trust.soc')}</div>
              </div>
            </div>
          </div>
        </div>

        <div className="footer-grid footer-grid-v2">
          <div>
            <div className="col-title">{t('footer.product')}</div>
            <ul>
              <li><a href="#product">{t('footer.product.features')}</a></li>
              <li><a href="#comparison">{t('footer.product.compare')}</a></li>
              <li><a href="#integ">{t('footer.product.integrations')}</a></li>
              <li><a href="#pricing">{t('footer.product.pricing')}</a></li>
              <li><a href="#cta">{t('footer.product.demo')}</a></li>
            </ul>
          </div>
          <div>
            <div className="col-title">{t('footer.company')}</div>
            <ul>
              <li><a href="#" onClick={open('about')}>{t('footer.col.aboutus')}</a></li>
              <li><a href="#" onClick={open('contact')}>{t('footer.company.contact')}</a></li>
            </ul>
          </div>
          <div>
            <div className="col-title">{t('footer.legal')}</div>
            <ul>
              <li><a href="#" onClick={open('privacy')}>{t('footer.legal.privacy')}</a></li>
              <li><a href="#" onClick={open('terms')}>{t('footer.legal.terms')}</a></li>
              <li><a href="#" onClick={open('lgpd')}>LGPD</a></li>
              <li><a href="#" onClick={open('security')}>{t('footer.legal.security')}</a></li>
              <li><a href="#" onClick={open('status')}>{t('footer.legal.status')}</a></li>
            </ul>
          </div>
          <div>
            <div className="col-title">{t('footer.resources')}</div>
            <ul>
              <li><a href="#" onClick={open('docs')}>{t('footer.res.docs')}</a></li>
              <li><a href="#" onClick={open('api')}>API</a></li>
              <li><a href="#" onClick={open('changelog')}>{t('footer.res.changelog')}</a></li>
              <li><a href="#" onClick={open('glossary')}>{t('footer.res.glossary')}</a></li>
              <li><a href="#" onClick={open('help')}>{t('footer.res.help')}</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="copyright">
            <div>© {year} ELEVQUALY · CNPJ 61.112.598/0001-03</div>
            <div className="copyright-sub">Fortaleza · Brasil · {t('footer.tagline.short')}</div>
          </div>
          <div className="footer-bottom-right">
            <div className="footer-status">
              <span className="live-dot pulse"></span>
              <span>{t('footer.status')}</span>
            </div>
            <div className="social">
              <a href="https://www.linkedin.com/company/auditcash" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><Icon.Linkedin/></a>
              <a href="https://www.instagram.com/auditcash" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon.Instagram/></a>
              <a href="https://www.youtube.com/@auditcash" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><Icon.Youtube/></a>
            </div>
          </div>
        </div>
      </div>
      {modal && <Modal id={modal} onClose={() => setModal(null)}/>}
    </footer>
  );
}

function App() {
  return (
    <SystemProvider>
      <Navbar/>
      <main id="main">
        <Hero/>
        <Aha/>
        <BeforeAfter/>
        <ProductBento/>
        <Comparison/>
        <MetricsBar/>
        <Testimonials/>
        <Pricing/>
        <FinalCTA/>
      </main>
      <Footer/>
      <ChatAgent/>
    </SystemProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);