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

/* BRAZILIAN MARKET POTENTIAL — redesigned as the classic investor geometry:
   three bottom-tangent nested circles (TAM ⊃ SAM ⊃ SOM). Left column carries
   the numbers (counting in) and the narrowing captions; the rings pop from
   the shared bottom anchor in sequence, TAM's dashed rim drifts slowly.
   Areas are compressed, not proportional ($48M would be invisible at scale).
   The section's single lime = SOM (disc + value). */

const RING_CX = 230, RING_ANCHOR = 442;

function MarketSection() {
  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 capStyle = {
    display: 'flex', alignItems: 'center', gap: 'var(--space-3)',
    padding: 'var(--space-3) 0 var(--space-3) 2px',
  };
  const tiers = [
    {
      tier: 'TAM', d: 0, dur: 1300,
      value: <CountUp end={27.2} decimals={1} prefix="$" suffix=" B" duration={1300} delay={0} />,
      color: 'var(--cam-text-primary)',
      desc: 'Total marketing market: ads, agencies, software, headcount base, freelancers, production and operations.',
      cap: 'B2B companies with structured business processes',
    },
    {
      tier: 'SAM', d: 0.45, dur: 1300,
      value: <CountUp end={10.2} decimals={1} prefix="$" suffix=" B" duration={1300} delay={450} />,
      color: 'var(--cam-text-primary)',
      desc: '212k B2B companies: digital presence, CRM, and Inside Sales. Estimated average monthly spending of $4,000/mo on marketing and acquisition operations.',
      cap: 'SMBs with recurring marketing + B2B tech startups',
    },
    {
      tier: 'SOM', d: 0.9, dur: 1600,
      value: <CountUp end={48} prefix="$" suffix=" M" duration={1600} delay={900} />,
      color: 'var(--cam-accent-lime)',
      desc: '1,500 startups and 6,250 structured B2B SMBs captured first.',
      cap: null,
    },
  ];
  return (
    <section id="market" data-screen-label="Brazilian Market Potential" className="cam-canvas cam-grain" style={{ position: 'relative', overflow: 'hidden', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div className="cam-mesh" aria-hidden="true" style={{ position: 'absolute', right: -160, top: -160, width: 520, height: 520, opacity: 0.45 }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>Brazilian Market Potential</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 27))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)',
          }}><span style={{ whiteSpace: 'nowrap' }}>From the total B2B marketing market to the startups</span><br /><span style={{ whiteSpace: 'nowrap' }}>and SMBs that Cammus captures first.</span></h2>
        </div>

        <div className="lp-market lp-group">
          {/* Tiers */}
          <div>
            {tiers.map((t, i) => (
              <React.Fragment key={t.tier}>
                <div className="lp-item" style={{
                  '--d': t.d + 's',
                  borderTop: '1px solid var(--cam-border-subtle)',
                  padding: 'var(--space-5) 0',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
                    <Pill>{t.tier}</Pill>
                    <span style={{
                      fontSize: 'clamp(1.8rem, 2.8vw, 2.4rem)', fontWeight: 'var(--fw-black)',
                      letterSpacing: 'var(--track-display)', lineHeight: 1, color: t.color,
                    }}>{t.value}</span>
                  </div>
                  <p style={{
                    margin: 'var(--space-3) 0 0', color: 'var(--cam-text-auxiliary)',
                    fontSize: 'var(--fs-small)', lineHeight: 1.55, letterSpacing: 'var(--track-text)',
                    maxWidth: '52ch',
                  }}>{t.desc}</p>
                  {t.tier === 'SOM' && (
                    <p style={{ margin: 'var(--space-3) 0 0', fontSize: 'var(--fs-small)', lineHeight: 1.55, letterSpacing: 'var(--track-text)' }}>
                      <span style={{ color: 'var(--cam-accent-olive)', fontWeight: 'var(--fw-semibold)' }}>initial beachhead</span>
                      <span style={{ color: 'var(--cam-text-auxiliary)' }}> → 1,500 startups × $1,000 × 12mo = </span>
                      <span style={{ color: 'var(--cam-text-primary)', fontWeight: 'var(--fw-semibold)' }}>$18M</span>
                    </p>
                  )}
                </div>
                {t.cap && (
                  <div className="lp-fade" style={{ ...capStyle, '--d': (t.d + 0.3) + 's' }}>
                    <span aria-hidden="true" style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', flex: 'none' }}>
                      <span style={{
                        width: 8, height: 0,
                        borderLeft: '5px solid transparent', borderRight: '5px solid transparent',
                        borderTop: '6px solid var(--cam-accent-olive)',
                      }} />
                      <span style={{ width: 2, height: 7, background: 'var(--cam-accent-olive)' }} />
                    </span>
                    <span style={{ color: 'var(--cam-text-auxiliary)', fontSize: 'var(--fs-small)', letterSpacing: 'var(--track-text)' }}>{t.cap}</span>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>

          {/* Nested circles — bottom-tangent funnel */}
          <svg aria-hidden="true" viewBox="0 0 460 470" style={{ width: '100%', height: 'auto', display: 'block' }}>
            <g className="lp-ring" style={{ '--d': '0.2s', transformOrigin: RING_CX + 'px ' + RING_ANCHOR + 'px', transformBox: 'view-box' }}>
              <circle cx={RING_CX} cy={RING_ANCHOR - 212} r="212" fill="var(--cam-surface-section)" stroke="var(--cam-border-subtle)" strokeWidth="1" />
              <circle className="lp-ringspin" cx={RING_CX} cy={RING_ANCHOR - 212} r="212" fill="none"
                stroke="var(--cam-border-strong)" strokeWidth="1" strokeDasharray="3 8"
                style={{ transformOrigin: RING_CX + 'px ' + (RING_ANCHOR - 212) + 'px', transformBox: 'view-box' }} />
              <text x={RING_CX} y={RING_ANCHOR - 212 * 2 + 34} textAnchor="middle" fill="var(--cam-text-auxiliary)"
                style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em' }}>TAM</text>
              <text x={RING_CX} y={RING_ANCHOR - 212 * 2 + 64} textAnchor="middle" fill="var(--cam-text-primary)"
                style={{ fontSize: 21, fontWeight: 900, letterSpacing: '-0.02em' }}>$27.2 B</text>
            </g>
            <g className="lp-ring" style={{ '--d': '0.6s', transformOrigin: RING_CX + 'px ' + RING_ANCHOR + 'px', transformBox: 'view-box' }}>
              <circle cx={RING_CX} cy={RING_ANCHOR - 132} r="132" fill="var(--cam-surface-card)" stroke="var(--cam-border-subtle)" strokeWidth="1" />
              <text x={RING_CX} y={RING_ANCHOR - 132 * 2 + 30} textAnchor="middle" fill="var(--cam-text-auxiliary)"
                style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em' }}>SAM</text>
              <text x={RING_CX} y={RING_ANCHOR - 132 * 2 + 58} textAnchor="middle" fill="var(--cam-text-primary)"
                style={{ fontSize: 19, fontWeight: 900, letterSpacing: '-0.02em' }}>$10.2 B</text>
            </g>
            <g className="lp-ring" style={{ '--d': '1.05s', transformOrigin: RING_CX + 'px ' + RING_ANCHOR + 'px', transformBox: 'view-box' }}>
              <circle cx={RING_CX} cy={RING_ANCHOR - 60} r="60" fill="var(--cam-accent-lime)" />
              <text x={RING_CX} y={RING_ANCHOR - 96} textAnchor="middle" fill="var(--on-signal, #0A0A0A)"
                style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.14em' }}>SOM</text>
              <text x={RING_CX} y={RING_ANCHOR - 75} textAnchor="middle" fill="var(--on-signal, #0A0A0A)"
                style={{ fontSize: 19, fontWeight: 900, letterSpacing: '-0.02em' }}>$48 M</text>
              <line x1={RING_CX - 26} x2={RING_CX + 26} y1={RING_ANCHOR - 60} y2={RING_ANCHOR - 60}
                stroke="var(--on-signal, #0A0A0A)" strokeWidth="1" opacity="0.35" />
              <text x={RING_CX} y={RING_ANCHOR - 45} textAnchor="middle" fill="var(--on-signal, #0A0A0A)"
                style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.11em' }}>INITIAL BEACHHEAD</text>
              <text x={RING_CX} y={RING_ANCHOR - 26} textAnchor="middle" fill="var(--on-signal, #0A0A0A)"
                style={{ fontSize: 17, fontWeight: 900, letterSpacing: '-0.02em' }}>$18 M</text>
            </g>
            <text x={RING_CX} y="466" textAnchor="middle" fill="var(--cam-text-inactive)"
              style={{ fontSize: 10, letterSpacing: '0.08em' }}>AREAS COMPRESSED FOR LEGIBILITY</text>
          </svg>
        </div>

        {/* Methodology + sources */}
        <div className="lp-reveal" style={{ marginTop: 'var(--space-5)' }}>
          <div style={eyebrowStyle}>Methodology</div>
          {[
            'Number of startups = 18,056 × B2B = 50.9% × Software = 37.6% × Operation/traction/scale = 45% → 1,500 startups × $1,000/mo × 12 = $18M',
            'Number of structured B2B SMBs = 212k × 5-50 employees with active marketing = ~10% × minimum commercial maturity = ~30% → 6,250 SMBs × $2k/mo × 12 = $30M',
          ].map((m) => (
            <div key={m} style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'baseline', marginTop: 'var(--space-2)' }}>
              <span aria-hidden="true" style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--cam-text-inactive)', flex: 'none', transform: 'translateY(-2px)' }} />
              <p style={{ margin: 0, color: 'var(--cam-text-auxiliary)', fontSize: 'var(--fs-small)', lineHeight: 1.6, letterSpacing: 'var(--track-text)', maxWidth: '100ch' }}>{m}</p>
            </div>
          ))}
          <p style={{
            margin: 'var(--space-6) 0 0', color: 'var(--cam-text-inactive)',
            fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--track-text)', lineHeight: 1.9,
          }}>
            {[
              { n: 'Gartner CMO Survey 2024', u: 'https://s3.amazonaws.com/media.mediapost.com/uploads/GARTNER_CMO_Survey_2024.pdf' },
              { n: 'IAB Brasil + Kantar Digital AdSpend 2025', u: 'https://iabbrasil.com.br/wp-content/uploads/2025/04/IAB_Digital_Adspend_2025_anobase2024_AF.pdf' },
              { n: 'Abstartups Mapeamento 2024', u: 'https://abstartups.com.br/wp-content/uploads/2025/06/Mapeamento-do-Ecossistema-Brasileiro-de-Startups-2024.pdf' },
              { n: 'Sebrae Startups Report 2024', u: 'https://agenciasebrae.com.br/inovacao-e-tecnologia/nordeste-se-consolida-como-polo-emergente-de-inovacao-aponta-sebrae-startups-report-2024/' },
              { n: 'Robert Half Guia Salarial 2025', u: 'https://www.roberthalf.com/br/pt/insights/guia-salarial/vendas-marketing' },
              { n: 'Leadster', u: 'https://leadster.com.br/blog/tabela-de-precos-para-marketing-digital/' },
              { n: 'Intelligenzia', u: 'https://intelligenzia.com.br/marketing-b2b-do-basico-ao-avancado/' },
              { n: 'OpinionBox', u: 'https://blog.opinionbox.com/maturidade-digital/' },
            ].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.MarketSection = MarketSection;