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

const NAV_ITEMS = () => [
  ['home', L('Home','Início')],
  ['services', L('Services','Serviços')],
  ['verticals', L('Verticals','Verticais')],
  ['work', L('Work','Resultados')],
  ['contact', L('Contact','Contato')],
];

function LangToggle({ lang, switchLang }) {
  const btn = (c) => ({
    border:'none', background:'none', cursor:'pointer', padding:'2px 4px',
    fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.06em',
    color: lang===c ? 'var(--accent)' : 'var(--text-faint)',
  });
  return (
    <span style={{ display:'flex', alignItems:'center', gap:2 }}>
      <Icon name="globe" size={14} />
      <button style={btn('en')} onClick={()=>switchLang('en')}>EN</button>
      <span style={{ color:'var(--text-faint)', fontSize:11 }}>/</span>
      <button style={btn('pt')} onClick={()=>switchLang('pt')}>PT</button>
    </span>
  );
}

function Nav({ route, go, lang, switchLang }) {
  const [open, setOpen] = React.useState(false);
  const items = NAV_ITEMS();
  const jump = (k) => { setOpen(false); go(k); };
  return (
    <header style={{ position:'sticky', top:0, zIndex:40, background:'rgba(11,11,12,.86)',
      backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)', borderBottom:'1px solid var(--border-hairline)' }}>
      <div className="goat-container" style={{ display:'flex', alignItems:'center', gap:24, height:76 }}>
        <a href="#" onClick={(e)=>{e.preventDefault();jump('home');}} style={{ border:'none', display:'flex' }}>
          <Logo variant="lockup" height={26} assetBase="assets" />
        </a>
        <nav className="w-navlinks" style={{ display:'flex', gap:24, marginLeft:8 }}>
          {items.map(([k,l]) => (
            <a key={k} href="#" onClick={(e)=>{e.preventDefault();jump(k);}}
              style={{ border:'none', fontSize:14, fontWeight:600, whiteSpace:'nowrap',
                color:route===k ? 'var(--text-primary)' : 'var(--text-muted)' }}>{l}</a>
          ))}
        </nav>
        <div style={{ flex:1 }} />
        <LangToggle lang={lang} switchLang={switchLang} />
        <span className="w-navcta">
          <Button variant="primary" size="md" onClick={()=>jump('contact')}>{L('Book a growth audit','Agendar auditoria')}</Button>
        </span>
        <button className="w-navburger" onClick={()=>setOpen(!open)} aria-label="Menu"
          style={{ display:'none', alignItems:'center', justifyContent:'center', width:40, height:40,
            background:'none', border:'1px solid var(--border-hairline)', borderRadius:'var(--radius-control)',
            color:'var(--text-primary)', cursor:'pointer' }}>
          <Icon name={open ? 'x' : 'menu'} size={18} />
        </button>
      </div>
      {open ? (
        <div style={{ borderTop:'1px solid var(--border-hairline)', background:'var(--bg-page)' }}>
          <div className="goat-container" style={{ padding:'14px 24px 22px', display:'flex', flexDirection:'column', gap:2 }}>
            {items.map(([k,l]) => (
              <a key={k} href="#" onClick={(e)=>{e.preventDefault();jump(k);}}
                style={{ border:'none', padding:'12px 0', fontSize:17, fontWeight:600,
                  borderBottom:'1px solid var(--border-hairline)',
                  color:route===k ? 'var(--accent)' : 'var(--text-body)' }}>{l}</a>
            ))}
            <Button variant="primary" size="lg" fullWidth style={{ marginTop:16 }} onClick={()=>jump('contact')}>
              {L('Book a growth audit','Agendar auditoria')}
            </Button>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function Footer({ go }) {
  const cols = [
    [L('Verticals','Verticais'), ['iGaming','Forex','Crypto','Ecommerce','Nutra','NGO'], 'verticals'],
    [L('Channels','Canais'), ['Meta Ads','Google PPC','Taboola','Outbrain','Telegram Ads','Push & Pop'], 'services'],
    [L('Company','Empresa'), [L('Services','Serviços'),L('Work','Resultados'),L('Contact','Contato')], 'services'],
  ];
  return (
    <footer style={{ borderTop:'1px solid var(--border-hairline)', background:'var(--bg-page-alt)', paddingTop:64 }}>
      <div className="goat-container w-foot" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:40 }}>
        <div>
          <Logo variant="lockup" height={30} assetBase="assets" />
          <p style={{ marginTop:18, fontSize:14, color:'var(--text-muted)', maxWidth:280 }}>
            {L('Performance media for high-intent categories. Rio de Janeiro · global operations across 20+ active markets.',
               'Mídia de performance para categorias de alta intenção. Rio de Janeiro · operação global em mais de 20 mercados ativos.')}
          </p>
          <div style={{ display:'flex', gap:10, marginTop:18, color:'var(--text-faint)' }}>
            {['linkedin','send','twitter','mail'].map(i => <Icon key={i} name={i} size={17} />)}
          </div>
        </div>
        {cols.map(([t,links,dest]) => (
          <div key={t}>
            <div className="goat-eyebrow">{t}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:16 }}>
              {links.map(l => <a key={l} href="#" onClick={(e)=>{e.preventDefault();go(dest);}}
                style={{ border:'none', fontSize:14, color:'var(--text-body)' }}>{l}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div className="goat-container" style={{ display:'flex', justifyContent:'space-between', gap:16, flexWrap:'wrap',
        marginTop:56, padding:'22px 24px', borderTop:'1px solid var(--border-hairline)',
        fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-faint)' }}>
        <span>© 2026 GOAT Media Group</span>
        <span>{L('Fee + % · CPA · Rev-share','Fee + % · CPA · Rev-share')}</span>
      </div>
    </footer>
  );
}

/* Photography placeholder — no brand imagery was supplied. See README.md. */
function ImageSlot({ height = 320, label = 'Brand photography', ratio, style }) {
  return (
    <div style={{ position:'relative', height, borderRadius:'var(--radius-card)', overflow:'hidden',
      background:'linear-gradient(135deg,var(--ink-700),var(--ink-800) 60%,var(--ink-600))',
      border:'1px solid var(--border-hairline)', display:'flex', alignItems:'center', justifyContent:'center', ...style }}>
      <img src="assets/logo-mark-white.png" alt="" style={{ height:height*0.4, opacity:.07 }} />
      <span style={{ position:'absolute', left:14, bottom:12, fontFamily:'var(--font-mono)', fontSize:10,
        letterSpacing:'.04em', color:'var(--text-faint)' }}>{label}{ratio ? ' · ' + ratio : ''}</span>
    </div>
  );
}

function SectionHead({ eyebrow, title, copy, align = 'left', action }) {
  return (
    <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:32,
      marginBottom:48, flexWrap:'wrap', textAlign:align }}>
      <div style={{ maxWidth:640 }}>
        {eyebrow ? <div className="goat-eyebrow" style={{ color:'var(--text-accent)' }}>{eyebrow}</div> : null}
        <h2 style={{ marginTop:14, marginBottom:copy?16:0, fontSize:'var(--text-h2)', fontWeight:700 }}>{title}</h2>
        {copy ? <p style={{ margin:0, fontSize:'var(--text-body-lg)', color:'var(--text-muted)' }}>{copy}</p> : null}
      </div>
      {action}
    </div>
  );
}

/* Infinite accent marquee — items are duplicated so the -50% loop is seamless. */
function Marquee({ items }) {
  const row = items.concat(items);
  return (
    <div style={{ background:'var(--accent)', overflow:'hidden', borderTop:'1px solid var(--accent)' }}>
      <div style={{ display:'flex', width:'max-content', animation:'w-marquee 42s linear infinite' }}>
        {row.map((t,i) => (
          <span key={i} style={{ display:'flex', alignItems:'center', gap:22, padding:'14px 0',
            fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.1em', textTransform:'uppercase',
            color:'var(--ink-900)', whiteSpace:'nowrap' }}>
            <span style={{ paddingLeft:22 }}>{t}</span>
            <span style={{ opacity:.45 }}>◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, ImageSlot, SectionHead, Marquee, LangToggle });