const { Card } = window.CammusDesignSystem_2ef585;
const CountUp = window.CountUp;

/* THE PROBLEM TO SOLVE — three parallel stat cards. Lime count: zero (deliberate).
   Cards stagger in; numbers count 0 → value once (no repeat on re-scroll). */
function ProblemSection() {
  const eyebrowStyle = {
    color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)',
    fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
    letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
  };
  const numStyle = {
    fontSize: 'clamp(2.6rem, 4vw, 3.4rem)', fontWeight: 'var(--fw-black)',
    color: 'var(--cam-error)', letterSpacing: 'var(--track-display)', lineHeight: 1,
  };
  const stats = [
    { key: 'dependence', label: 'Operational dependence:', descLines: ['Digital investment still goes', 'through third-party agencies.'], num: { end: 67, suffix: '%' } },
    { key: 'inflation', label: 'Paid lead acquisition inflation:', descLines: ['In the cost of Meta Ads; the tax pass-', 'through increases CPC, CPA, and CAC.'], num: { end: 12.5, decimals: 1, prefix: '+', suffix: '%' } },
    { key: 'attribution', label: 'Broken attribution:', descLines: ['They invest without measuring the', 'real impact on revenue.'], num: { end: 67, suffix: '%' } },
  ];
  /* One-line titles + two-line descs, exactly as speced: segments never wrap;
     fonts auto-shrink to the card via container-query units (shared divisors
     from the longest segment so all three cards match). */
  const labelFs = 'min(var(--fs-eyebrow), calc(100cqw / 28))';
  const descFs = 'min(var(--fs-body), calc(100cqw / 18.5))';
  return (
    <section id="problem" data-screen-label="The Problem to Solve" style={{ background: 'var(--cam-surface-section)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>The Problem to Solve</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 23))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)',
          }}><span style={{ whiteSpace: 'nowrap' }}>Brazilian companies are spending more and more</span><br /><span style={{ whiteSpace: 'nowrap' }}>to acquire fewer leads.</span></h2>
          <p style={{
            margin: 'var(--space-5) 0 0', fontSize: 'var(--fs-lead)',
            color: 'var(--cam-text-secondary)', letterSpacing: 'var(--track-text)',
            lineHeight: 1.5, maxWidth: '58ch',
          }}>In 2024 alone, more than R$ 37.9 billion was spent on digital advertising.</p>
        </div>

        <div className="lp-group" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 'var(--space-4)', marginTop: 'var(--space-8)',
        }}>
          {stats.map((s, i) => (
            <Card key={s.key} className="lp-item" style={{ '--d': (i * 0.12) + 's', containerType: 'inline-size' }}>
              <div style={{
                color: 'var(--cam-text-inactive)', fontSize: labelFs,
                fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
                letterSpacing: 'var(--track-eyebrow)', whiteSpace: 'nowrap',
                marginBottom: 'var(--space-3)',
              }}>{s.label}</div>
              <div style={numStyle}>
                <CountUp {...s.num} duration={1300} delay={i * 120} />
              </div>
              <p style={{ margin: 'var(--space-4) 0 0', fontSize: descFs, whiteSpace: 'nowrap' }}>{s.descLines[0]}<br />{s.descLines[1]}</p>
            </Card>
          ))}
        </div>

        <div className="lp-reveal">
          <p style={{
            margin: 'var(--space-8) 0 0', maxWidth: '56ch',
            fontSize: 'var(--fs-lead)', lineHeight: 1.5, letterSpacing: 'var(--track-text)',
            color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-semibold)',
          }}>The cost went up. The operation remains outsourced. And nobody attributes marketing to pipeline marketing.</p>
          <p style={{
            margin: 'var(--space-7) 0 0', color: 'var(--cam-text-inactive)',
            fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--track-text)', lineHeight: 1.9,
          }}>
            {[
              { n: 'IAB Brasil', u: 'https://iabbrasil.com.br/wp-content/uploads/2025/04/IAB_Digital_Adspend_2025_anobase2024_AF.pdf' },
              { n: 'Grand View Horizon', u: 'https://www.grandviewresearch.com/horizon/outlook/digital-marketing-software-market/brazil' },
              { n: 'Carta Capital', u: 'https://www.cartacapital.com.br/do-micro-ao-macro/pesquisa-aponta-que-56-das-empresas-investem-ate-5-do-faturamento-em-marketing-digital/' },
              { n: 'Upsend Brasil', u: 'https://upsendbrasil.com.br/blog/aumento-custo-meta-ads-2026/' },
              { n: 'GoTraktor', u: 'https://gotraktor.com/post-pt/anuncios-da-meta-ficam-mais-caros-o-que-muda-e-como-se-adaptar' },
              { n: 'TNP Advogados', u: 'https://tnp.adv.br/anuncios-meta-brasil/' },
            ].map((s, i, arr) => (
              <React.Fragment key={s.n}>
                <a href={s.u} target="_blank" rel="noreferrer" style={{
                  color: 'var(--cam-text-inactive)', textDecoration: 'none',
                  borderBottom: '1px solid var(--cam-border-strong)', paddingBottom: 1,
                }}
                  onMouseEnter={(e) => (e.target.style.color = 'var(--cam-text-auxiliary)')}
                  onMouseLeave={(e) => (e.target.style.color = 'var(--cam-text-inactive)')}>{s.n}</a>
                {i < arr.length - 1 && <span aria-hidden="true">{' '}|{' '}</span>}
              </React.Fragment>
            ))}
          </p>
        </div>
      </div>
    </section>
  );
}
window.ProblemSection = ProblemSection;