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

const WA_NUMBER = '5521992981090';

function WhatsAppPanel() {
  const VERTICALS = ['iGaming','Forex','Crypto','Ecommerce / DTC'];
  const BUDGETS = ['< $50k','$50k – $150k','$150k – $500k','$500k+'];
  const [vert, setVert] = React.useState('iGaming');
  const [budget, setBudget] = React.useState('$50k – $150k');
  const ref = React.useMemo(() => {
    const p = new URLSearchParams(window.location.search);
    const src = p.get('utm_source') || 'site';
    return 'WEB-' + src.toUpperCase() + '-' + Date.now().toString(36).toUpperCase().slice(-5);
  }, []);
  const message = L(
    'Hi GOAT — I came from your website and I want the free acquisition audit.\n\nVertical: ' + vert +
      '\nMonthly media budget: ' + budget + '\n\nRef: ' + ref,
    'Olá, GOAT — vim pelo site e quero a auditoria de aquisição gratuita.\n\nVertical: ' + vert +
      '\nVerba mensal de mídia: ' + budget + '\n\nRef: ' + ref);
  const href = 'https://wa.me/' + WA_NUMBER + '?text=' + encodeURIComponent(message);
  const open = () => {
    try {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event:'whatsapp_click', source:'website', vertical:vert, budget:budget, ref:ref });
    } catch (e) { /* tracking is never a blocker */ }
    window.open(href, '_blank', 'noopener');
  };
  return (
    <Card padding={34} variant="raised">
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <span style={{ color:'#2FD5DA' }}><Icon name="message-circle" size={20} /></span>
        <span className="goat-eyebrow" style={{ color:'var(--text-primary)' }}>{L('Talk to a buyer on WhatsApp','Fale com um operador no WhatsApp')}</span>
      </div>
      <h2 style={{ margin:'20px 0 0', fontSize:'var(--text-h3)' }}>
        {L('Two taps and you are talking to the team that runs the accounts.',
           'Dois toques e você já está falando com quem roda as contas.')}
      </h2>
      <p style={{ margin:'14px 0 0', fontSize:15, color:'var(--text-muted)', lineHeight:1.6 }}>
        {L('Pick your vertical and budget band — we prefill the message so the first reply already comes with benchmarks for your operation.',
           'Escolha sua vertical e faixa de verba — a mensagem já vai preenchida, então a primeira resposta já vem com benchmarks da sua operação.')}
      </p>
      <div style={{ marginTop:28 }}>
        <div className="goat-eyebrow" style={{ marginBottom:12 }}>{L('Vertical','Vertical')}</div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {VERTICALS.map(v => <Tag key={v} active={vert===v} onClick={()=>setVert(v)}>{v}</Tag>)}
        </div>
      </div>
      <div style={{ marginTop:24 }}>
        <div className="goat-eyebrow" style={{ marginBottom:12 }}>{L('Monthly media budget','Verba mensal de mídia')}</div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {BUDGETS.map(b => <Tag key={b} active={budget===b} onClick={()=>setBudget(b)}>{b}</Tag>)}
        </div>
      </div>
      <div style={{ marginTop:28, padding:'18px 20px', borderRadius:12, border:'1px dashed var(--border-subtle)',
        background:'rgba(255,255,255,.02)' }}>
        <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', textTransform:'uppercase',
          color:'var(--text-faint)' }}>{L('Message preview','Prévia da mensagem')}</div>
        <p style={{ margin:'12px 0 0', fontSize:14, lineHeight:1.65, color:'var(--text-body)', whiteSpace:'pre-line' }}>{message}</p>
      </div>
      <Button variant="primary" size="lg" fullWidth iconRight="arrow-right" style={{ marginTop:26 }} onClick={open}>
        {L('Open WhatsApp','Abrir WhatsApp')}
      </Button>
      <p style={{ margin:'16px 0 0', fontSize:12, color:'var(--text-faint)', textAlign:'center' }}>
        {L('+55 21 99298-1090 · a real operator replies, not a bot.','+55 21 99298-1090 · responde um operador de verdade, não um bot.')}
      </p>
    </Card>
  );
}

function Contact() {
  const perks = [
    ['clock', L('Reply within one business day','Resposta em um dia útil')],
    ['shield-check', L('NDA before any account access','NDA antes de qualquer acesso')],
    ['globe', L('Calls in EN, PT and ES','Calls em EN, PT e ES')],
  ];
  return (
    <div style={{ position:'relative' }}>
      <section className="goat-container w-sect" style={{ padding:'84px 24px var(--section-y)' }}>
        <div className="w-split" style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:56, alignItems:'start' }}>
          <div>
            <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{L('Next step','Próximo passo')}</div>
            <h1 style={{ marginTop:18, fontSize:'var(--text-display-2)', lineHeight:'var(--leading-display)',
              letterSpacing:'var(--tracking-display)', fontWeight:700 }}>
              {L('Show us the accounts.','Mostre as contas.')}
            </h1>
            <p style={{ marginTop:22, fontSize:'var(--text-body-lg)', color:'var(--text-muted)', maxWidth:480 }}>
              {L('In 30 minutes we map where your acquisition operation is leaving money on the table, which channels underperform against your vertical benchmark, and what the partnership would look like in practice. No pitch deck.',
                 'Em 30 minutos mapeamos onde sua operação de aquisição está deixando dinheiro na mesa, quais canais estão abaixo do benchmark da sua vertical e como a parceria funcionaria na prática. Sem deck de vendas.')}
            </p>
            <Card padding={26} accentEdge variant="raised" style={{ marginTop:32 }}>
              <Badge tone="accent">{L('Free acquisition audit','Auditoria de aquisição gratuita')}</Badge>
              <p style={{ margin:'16px 0 0', fontSize:15, color:'var(--text-body)', lineHeight:1.6 }}>
                {L('Before any engagement we audit channels, costs, conversion funnel and tracking setup, and benchmark it against our active operations in your vertical. You walk away with a clear diagnosis regardless of whether we work together.',
                   'Antes de qualquer contrato auditamos canais, custos, funil de conversão e tracking, comparando com nossas operações ativas na sua vertical. Você sai com um diagnóstico claro, independentemente de fecharmos ou não.')}
              </p>
            </Card>
            <div style={{ display:'flex', flexDirection:'column', gap:16, marginTop:36 }}>
              {perks.map(([i,t]) => (
                <div key={t} style={{ display:'flex', gap:12, alignItems:'center' }}>
                  <span style={{ color:'var(--accent)' }}><Icon name={i} size={18} /></span>
                  <span style={{ fontSize:15, color:'var(--text-body)' }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop:40, paddingTop:28, borderTop:'1px solid var(--border-hairline)' }}>
              <div className="goat-eyebrow">{L('Direct','Direto')}</div>
              <div style={{ marginTop:14, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--text-primary)' }}>Executive@goatgroup.com</div>
              <div style={{ marginTop:6, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--text-muted)' }}>WhatsApp · +55 21 99298-1090</div>
              <div style={{ marginTop:14, fontSize:13, color:'var(--text-faint)' }}>
                {L('Rio de Janeiro, Brazil · global operations · 20+ active markets',
                   'Rio de Janeiro, Brasil · operação global · mais de 20 mercados ativos')}
              </div>
            </div>
          </div>
          <WhatsAppPanel />
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { Contact });