const { Button, Card, Stat, Tag, Badge, Tabs, Icon } = window.GOATDesignSystem_fbac97;

const VP_DETAIL = () => ({
  igaming:{ title:'iGaming', tag:'igaming',
    label:L('iGaming · Sportsbooks & Online Casinos · Global','iGaming · Casas de aposta & cassinos online · Global'),
    kpi:['100k+', L('FTDs / month','FTDs / mês')],
    lead:L('Generating 100,000+ FTDs monthly across sportsbooks and online casinos globally.',
           'Geramos mais de 100.000 FTDs por mês em casas de aposta e cassinos online no mundo inteiro.'),
    body:L('We operate certified PPC accounts in restricted markets, run compliant creatives, and optimise conversion tracking to deposits — not registrations. Operators who work with us stop worrying about account bans and start compounding scale.',
           'Operamos contas de PPC certificadas em mercados restritos, rodamos criativos em compliance e otimizamos o tracking para depósito — não para registro. Os operadores que trabalham com a gente param de se preocupar com banimento e passam a compor escala.'),
    bullets:[L('Certified PPC structures in restricted markets','Estruturas de PPC certificadas em mercados restritos'),
             L('FTD-level attribution reconciled with the operator feed','Atribuição a nível de FTD reconciliada com o feed do operador'),
             L('Creative refreshed weekly, per market','Criativo com refresh semanal, por mercado')],
    tags:['PPC','Meta Ads','Native','Certified Accounts','Brazil','Europe','LATAM','Tier 1'],
    stats:[['130k', L('Peak FTDs / month','Pico de FTDs / mês'),'+2500%'],['$12', L('Cost per FTD · LATAM','Custo por FTD · LATAM'),''],['<$100', L('Cost per FTD · Tier 1','Custo por FTD · Tier 1'),'']] },
  forex:{ title:'Forex', tag:'forex',
    label:L('Forex & Trading · Regulated Markets · Global','Forex & Trading · Mercados regulados · Global'),
    kpi:['30k+', L('FTDs / month','FTDs / mês')],
    lead:L('30,000+ funded accounts generated monthly across regulated brokers.',
           'Mais de 30.000 contas financiadas geradas por mês em corretoras reguladas.'),
    body:L('We operate within compliance frameworks across FCA, ASIC, CySEC and MAS jurisdictions, in LATAM, Europe, Asia and the Middle East. We optimise to funded accounts and active traders — not to lead volume that never converts.',
           'Operamos dentro dos frameworks de compliance de FCA, ASIC, CySEC e MAS, em LATAM, Europa, Ásia e Oriente Médio. Otimizamos para conta financiada e trader ativo — não para volume de lead que nunca converte.'),
    bullets:[L('CPFTD as the north-star metric, never CPL','CPFTD como métrica central, nunca CPL'),
             L('Landing and qualification flow rebuilt with the media','Landing e fluxo de qualificação refeitos junto com a mídia'),
             L('CRM handoff and server-side event hygiene','Handoff de CRM e higiene de eventos server-side')],
    tags:['PPC','Compliant','FCA','ASIC','CySEC','LATAM','Europe','Asia'],
    stats:[['30k+', L('Funded accounts / month','Contas financiadas / mês'),''],['90', L('Days to benchmark','Dias até o benchmark'),''],['4', L('Regions live','Regiões ativas'),'']] },
  fintech:{ title:'Crypto', tag:'fintech',
    label:L('Crypto & Web3 · Exchanges & Platforms · Global','Crypto & Web3 · Exchanges & plataformas · Global'),
    kpi:['100k+', L('Users / month','Usuários / mês')],
    lead:L('100,000+ new verified users generated monthly for exchanges and Web3 platforms.',
           'Mais de 100.000 novos usuários verificados por mês para exchanges e plataformas Web3.'),
    body:L('We operate in the most volatile and most restricted advertising environment in digital — and we scale without interruption, across Meta, native networks, Telegram and emerging channels purpose-built for crypto audiences.',
           'Operamos no ambiente de anúncio mais volátil e restrito do digital — e escalamos sem interrupção, em Meta, redes de native, Telegram e canais emergentes feitos para audiência de crypto.'),
    bullets:[L('Multi-network redundancy so volume never stops','Redundância multi-rede para o volume nunca parar'),
             L('Onboarding offer engineered for verified-registration rate','Oferta de onboarding desenhada para taxa de registro verificado'),
             L('Activation tracked past signup','Ativação medida depois do cadastro')],
    tags:['Crypto','Web3','Telegram','Native','Meta','Global'],
    stats:[['100k+', L('Verified users / month','Usuários verificados / mês'),''],['4', L('Networks in the mix','Redes no mix'),''],['1', L('Tier-1 exchange live','Exchange tier-1 ativa'),'']] },
  ecommerce:{ title:'Ecommerce', tag:'ecommerce',
    label:L('DTC & Ecommerce · Nutra, Wellness & Lifestyle · Global','DTC & Ecommerce · Nutra, wellness & lifestyle · Global'),
    kpi:['100k+', L('Sales / month','Vendas / mês')],
    lead:L('100,000+ sales generated monthly for DTC brands.',
           'Mais de 100.000 vendas geradas por mês para marcas DTC.'),
    body:L('Full-funnel operation from creative to post-purchase, across nutraceuticals, wellness and lifestyle — with performance tracked against real business metrics: contribution margin and LTV, not platform-reported ROAS.',
           'Operação full-funnel do criativo ao pós-compra, em nutracêuticos, wellness e lifestyle — com performance medida por métrica real de negócio: margem de contribuição e LTV, não ROAS de plataforma.'),
    bullets:[L('In-house UGC, static and VSL production','Produção in-house de UGC, estático e VSL'),
             L('Server-side tracking tied to contribution margin','Tracking server-side ligado à margem de contribuição'),
             L('Meta and native scaled in parallel','Meta e native escalados em paralelo')],
    tags:['Meta Ads','Native','DTC','Nutra','Wellness','LATAM','USA','Europe'],
    stats:[['50k', L('Peak sales / month','Pico de vendas / mês'),''],['3.1x', L('Cold ROAS','ROAS em tráfego frio'),'+38%'],['3', L('Regions profitable','Regiões no lucro'),'']] },
});

function VerticalsPage({ go }) {
  const [tab, setTab] = React.useState('igaming');
  const map = VP_DETAIL();
  const d = map[tab] || map.igaming;
  return (
    <div>
      <section style={{ borderBottom:'1px solid var(--border-hairline)' }}>
        <div className="goat-container w-sect" style={{ padding:'84px 24px 0' }}>
          <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{L('Where we operate','Onde operamos')}</div>
          <h1 style={{ marginTop:18, fontSize:'var(--text-display-2)', lineHeight:'var(--leading-display)',
            letterSpacing:'var(--tracking-display)', fontWeight:700, maxWidth:860 }}>
            {L('Four verticals. One level of precision.','Quatro verticais. Um nível de precisão.')}
          </h1>
          <p style={{ marginTop:22, maxWidth:640, fontSize:'var(--text-body-lg)', color:'var(--text-muted)' }}>
            {L('Each vertical has its own conversion dynamics, compliance requirements and audience behaviour. We operate with vertical-specific depth — not as a generalist, but as a specialist in the acquisition logic of each industry we enter.',
               'Cada vertical tem sua própria dinâmica de conversão, exigência de compliance e comportamento de audiência. Operamos com profundidade por vertical — não como generalista, mas como especialista na lógica de aquisição de cada setor em que entramos.')}
          </p>
          <div style={{ marginTop:48 }}>
            <Tabs value={tab} onChange={setTab} items={Object.keys(map).map(k => ({ value:k, label:map[k].title }))} />
          </div>
        </div>
      </section>
      <section className="goat-container w-sect" style={{ padding:'56px 24px var(--section-y)' }}>
        <div className="w-split" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'start' }}>
          <div>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
              <Tag vertical={d.tag} active>{d.title}</Tag>
              <Badge tone="success" icon="trending-up">{L('Scaling','Escalando')}</Badge>
            </div>
            <div style={{ marginTop:26, fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.06em',
              textTransform:'uppercase', color:'var(--text-faint)' }}>{d.label}</div>
            <div style={{ marginTop:20, display:'flex', alignItems:'baseline', gap:12 }}>
              <span style={{ fontFamily:'var(--font-display)', fontSize:'clamp(40px,5vw,64px)', fontWeight:700,
                color:'var(--accent)', lineHeight:1 }}>{d.kpi[0]}</span>
              <span style={{ fontSize:15, color:'var(--text-muted)' }}>{d.kpi[1]}</span>
            </div>
            <h2 style={{ margin:'28px 0 14px', fontSize:'var(--text-h3)' }}>{d.lead}</h2>
            <p style={{ margin:0, fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>{d.body}</p>
            <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:30 }}>
              {d.bullets.map(b => (
                <div key={b} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                  <span style={{ color:'var(--accent)', marginTop:2 }}><Icon name="check" size={17} /></span>
                  <span style={{ fontSize:15, color:'var(--text-body)' }}>{b}</span>
                </div>
              ))}
            </div>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginTop:28 }}>{d.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
            <div className="w-btnrow" style={{ display:'flex', gap:12, marginTop:36, flexWrap:'wrap' }}>
              <Button variant="primary" iconRight="arrow-right" onClick={()=>go('contact')}>
                {L('Talk to the ' + d.title + ' pod','Falar com o time de ' + d.title)}
              </Button>
              <Button variant="ghost" onClick={()=>go('work')}>{L('Case studies','Cases')}</Button>
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
            <div style={{ borderRadius:'var(--radius-card,14px)', overflow:'hidden', border:'1px solid var(--border-hairline)' }}>
              <CaseArt id={tab === 'fintech' ? 'crypto' : tab} v={tab} label={d.title} height={260} />
            </div>
            <div className="w-3col" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
              {d.stats.map(([v,l,delta]) => (
                <Card key={l} padding={20} variant="outline"><Stat size="sm" value={v} label={l} delta={delta || undefined} /></Card>
              ))}
            </div>
            <Card padding={22} variant="sunken">
              <div className="goat-eyebrow">{L('Typical engagement','Engajamento típico')}</div>
              <div style={{ display:'flex', gap:24, marginTop:14, flexWrap:'wrap' }}>
                {[[L('Model','Modelo'), 'CPA / rev-share'],
                  [L('Test window','Janela de teste'), L('90 days','90 dias')],
                  [L('Reporting','Reporte'), L('Weekly + live dash','Semanal + dash ao vivo')]].map(([k,v]) => (
                  <div key={k}><div style={{ fontSize:12, color:'var(--text-faint)' }}>{k}</div>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:13, color:'var(--text-primary)', marginTop:4 }}>{v}</div></div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { VerticalsPage });