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

const CASES = () => [
  { id:'igaming', v:'igaming', vert:'iGaming', market:'Brazil', model:'Certified PPC',
    label:L('iGaming · Online Casino · Brazil','iGaming · Cassino online · Brasil'),
    title:L('130,000 FTDs in a single month','130.000 FTDs em um único mês'),
    stats:[['130k', L('FTDs / month','FTDs / mês'),'+2500%'],['$12', L('Cost per FTD','Custo por FTD'),''],['26×', L('Growth','Crescimento'),'']],
    tags:['26× Growth','130k FTDs / mo','$12 CPF','Certified PPC','Brazil'],
    brief:L('A Brazilian online casino operator was generating 5,000 FTDs per month, with no clear path to scale and rising acquisition costs.',
            'Um operador de cassino online no Brasil gerava 5.000 FTDs por mês, sem caminho claro de escala e com custo de aquisição subindo.'),
    did:L('We restructured the entire media operation: certified PPC accounts, deposit-optimised conversion tracking, and a compliant creative framework built specifically for the Brazilian regulatory environment.',
          'Reestruturamos toda a operação de mídia: contas de PPC certificadas, tracking de conversão otimizado a depósito e um framework de criativo em compliance feito para o ambiente regulatório brasileiro.'),
    out:L('130,000 FTDs in one month — a 26× growth in player acquisition, with cost-per-FTD held at $12, one of the lowest benchmarks in LATAM at this volume.',
          '130.000 FTDs em um mês — crescimento de 26× na aquisição de jogadores, com custo por FTD mantido em US$ 12, um dos menores benchmarks da LATAM nesse volume.'),
    mix:[['Google PPC',44],['Native',26],['Meta',20],['Push & Pop',10]] },
  { id:'forex', v:'forex', vert:'Forex', market:'LATAM & Europe', model:'CPFTD',
    label:L('Forex · Regulated Broker · LATAM & Europe','Forex · Corretora regulada · LATAM & Europa'),
    title:L('30,000+ funded accounts every month','30.000+ contas financiadas por mês'),
    stats:[['30k+', L('Funded accounts / mo','Contas financiadas / mês'),''],['90', L('Days to benchmark','Dias até benchmark'),''],['3', L('Regions','Regiões'),'']],
    tags:['30k FTDs / mo','LATAM','Europe','Asia','CPFTD Optimized'],
    brief:L('A regulated broker across LATAM and Europe had the defining problem of the vertical: high lead volume, low funded-account conversion. Their previous partner optimised for CPL.',
            'Uma corretora regulada em LATAM e Europa tinha o problema clássico da vertical: muito lead, pouca conversão em conta financiada. O parceiro anterior otimizava CPL.'),
    did:L('We rebuilt the acquisition funnel from the media layer up — channel mix, landing page architecture, qualification flow and CRM handoff — and optimised to CPFTD.',
          'Reconstruímos o funil de aquisição da camada de mídia para cima — mix de canais, arquitetura de landing, fluxo de qualificação e handoff de CRM — otimizando para CPFTD.'),
    out:L('Within 90 days monthly funded accounts exceeded 30,000 across LATAM, Europe and Asia, with cost-per-funded-account below market benchmark in every geo.',
          'Em 90 dias as contas financiadas passaram de 30.000 por mês em LATAM, Europa e Ásia, com custo por conta financiada abaixo do benchmark de mercado em todos os geos.'),
    mix:[['Google PPC',38],['Native',30],['Meta',22],['SMS',10]] },
  { id:'crypto', v:'fintech', vert:'Crypto', market:'Global', model:'Multi-network',
    label:L('Crypto · Tier-1 Exchange · Global','Crypto · Exchange tier-1 · Global'),
    title:L('100,000+ verified users a month','100.000+ usuários verificados por mês'),
    stats:[['100k+', L('Verified users / mo','Usuários verificados / mês'),''],['4', L('Networks','Redes'),''],['0', L('Interruptions','Interrupções'),'']],
    tags:['100k Users / mo','Global','Compliant','Multi-Network','Telegram','Native'],
    brief:L('A tier-1 crypto exchange needed user acquisition at scale across multiple markets at once, in one of the most restricted advertising categories in digital media.',
            'Uma exchange de crypto tier-1 precisava de aquisição em escala em vários mercados ao mesmo tempo, em uma das categorias mais restritas da mídia digital.'),
    did:L('We deployed a compliant multi-network strategy across Meta, native, push and Telegram, while engineering the onboarding offer for maximum verified-registration rate.',
          'Implantamos uma estratégia multi-rede em compliance com Meta, native, push e Telegram, e desenhamos a oferta de onboarding para taxa máxima de registro verificado.'),
    out:L('100,000+ new verified users generated consistently month over month, with activation metrics above industry benchmark.',
          'Mais de 100.000 novos usuários verificados de forma consistente mês após mês, com métricas de ativação acima do benchmark do setor.'),
    mix:[['Telegram',34],['Native',28],['Meta',24],['Push',14]] },
  { id:'ecommerce', v:'ecommerce', vert:'Ecommerce', market:'LATAM · USA · EU', model:'Fee + %',
    label:L('DTC · Wellness & Nutraceuticals · Global','DTC · Wellness & nutracêuticos · Global'),
    title:L('50,000+ sales in a single month','50.000+ vendas em um único mês'),
    stats:[['50k+', L('Sales / month','Vendas / mês'),''],['3.1x', L('Cold ROAS','ROAS frio'),'+38%'],['3', L('Regions profitable','Regiões no lucro'),'']],
    tags:['50k Sales / mo','DTC','Meta Ads','Native','LATAM','USA','Europe'],
    brief:L('A DTC wellness and nutraceuticals brand had plateaued at mid-five-figure monthly revenue: creative fatigue, attribution gaps and a media strategy disconnected from unit economics.',
            'Uma marca DTC de wellness e nutracêuticos estagnou em receita mensal de cinco dígitos: fadiga de criativo, lacunas de atribuição e mídia desconectada da economia unitária.'),
    did:L('We rebuilt the creative operation, implemented server-side tracking tied to contribution margin — not platform ROAS — and scaled media across Meta and native networks.',
          'Reconstruímos a operação de criativo, implementamos tracking server-side ligado à margem de contribuição — não ao ROAS de plataforma — e escalamos mídia em Meta e redes de native.'),
    out:L('50,000+ sales in a single month, with profitability maintained at scale across LATAM, Europe and the United States.',
          '50.000+ vendas em um único mês, com rentabilidade mantida em escala na LATAM, Europa e Estados Unidos.'),
    mix:[['Meta',52],['Native',28],['Google PPC',14],['Email',6]] },
];

function WorkMetricBar() {
  const rows = [
    ['$5M+', L('Ad spend / month','Verba / mês')],
    ['100k+', L('iGaming FTDs / mo','FTDs iGaming / mês')],
    ['30k+', L('Forex FTDs / mo','FTDs Forex / mês')],
    ['100k+', L('Crypto users / mo','Usuários crypto / mês')],
    ['100k+', L('Ecommerce sales / mo','Vendas ecommerce / mês')],
    ['20+', L('Active markets','Mercados ativos')],
  ];
  return (
    <section style={{ borderTop:'1px solid var(--border-hairline)', background:'var(--bg-page-alt)' }}>
      <div className="goat-container w-sect" style={{ padding:'64px 24px' }}>
        <div className="w-3col" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:28 }}>
          {rows.map(([v,l]) => <Stat key={l} value={v} label={l} />)}
        </div>
      </div>
    </section>
  );
}

function WorkCaseDetail({ c, back, go }) {
  const sections = [
    [L('The problem','O problema'), c.brief],
    [L('What we did','O que fizemos'), c.did],
    [L('The outcome','O resultado'), c.out],
  ];
  return (
    <div>
      <section style={{ borderBottom:'1px solid var(--border-hairline)' }}>
        <div className="goat-container w-sect" style={{ padding:'40px 24px 64px' }}>
          <Button variant="ghost" size="sm" iconLeft="arrow-left" onClick={back}>{L('All case studies','Todos os cases')}</Button>
          <div style={{ display:'flex', gap:8, marginTop:26, flexWrap:'wrap' }}>
            <Tag vertical={c.v} active>{c.vert}</Tag><Tag>{c.market}</Tag><Badge tone="info">{c.model}</Badge>
          </div>
          <h1 style={{ marginTop:22, fontSize:'var(--text-display-2)', lineHeight:'var(--leading-display)',
            letterSpacing:'var(--tracking-display)', fontWeight:700, maxWidth:900 }}>{c.title}</h1>
          <div className="w-3col" style={{ display:'grid', gridTemplateColumns:'repeat(3,max-content)', gap:56, marginTop:44 }}>
            {c.stats.map(([v,l,d]) => <Stat key={l} size="lg" value={v} label={l} delta={d || undefined} />)}
          </div>
        </div>
      </section>
      <section className="goat-container w-sect" style={{ padding:'56px 24px var(--section-y)' }}>
        <CaseArt id={c.id} v={c.v} label={c.label} height={360} />
        <div className="w-split" style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:56, marginTop:56 }}>
          <div>
            {sections.map(([h,p]) => (
              <div key={h} style={{ marginBottom:36 }}>
                <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{h}</div>
                <p style={{ margin:'14px 0 0', fontSize:17, lineHeight:1.65, color:'var(--text-body)' }}>{p}</p>
              </div>
            ))}
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>{c.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
            <Card padding={24} variant="outline">
              <div className="goat-eyebrow">{L('Channel mix','Mix de canais')}</div>
              <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:18 }}>
                {c.mix.map(([n,pct]) => (
                  <div key={n}>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--text-body)' }}>
                      <span>{n}</span><span style={{ fontFamily:'var(--font-mono)', color:'var(--text-primary)' }}>{pct}%</span>
                    </div>
                    <div style={{ height:4, background:'var(--ink-600)', marginTop:8, borderRadius:2 }}>
                      <div style={{ width:pct + '%', height:'100%', background:'var(--accent)', borderRadius:2 }} />
                    </div>
                  </div>
                ))}
              </div>
            </Card>
            <Card padding={24} accentEdge>
              <span style={{ color:'var(--accent)' }}><Icon name="quote" size={20} /></span>
              <p style={{ margin:'16px 0 14px', fontSize:17, lineHeight:1.5, color:'var(--text-primary)', fontFamily:'var(--font-display)' }}>
                {L('They report on funded accounts and deposits. Not impressions.','Eles reportam conta financiada e depósito. Não impressão.')}
              </p>
              <div style={{ fontSize:13, color:'var(--text-muted)' }}>{L('Head of Acquisition · client','Head de Aquisição · cliente')}</div>
            </Card>
          </div>
        </div>
        <Card padding={40} style={{ marginTop:40, display:'flex', alignItems:'center', gap:32, flexWrap:'wrap' }}>
          <h3 style={{ margin:0, flex:1, minWidth:260 }}>{L('Want this run on your accounts?','Quer isso rodando nas suas contas?')}</h3>
          <Button variant="primary" size="lg" iconRight="arrow-right" onClick={()=>go('contact')}>
            {L('Request a free audit','Solicitar auditoria gratuita')}
          </Button>
        </Card>
      </section>
    </div>
  );
}

function Work({ go }) {
  const [filter, setFilter] = React.useState('all');
  const [open, setOpen] = React.useState(null);
  const cases = CASES();
  if (open) {
    const c = cases.find(x => x.id === open);
    if (c) return <WorkCaseDetail c={c} back={()=>setOpen(null)} go={go} />;
  }
  const list = filter === 'all' ? cases : cases.filter(c => c.id === filter);
  return (
    <div>
      <section style={{ borderBottom:'1px solid var(--border-hairline)' }}>
        <div className="goat-container w-sect" style={{ padding:'84px 24px 52px' }}>
          <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{L('Real results','Resultados reais')}</div>
          <h1 style={{ marginTop:18, fontSize:'var(--text-display-2)', lineHeight:'var(--leading-display)',
            letterSpacing:'var(--tracking-display)', fontWeight:700, maxWidth:820 }}>
            {L('Numbers that speak for themselves.','Números que falam por si.')}
          </h1>
          <p style={{ marginTop:22, maxWidth:620, fontSize:'var(--text-body-lg)', color:'var(--text-muted)' }}>
            {L('Every figure below represents a real operation, a real client and a real outcome. No modelled projections. No blended averages. No vanity metrics.',
               'Cada número abaixo representa uma operação real, um cliente real e um resultado real. Sem projeção modelada. Sem média consolidada. Sem métrica de vanidade.')}
          </p>
          <div style={{ display:'flex', gap:10, marginTop:36, flexWrap:'wrap' }}>
            <Tag active={filter==='all'} onClick={()=>setFilter('all')}>{L('All','Todos')}</Tag>
            {cases.map(c => <Tag key={c.id} vertical={c.v} active={filter===c.id} onClick={()=>setFilter(c.id)}>{c.vert}</Tag>)}
          </div>
        </div>
      </section>
      <WorkCharts />
      <section className="goat-container w-sect" style={{ padding:'32px 24px var(--section-y)' }}>
        <div className="w-2col" style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:16 }}>
          {list.map(c => (
            <Card key={c.id} padding={0} interactive style={{ cursor:'pointer', overflow:'hidden' }} onClick={()=>setOpen(c.id)}>
              <CaseArt id={c.id} v={c.v} label={c.market} height={200} />
              <div style={{ padding:26 }}>
                <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
                  <Tag vertical={c.v}>{c.vert}</Tag><Tag>{c.market}</Tag>
                </div>
                <h3 style={{ margin:'18px 0 0', fontSize:'var(--text-h4)' }}>{c.title}</h3>
                <div style={{ display:'flex', gap:32, marginTop:24, flexWrap:'wrap' }}>
                  {c.stats.slice(0,2).map(([v,l,d]) => <Stat key={l} size="sm" value={v} label={l} delta={d || undefined} />)}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </section>
      <WorkMetricBar />
    </div>
  );
}
Object.assign(window, { Work });