// Serviços — interactive tabs with code-feel
function Servicos() {
  const services = [
    {
      key: 'web',
      tag: '01',
      icon: '</>',
      label: 'Desenvolvimento Web',
      title: 'Sites, e-commerce e plataformas sob medida',
      desc: 'Projetos rápidos, seguros e responsivos com SEO técnico e arquitetura escalável. Stack moderno, código limpo, métricas reais.',
      stack: ['Next.js', 'React', 'TypeScript', 'Node', 'Postgres', 'Vercel'],
      cta: 'Ver casos web',
      visual: 'web',
    },
    {
      key: 'apps',
      tag: '02',
      icon: '◰',
      label: 'Apps Mobile',
      title: 'Aplicativos iOS e Android com performance nativa',
      desc: 'Construímos apps cross-platform com React Native ou Flutter, integrados com seu backend e prontos para escala. UX que respeita as plataformas.',
      stack: ['React Native', 'Flutter', 'Expo', 'Firebase', 'Push', 'OTA'],
      cta: 'Ver apps lançados',
      visual: 'apps',
    },
    {
      key: 'design',
      tag: '03',
      icon: '◐',
      label: 'Design & Videomaker',
      title: 'Identidade, UI/UX e conteúdo audiovisual',
      desc: 'Branding, design system, interfaces que convertem e edição de vídeo para social — tudo conectado à mesma estratégia.',
      stack: ['Figma', 'Premiere', 'After Effects', 'Brand Kit', 'Prototype'],
      cta: 'Ver portfólio de design',
      visual: 'design',
    },
    {
      key: 'auto',
      tag: '04',
      icon: '⚙',
      label: 'Automação & IA',
      title: 'Processos que rodam sozinhos com IA acoplada',
      desc: 'Eliminamos trabalho repetitivo conectando sistemas, CRMs e modelos de IA. Bots de atendimento, integrações n8n/Zapier e agentes sob medida.',
      stack: ['n8n', 'Zapier', 'OpenAI', 'WhatsApp API', 'Webhooks'],
      cta: 'Ver automações',
      visual: 'auto',
    },
    {
      key: 'saas',
      tag: '05',
      icon: '⬡',
      label: 'Micro-SaaS',
      title: 'Lance seu próprio SaaS em semanas, não meses',
      desc: 'Da validação ao deploy: ajudamos founders a transformar uma ideia em produto cobrável, com auth, billing e infra prontos.',
      stack: ['Stripe', 'Auth', 'Multi-tenant', 'Analytics', 'CI/CD'],
      cta: 'Cofundar com a gente',
      visual: 'saas',
    },
  ];

  const [active, setActive] = React.useState('web');
  const current = services.find(s => s.key === active);

  return (
    <section className="section" id="servicos">
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <span className="eyebrow">SERVIÇOS · 05 áreas</span>
            <h2 className="h-section">Como ajudamos sua <span className="accent">empresa?</span></h2>
          </div>
          <p style={{ maxWidth: 380, color: 'var(--muted)', margin: 0, fontSize: 16 }}>
            Cinco frentes integradas. Você pode contratar uma — mas o ganho real está em combinar.
          </p>
        </div>

        {/* Tab pills */}
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 28 }}>
          {services.map(s => {
            const isActive = s.key === active;
            return (
              <button key={s.key} onClick={() => setActive(s.key)} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '12px 18px', borderRadius: 14,
                border: '1px solid', borderColor: isActive ? 'var(--ink)' : 'var(--line-2)',
                background: isActive ? 'var(--ink)' : 'var(--paper)',
                color: isActive ? '#fff' : 'var(--ink)',
                fontWeight: 500, fontSize: 14,
                transition: 'all .2s ease',
              }}>
                <span className="mono" style={{ fontSize: 11, opacity: 0.6, lineHeight: 1, display: 'inline-flex', alignItems: 'center' }}>{s.tag}</span>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 16, lineHeight: 1,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20,
                  color: isActive ? 'var(--accent)' : 'var(--primary)',
                }}>{s.icon}</span>
                <span style={{ lineHeight: 1, display: 'inline-flex', alignItems: 'center' }}>{s.label}</span>
              </button>
            );
          })}
        </div>

        {/* Active panel */}
        <div style={{
          background: 'var(--paper)', borderRadius: 24, border: '1px solid var(--line)',
          padding: 'clamp(28px, 4vw, 56px)',
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'center',
          boxShadow: '0 30px 60px -40px rgba(14,14,18,0.15)',
        }} className="serv-panel">
          <div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--primary)', marginBottom: 16 }}>
              {`// service.${current.key}`}
            </div>
            <h3 className="display" style={{
              fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.05,
              letterSpacing: '-0.02em', margin: '0 0 18px', textWrap: 'balance',
            }}>
              {current.title}
            </h3>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, margin: '0 0 24px' }}>{current.desc}</p>

            <div style={{ marginBottom: 28 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 10, letterSpacing: '0.05em' }}>STACK</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {current.stack.map(t => (
                  <span key={t} className="mono" style={{
                    padding: '5px 10px', fontSize: 12,
                    background: 'var(--bg-warm)', border: '1px solid var(--line)',
                    borderRadius: 6,
                  }}>{t}</span>
                ))}
              </div>
            </div>
            <a href="#projetos" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontWeight: 600, color: 'var(--ink)',
              borderBottom: '1px solid var(--ink)', paddingBottom: 2,
            }}>
              {current.cta} <span>→</span>
            </a>
          </div>

          <ServiceVisual variant={current.visual} />
        </div>
      </div>

      <style>{`
        @media (max-width: 900px){
          .serv-panel{ grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// Visual per service — illustrative placeholders, all CSS/SVG
function ServiceVisual({ variant }) {
  const wrap = {
    background: 'var(--bg)', borderRadius: 16, border: '1px solid var(--line)',
    aspectRatio: '4 / 3', padding: 20, position: 'relative', overflow: 'hidden',
  };
  if (variant === 'web') {
    return (
      <div style={wrap}>
        <div style={{ background: 'var(--paper)', borderRadius: 10, height: '100%', boxShadow: '0 20px 40px -20px rgba(14,14,18,0.2)', display: 'flex', flexDirection: 'column', overflow: 'hidden', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '8px 12px', borderBottom: '1px solid var(--line)' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57' }}></span>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBC2E' }}></span>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840' }}></span>
            <span className="mono" style={{ marginLeft: 12, fontSize: 11, color: 'var(--muted)' }}>cliente.com.br</span>
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 10, alignItems: 'center' }}>
              <div style={{ height: 6, background: 'var(--ink)', borderRadius: 3, width: 60 }}></div>
              <div style={{ height: 4, background: 'var(--line-2)', borderRadius: 2, width: 30 }}></div>
              <div style={{ height: 16, background: 'var(--primary)', borderRadius: 10, width: 50 }}></div>
            </div>
            <div style={{ height: 18, background: 'var(--ink)', borderRadius: 4, width: '70%', marginTop: 8 }}></div>
            <div style={{ height: 18, background: 'var(--ink)', borderRadius: 4, width: '50%' }}></div>
            <div style={{ height: 6, background: 'var(--line-2)', borderRadius: 3, width: '85%' }}></div>
            <div style={{ height: 6, background: 'var(--line-2)', borderRadius: 3, width: '60%' }}></div>
            <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
              <div style={{ flex: 1, height: 50, background: 'var(--bg-warm)', borderRadius: 6 }}></div>
              <div style={{ flex: 1, height: 50, background: 'var(--bg-warm)', borderRadius: 6 }}></div>
              <div style={{ flex: 1, height: 50, background: 'var(--primary-soft)', borderRadius: 6, border: '1px solid var(--primary)' }}></div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (variant === 'apps') {
    return (
      <div style={{ ...wrap, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
        {[0, 1].map(i => (
          <div key={i} style={{
            width: 110, height: 220, background: i === 0 ? 'var(--ink)' : 'var(--paper)',
            borderRadius: 18, padding: 8, border: '1px solid var(--line-2)',
            transform: i === 0 ? 'rotate(-4deg) translateY(-8px)' : 'rotate(4deg) translateY(8px)',
            boxShadow: '0 20px 40px -20px rgba(14,14,18,0.3)',
          }}>
            <div style={{ background: i === 0 ? '#1B1B22' : 'var(--bg)', height: '100%', borderRadius: 12, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ height: 4, background: i === 0 ? '#3a3a45' : 'var(--line-2)', width: 30, borderRadius: 2, alignSelf: 'center' }}></div>
              <div style={{ height: 16, background: i === 0 ? 'var(--primary)' : 'var(--ink)', borderRadius: 4, width: '80%' }}></div>
              <div style={{ height: 4, background: i === 0 ? '#3a3a45' : 'var(--line-2)', width: '60%', borderRadius: 2 }}></div>
              <div style={{ height: 36, background: i === 0 ? '#252530' : 'var(--paper)', borderRadius: 8, marginTop: 4 }}></div>
              <div style={{ height: 36, background: i === 0 ? '#252530' : 'var(--paper)', borderRadius: 8 }}></div>
              <div style={{ marginTop: 'auto', height: 28, background: i === 0 ? 'var(--accent)' : 'var(--primary)', borderRadius: 14 }}></div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (variant === 'design') {
    return (
      <div style={wrap}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 10, height: '100%' }}>
          <div style={{ background: 'var(--ink)', borderRadius: 10, padding: 14, color: '#fff', display: 'flex', alignItems: 'flex-end' }}>
            <span className="display" style={{ fontSize: 28, fontWeight: 700, lineHeight: 1 }}>Aa</span>
          </div>
          <div style={{ background: 'var(--primary)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {['#FFE16A', '#FF6B9C', '#5B47F5', '#0E0E12'].map(c => (
                <div key={c} style={{ width: 12, height: 28, background: c, borderRadius: 2 }}></div>
              ))}
            </div>
          </div>
          <div style={{ background: 'var(--paper)', borderRadius: 10, padding: 14, border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>brand.kit</div>
            <Logo size={20} mono={false} />
          </div>
          <div style={{ background: 'var(--bg-warm)', borderRadius: 10, padding: 14, border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="50" height="50" viewBox="0 0 50 50">
                <polygon points="20,15 38,25 20,35" fill="var(--ink)" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (variant === 'auto') {
    const left = [
      { label: 'WhatsApp', color: '#25D366' },
      { label: 'Formulário', color: '#5B47F5' },
      { label: 'Stripe', color: '#635BFF' },
    ];
    const right = [
      { label: 'CRM', color: '#0E0E12' },
      { label: 'Sheets', color: '#0F9D58' },
      { label: 'Slack', color: '#4A154B' },
    ];
    const W = 420, H = 280;
    const nodeW = 116, nodeH = 44;
    const leftX = 16, rightX = W - nodeW - 16;
    const hubW = 88, hubH = 64;
    const hubX = (W - hubW) / 2, hubY = (H - hubH) / 2;
    const ys = [40, (H - nodeH) / 2, H - nodeH - 40];
    const Node = ({ x, y, label, color, align }) => (
      <g>
        <rect x={x} y={y} width={nodeW} height={nodeH} rx="10" fill="#fff" stroke="var(--line-2)" />
        <circle cx={align === 'left' ? x + 14 : x + nodeW - 14} cy={y + nodeH / 2} r="5" fill={color} />
        <text x={align === 'left' ? x + 26 : x + nodeW - 26} y={y + nodeH / 2 + 4}
          textAnchor={align === 'left' ? 'start' : 'end'}
          fontFamily="JetBrains Mono, monospace" fontSize="12" fill="var(--ink)">{label}</text>
      </g>
    );
    return (
      <div style={wrap}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
          <defs>
            <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 z" fill="var(--ink)" />
            </marker>
          </defs>
          {/* Lines: left nodes -> hub -> right nodes */}
          {ys.map((y, i) => {
            const cy = y + nodeH / 2;
            const hubCY = hubY + hubH / 2;
            const x1 = leftX + nodeW;
            const x2 = hubX;
            const x3 = hubX + hubW;
            const x4 = rightX;
            const mid1 = (x1 + x2) / 2;
            const mid2 = (x3 + x4) / 2;
            return (
              <g key={i}>
                <path d={`M${x1},${cy} C${mid1},${cy} ${mid1},${hubCY} ${x2},${hubCY}`}
                  stroke="var(--ink)" fill="none" strokeWidth="1.5" strokeDasharray="3 4" markerEnd="url(#arrow)" opacity="0.5" />
                <path d={`M${x3},${hubCY} C${mid2},${hubCY} ${mid2},${cy} ${x4},${cy}`}
                  stroke="var(--ink)" fill="none" strokeWidth="1.5" strokeDasharray="3 4" markerEnd="url(#arrow)" opacity="0.5" />
              </g>
            );
          })}
          {/* Left nodes */}
          {left.map((n, i) => <Node key={`l${i}`} x={leftX} y={ys[i]} label={n.label} color={n.color} align="left" />)}
          {/* Right nodes */}
          {right.map((n, i) => <Node key={`r${i}`} x={rightX} y={ys[i]} label={n.label} color={n.color} align="left" />)}
          {/* Hub */}
          <rect x={hubX} y={hubY} width={hubW} height={hubH} rx="12" fill="var(--ink)" />
          <text x={hubX + hubW / 2} y={hubY + hubH / 2 - 2} textAnchor="middle"
            fontFamily="JetBrains Mono, monospace" fontSize="15" fontWeight="700" fill="var(--accent)">n8n</text>
          <text x={hubX + hubW / 2} y={hubY + hubH / 2 + 14} textAnchor="middle"
            fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#888">automation</text>
        </svg>
      </div>
    );
  }
  if (variant === 'saas') {
    return (
      <div style={wrap}>
        <div style={{ background: 'var(--paper)', borderRadius: 10, height: '100%', display: 'flex', flexDirection: 'column', border: '1px solid var(--line)', overflow: 'hidden' }}>
          <div style={{ padding: 14, borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 22, height: 22, background: 'var(--primary)', borderRadius: 6 }}></div>
              <span style={{ fontWeight: 700, fontSize: 14 }}>SeuSaaS</span>
            </div>
            <span className="mono" style={{ fontSize: 10, padding: '2px 8px', background: 'var(--accent)', color: 'var(--ink)', borderRadius: 4, fontWeight: 700 }}>PRO</span>
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>MRR</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span className="display" style={{ fontSize: 32, fontWeight: 700 }}>R$ 18.4k</span>
              <span style={{ color: 'var(--accent)', fontSize: 12, fontWeight: 600 }}>+24%</span>
            </div>
            {/* Mini chart */}
            <svg viewBox="0 0 200 50" style={{ width: '100%', height: 50 }}>
              <path d="M0,40 L25,35 L50,38 L75,28 L100,22 L125,25 L150,15 L175,10 L200,5" fill="none" stroke="var(--primary)" strokeWidth="2.5" />
              <path d="M0,40 L25,35 L50,38 L75,28 L100,22 L125,25 L150,15 L175,10 L200,5 L200,50 L0,50 z" fill="var(--primary-soft)" />
            </svg>
          </div>
        </div>
      </div>
    );
  }
  return <div style={wrap}></div>;
}

window.Servicos = Servicos;