const SERVICES = [
  { n: "01", title: "Sites & Landing Pages", desc: "Sites institucionais, landing pages e portais — rápidos, responsivos e prontos para converter.", icon: "globe" },
  { n: "02", title: "Software sob-demanda", desc: "Sistemas internos, ERPs, dashboards, integrações — construídos do zero para o seu processo.", icon: "code" },
  { n: "03", title: "SaaS & Plataformas", desc: "Do MVP ao produto escalável, com billing, auth, analytics e tudo que um SaaS precisa.", icon: "layers" },
  { n: "04", title: "Automação de WhatsApp", desc: "Chatbots e automações via WhatsApp — atendimento 24/7 que converte e não cansa.", icon: "chat" },
  { n: "05", title: "E-commerce", desc: "Lojas virtuais sob medida ou em plataforma — checkout otimizado, integrações e performance.", icon: "cart" },
  { n: "06", title: "Branding", desc: "Identidade visual completa: logo, paleta, tipografia, manual e aplicação em cada ponto de contato.", icon: "star" },
  { n: "07", title: "Social & Arte Diária", desc: "Conteúdo visual contínuo para redes sociais — feed, stories, reels e campanhas pagas.", icon: "grid" },
];

const Icon = ({ name }) => {
  const P = { strokeWidth: 1.6, stroke: 'currentColor', fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case "globe": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    case "code": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"/></svg>;
    case "layers": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5M3 18l9 5 9-5"/></svg>;
    case "chat": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><path d="M21 12a8 8 0 01-11.5 7.2L3 21l1.8-6.5A8 8 0 1121 12z"/><circle cx="8.5" cy="12" r=".5" fill="currentColor"/><circle cx="12" cy="12" r=".5" fill="currentColor"/><circle cx="15.5" cy="12" r=".5" fill="currentColor"/></svg>;
    case "cart": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><path d="M3 3h2l2.4 12.3a2 2 0 002 1.7h8.8a2 2 0 002-1.6L22 7H6"/><circle cx="9" cy="21" r="1"/><circle cx="18" cy="21" r="1"/></svg>;
    case "star": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><path d="M12 3l2.7 5.6 6 1-4.3 4.4L17 20l-5-2.8L7 20l.7-6-4.3-4.4 6-1L12 3z"/></svg>;
    case "grid": return <svg width="24" height="24" viewBox="0 0 24 24" {...P}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    default: return null;
  }
};

const ArrowTR = () => <svg width="20" height="20" viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;

const Services = ({ layout = 'grid' }) => {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Serviços · 01</div>
            <h2 style={{marginTop:20}}>Tudo que um<br/>produto digital<br/>pede. <em className="grad-text" style={{fontWeight:400}}>Sem terceirizar.</em></h2>
          </div>
          <div className="body">
            Sete disciplinas integradas dentro do mesmo time. O design conversa com o código, o código conversa com a marca, a marca conversa com a conversão. Cada entrega sai afiada porque nada atravessa muros.
          </div>
        </div>

        {layout === 'grid' && (
          <div className="svc-grid">
            {SERVICES.map((s, i) => (
              <div key={i} className="svc-card">
                <div className="num">{s.n} / 07</div>
                <div className="arrow"><ArrowTR/></div>
                <div className="icon"><Icon name={s.icon}/></div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            ))}
            <div className="svc-card" style={{background:'transparent',display:'flex',alignItems:'center',justifyContent:'center',textAlign:'center',padding:40}}>
              <div>
                <div className="mono" style={{marginBottom:14}}>+ combinar</div>
                <div style={{fontFamily:'var(--font-display)',fontSize:22,letterSpacing:'-.02em',lineHeight:1.2}}>
                  Monte um pacote<br/><em style={{color:'var(--teal)'}}>sob medida.</em>
                </div>
              </div>
            </div>
          </div>
        )}

        {layout === 'list' && (
          <div className="svc-list">
            {SERVICES.map((s, i) => (
              <div key={i} className="svc-row">
                <div className="num">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="arr"><ArrowTR/></div>
              </div>
            ))}
          </div>
        )}

        {layout === 'bento' && (
          <div className="svc-bento">
            <div className="b b-1">
              <div style={{display:'flex',justifyContent:'space-between'}}>
                <div className="mono">01 · carro-chefe</div>
                <div className="icon"><Icon name="code"/></div>
              </div>
              <div>
                <h3 className="big">Software<br/>sob-demanda.</h3>
                <p>Sistemas, ERPs, dashboards e integrações. Arquitetura feita pra durar.</p>
              </div>
            </div>
            <div className="b b-2">
              <div className="mono">02</div>
              <div><h3>Sites & Landing Pages</h3><p>Rápidos, responsivos, convertendo.</p></div>
            </div>
            <div className="b b-3">
              <div className="mono">03</div>
              <h3>SaaS</h3>
            </div>
            <div className="b b-4">
              <div className="mono">04</div>
              <h3>WhatsApp</h3>
            </div>
            <div className="b b-5">
              <div className="mono">05</div>
              <h3>E-commerce</h3>
            </div>
            <div className="b b-6">
              <div className="mono">06</div>
              <div><h3>Branding</h3><p>Identidade completa, manual e aplicação.</p></div>
            </div>
            <div className="b b-7">
              <div className="mono">07</div>
              <div><h3>Social & Arte diária</h3><p>Feed, stories, reels, campanhas.</p></div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

window.Services = Services;
window.ServicesIcon = Icon;