// ServiceCards — 4-column row with dark cards, each with a subtle decorative SVG bleed
function ServiceCards() {
  const cards = [
    { title: "Strategy & Systems", body: "Services that align your team, brand, and content operations with the measurements to prove it.", accent: "#B11871", shape: "stripes" },
    { title: "Content Creation", body: "Built to perform on the platforms where your audience actually pays attention.", accent: "#2f2fa2", shape: "squiggle" },
    { title: "Execution & Publishing", body: "Daily rhythm, monthly cadence, quarterly audit, without dropping the ball.", accent: "#5352d4", shape: "blob" },
    { title: "Engagement & Moderation", body: "Your comment section is the front line. We don't leave it undefended.", accent: "#556b2f", shape: "dots" },
  ];
  return (
    <section className="section" style={{background:'#000'}}>
      <div className="wrap">
        <h2 style={{textAlign:'center', fontSize: 44, fontWeight: 700, lineHeight: 1.1, margin: 0, marginBottom: 48, letterSpacing:'-.01em'}}>
          The Systems Behind Consistent,<br/>
          <span className="ck-under">Human-First</span> Social
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16}}>
          {cards.map((c, i) => (
            <div key={c.title} style={{background:'#0a0a0a', border:'1px solid #1f1f1f', borderRadius: 14, padding: 28, position:'relative', overflow:'hidden', minHeight: 280}}>
              <ShapeBleed color={c.accent} kind={c.shape}/>
              <div style={{position:'relative', zIndex:1}}>
                <h3 style={{fontWeight: 700, fontSize: 20, margin: 0, marginBottom: 10}}>{c.title}</h3>
                <p style={{fontSize: 14, color:'#d4d4d4', lineHeight: 1.55}}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShapeBleed({ color, kind }) {
  const base = {position:'absolute', inset: 0, opacity: .24, pointerEvents:'none'};
  if (kind === 'stripes') return (
    <svg style={base} viewBox="0 0 200 200" preserveAspectRatio="none">
      <defs><pattern id="sp" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="5" height="14" fill={color}/></pattern></defs>
      <rect width="200" height="200" fill="url(#sp)"/>
    </svg>
  );
  if (kind === 'squiggle') return (
    <svg style={base} viewBox="0 0 200 200" preserveAspectRatio="none">
      <path d="M0 60 Q 40 20, 80 60 T 160 60 T 240 60" stroke={color} strokeWidth="14" fill="none"/>
      <path d="M0 130 Q 40 100, 80 130 T 160 130 T 240 130" stroke={color} strokeWidth="14" fill="none"/>
    </svg>
  );
  if (kind === 'blob') return (
    <svg style={base} viewBox="0 0 200 200" preserveAspectRatio="none">
      <circle cx="30" cy="170" r="90" fill={color}/>
    </svg>
  );
  return (
    <svg style={base} viewBox="0 0 200 200" preserveAspectRatio="none">
      <defs><pattern id="dots" width="18" height="18" patternUnits="userSpaceOnUse"><circle cx="9" cy="9" r="3" fill={color}/></pattern></defs>
      <rect width="200" height="200" fill="url(#dots)"/>
    </svg>
  );
}

window.ServiceCards = ServiceCards;