/* ── Sub-service icons — Jandl-inspired: compound paths, fill+stroke mix ── */

function IcoBriefing({ s=44, c='#1D1D1B' }) {
  /* Document with folded corner + diagonal pen + filled nib */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Document body */}
      <path d="M 8 5 L 28 5 L 38 15 L 38 45 C 38 46.1 37.1 47 36 47 L 8 47 C 6.9 47 6 46.1 6 45 L 6 7 C 6 5.9 6.9 5 8 5 Z"/>
      <path d="M 28 5 L 28 15 L 38 15"/>
      {/* Title + text lines */}
      <path d="M 12 21 L 32 21 M 12 27 L 32 27 M 12 33 L 22 33"/>
      <path d="M 12 15 L 24 15" strokeWidth="2.5" stroke={c}/>
      {/* Diagonal pen shaft */}
      <path d="M 28 32 L 37 20"/>
      {/* Filled nib */}
      <path d="M 37 20 L 42 24 L 35 28 Z" fill={c} stroke="none"/>
    </svg>
  );
}

function IcoCampanha({ s=44, c='#1D1D1B' }) {
  /* Megaphone + wave arcs + filled dot at bell */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M 7 18 L 7 31 L 17 31 L 34 39 L 34 10 L 17 18 Z"/>
      {/* Interior body fill */}
      <path d="M 7 18 L 17 18 L 17 31 L 7 31 Z" fill={c} fillOpacity="0.12" stroke="none"/>
      {/* Wave arcs */}
      <path d="M 37 20 C 41 22.5 41 27.5 37 30"/>
      <path d="M 40 16 C 46 21 46 29 40 34"/>
      {/* Stand legs */}
      <path d="M 8 31 L 10 42 M 17 31 L 15 42"/>
      {/* Filled accent at horn tip */}
      <path d="M 32 23 C 32 21.3 33 20.5 34 20.5 C 35 20.5 36 21.3 36 23 C 36 24.7 35 25.5 34 25.5 C 33 25.5 32 24.7 32 23 Z" fill={c} stroke="none"/>
    </svg>
  );
}

function IcoBranding({ s=44, c='#1D1D1B' }) {
  /* Circle seal + dashed inner ring + cross + pen nib touching circle */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Outer circle */}
      <path d="M 6 23 C 6 13.6 13.6 6 23 6 C 32.4 6 40 13.6 40 23 C 40 32.4 32.4 40 23 40 C 13.6 40 6 32.4 6 23 Z"/>
      {/* Inner dashed ring */}
      <path d="M 11 23 C 11 16.4 16.4 11 23 11 C 29.6 11 35 16.4 35 23 C 35 29.6 29.6 35 23 35 C 16.4 35 11 29.6 11 23 Z" strokeDasharray="3 2.5"/>
      {/* Cross inside */}
      <path d="M 23 16 L 23 30 M 16 23 L 30 23"/>
      {/* Pen nib at upper right */}
      <path d="M 34 10 L 44 3 L 47 7 L 37 14 Z" fill={c} stroke="none"/>
      <path d="M 39.5 5.5 L 44.5 10.5" stroke={c}/>
    </svg>
  );
}

function IcoWorkshop({ s=44, c='#1D1D1B' }) {
  /* Lightbulb + connecting arc inside + glow rays + filled center dot */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Bulb body */}
      <path d="M 16 32 C 16 25 12 20 12 14 C 12 7 18 3 25 3 C 32 3 38 7 38 14 C 38 20 34 25 34 32 Z"/>
      {/* Base rings */}
      <path d="M 18 35 L 32 35 M 19 39 L 31 39 M 21 43 L 29 43"/>
      {/* People connection arc inside */}
      <path d="M 17 20 C 20 16 22 15 25 15 C 28 15 30 16 33 20"/>
      <path d="M 19 25 C 21 22 25 21 29 25"/>
      {/* Glow rays */}
      <path d="M 8 11 L 11 13 M 6 18 L 9 18 M 8 25 L 11 23"/>
      <path d="M 42 11 L 39 13 M 44 18 L 41 18 M 42 25 L 39 23"/>
      {/* Filled center dot */}
      <path d="M 23 24 C 23 22.9 23.9 22 25 22 C 26.1 22 27 22.9 27 24 C 27 25.1 26.1 26 25 26 C 23.9 26 23 25.1 23 24 Z" fill={c} stroke="none"/>
    </svg>
  );
}

function IcoHuntPersonal({ s=44, c='#1D1D1B' }) {
  /* Eye lens + crosshair + filled person head at center + magnifier handle */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Eye almond */}
      <path d="M 3 22 C 3 22 10 8 22 8 C 34 8 41 22 41 22 C 41 22 34 36 22 36 C 10 36 3 22 3 22 Z"/>
      {/* Crosshair */}
      <path d="M 22 12 L 22 32 M 12 22 L 32 22"/>
      {/* Person head — filled circle */}
      <path d="M 18 19 C 18 16.8 19.8 15 22 15 C 24.2 15 26 16.8 26 19 C 26 21.2 24.2 23 22 23 C 19.8 23 18 21.2 18 19 Z" fill={c}/>
      {/* Shoulder arc */}
      <path d="M 15 31 C 17 26 20 24 22 24 C 24 24 27 26 29 31"/>
      {/* Magnifier handle */}
      <path d="M 35 33 L 46 44"/>
      {/* Outer ring (faint second arc) */}
      <path d="M 4 22 C 6 17 10 10 17 8.5" strokeOpacity="0.3"/>
    </svg>
  );
}

function IcoSquads({ s=44, c='#1D1D1B' }) {
  /* Three profiles + shoulder arcs + filled head dots + connection arcs */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Center head */}
      <path d="M 19 9 C 19 5.7 21.2 3 24 3 C 26.8 3 29 5.7 29 9 C 29 12.3 26.8 15 24 15 C 21.2 15 19 12.3 19 9 Z"/>
      <path d="M 24 9 C 24 8.2 24.5 7.5 25 7.5 C 25.5 7.5 26 8.2 26 9 C 26 9.8 25.5 10.5 25 10.5 C 24.5 10.5 24 9.8 24 9 Z" fill={c} stroke="none"/>
      <path d="M 15 28 C 17 21 20 18 24 17 C 28 18 31 21 33 28"/>
      {/* Left head */}
      <path d="M 4 17 C 4 14.2 6.2 12 9 12 C 11.8 12 14 14.2 14 17 C 14 19.8 11.8 22 9 22 C 6.2 22 4 19.8 4 17 Z"/>
      <path d="M 9 17 C 9 16.2 9.5 15.5 10 15.5 C 10.5 15.5 11 16.2 11 17 C 11 17.8 10.5 18.5 10 18.5 C 9.5 18.5 9 17.8 9 17 Z" fill={c} stroke="none"/>
      <path d="M 2 36 C 3 29 5.5 26 9 25 C 12.5 26 15 29 16 36"/>
      {/* Right head */}
      <path d="M 34 17 C 34 14.2 36.2 12 39 12 C 41.8 12 44 14.2 44 17 C 44 19.8 41.8 22 39 22 C 36.2 22 34 19.8 34 17 Z"/>
      <path d="M 39 17 C 39 16.2 39.5 15.5 40 15.5 C 40.5 15.5 41 16.2 41 17 C 41 17.8 40.5 18.5 40 18.5 C 39.5 18.5 39 17.8 39 17 Z" fill={c} stroke="none"/>
      <path d="M 32 36 C 33 29 35.5 26 39 25 C 42.5 26 45 29 46 36"/>
      {/* Connecting arcs */}
      <path d="M 14 19 C 17 15 20 14 24 14"/>
      <path d="M 34 19 C 31 15 28 14 24 14"/>
    </svg>
  );
}

function IcoEstrutura({ s=44, c='#1D1D1B' }) {
  /* Org chart: top box (semi-filled) + stem + 3 boxes below + small accent dots */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Top box */}
      <path d="M 15 3 L 35 3 L 35 14 L 15 14 Z" fill={c} fillOpacity="0.12"/>
      <path d="M 15 3 L 35 3 L 35 14 L 15 14 Z"/>
      {/* Stem */}
      <path d="M 25 14 L 25 21"/>
      {/* Horizontal bar */}
      <path d="M 9 21 L 41 21"/>
      {/* Drops to boxes */}
      <path d="M 9 21 L 9 28 M 25 21 L 25 28 M 41 21 L 41 28"/>
      {/* Three bottom boxes */}
      <path d="M 3 28 L 15 28 L 15 40 L 3 40 Z"/>
      <path d="M 19 28 L 31 28 L 31 40 L 19 40 Z"/>
      <path d="M 35 28 L 47 28 L 47 40 L 35 40 Z"/>
      {/* Filled accent dot in top box */}
      <path d="M 23 8.5 C 23 7.4 23.9 6.5 25 6.5 C 26.1 6.5 27 7.4 27 8.5 C 27 9.6 26.1 10.5 25 10.5 C 23.9 10.5 23 9.6 23 8.5 Z" fill={c} stroke="none"/>
      {/* Small dots in bottom boxes */}
      <path d="M 7.5 34 C 7.5 33.2 8.2 32.5 9 32.5 C 9.8 32.5 10.5 33.2 10.5 34 C 10.5 34.8 9.8 35.5 9 35.5 C 8.2 35.5 7.5 34.8 7.5 34 Z" fill={c} stroke="none"/>
      <path d="M 23.5 34 C 23.5 33.2 24.2 32.5 25 32.5 C 25.8 32.5 26.5 33.2 26.5 34 C 26.5 34.8 25.8 35.5 25 35.5 C 24.2 35.5 23.5 34.8 23.5 34 Z" fill={c} stroke="none"/>
      <path d="M 39.5 34 C 39.5 33.2 40.2 32.5 41 32.5 C 41.8 32.5 42.5 33.2 42.5 34 C 42.5 34.8 41.8 35.5 41 35.5 C 40.2 35.5 39.5 34.8 39.5 34 Z" fill={c} stroke="none"/>
    </svg>
  );
}

function IcoAssets({ s=44, c='#1D1D1B' }) {
  /* Two overlapping image frames + landscape + sun + sparkle */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Back frame */}
      <path d="M 5 13 L 37 13 L 37 41 L 5 41 Z"/>
      {/* Landscape */}
      <path d="M 8 35 L 15 24 L 21 30 L 27 24 L 35 35"/>
      {/* Sun outer */}
      <path d="M 28 19 C 28 16.8 29.8 15 32 15 C 34.2 15 36 16.8 36 19 C 36 21.2 34.2 23 32 23 C 29.8 23 28 21.2 28 19 Z"/>
      {/* Sun filled iris */}
      <path d="M 30.5 19 C 30.5 18.2 31.1 17.5 32 17.5 C 32.9 17.5 33.5 18.2 33.5 19 C 33.5 19.8 32.9 20.5 32 20.5 C 31.1 20.5 30.5 19.8 30.5 19 Z" fill={c} stroke="none"/>
      {/* Front frame offset */}
      <path d="M 13 7 L 45 7 L 45 37 L 13 37 Z"/>
      {/* Sparkle cross upper-right */}
      <path d="M 41 2 L 41 6 M 39 4 L 43 4 M 39.5 2.5 L 42.5 5.5 M 42.5 2.5 L 39.5 5.5"/>
    </svg>
  );
}

function IcoCamera({ s=44, c='#1D1D1B' }) {
  /* Camera body + concentric lens rings + filled iris + AI cross */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Body */}
      <path d="M 4 16 L 4 43 C 4 44.1 4.9 45 6 45 L 40 45 C 41.1 45 42 44.1 42 43 L 42 16 C 42 14.9 41.1 14 40 14 L 6 14 C 4.9 14 4 14.9 4 16 Z"/>
      {/* Shutter notch */}
      <path d="M 17 14 L 19 8 L 29 8 L 31 14"/>
      {/* Outer lens ring */}
      <path d="M 12 29 C 12 21.3 18.3 15 26 15 C 33.7 15 40 21.3 40 29 C 40 36.7 33.7 43 26 43 C 18.3 43 12 36.7 12 29 Z"/>
      {/* Middle ring */}
      <path d="M 17 29 C 17 24 21 20 26 20 C 31 20 35 24 35 29 C 35 34 31 38 26 38 C 21 38 17 34 17 29 Z"/>
      {/* Filled iris */}
      <path d="M 22.5 29 C 22.5 26.5 24 24.5 26 24.5 C 28 24.5 29.5 26.5 29.5 29 C 29.5 31.5 28 33.5 26 33.5 C 24 33.5 22.5 31.5 22.5 29 Z" fill={c} stroke="none"/>
      {/* AI cross accent */}
      <path d="M 38 9 L 38 5 M 36 7 L 40 7 M 36.5 5.5 L 39.5 8.5 M 39.5 5.5 L 36.5 8.5"/>
    </svg>
  );
}

function IcoRetrato({ s=44, c='#1D1D1B' }) {
  /* Portrait rectangle + face oval + filled eyes + shoulder arc + tick marks */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Frame */}
      <path d="M 10 3 L 40 3 L 40 47 L 10 47 Z"/>
      {/* Face oval */}
      <path d="M 17 19 C 17 13 20.6 8 25 8 C 29.4 8 33 13 33 19 C 33 25 29.4 30 25 30 C 20.6 30 17 25 17 19 Z"/>
      {/* Face fill */}
      <path d="M 19 19 C 19 14.4 21.7 11 25 11 C 28.3 11 31 14.4 31 19 C 31 23.6 28.3 27 25 27 C 21.7 27 19 23.6 19 19 Z" fill={c} fillOpacity="0.08" stroke="none"/>
      {/* Filled eyes */}
      <path d="M 20.5 17 C 20.5 16.2 21.2 15.5 22 15.5 C 22.8 15.5 23.5 16.2 23.5 17 C 23.5 17.8 22.8 18.5 22 18.5 C 21.2 18.5 20.5 17.8 20.5 17 Z" fill={c} stroke="none"/>
      <path d="M 26.5 17 C 26.5 16.2 27.2 15.5 28 15.5 C 28.8 15.5 29.5 16.2 29.5 17 C 29.5 17.8 28.8 18.5 28 18.5 C 27.2 18.5 26.5 17.8 26.5 17 Z" fill={c} stroke="none"/>
      {/* Shoulder arc */}
      <path d="M 12 47 C 13 37 19 33 25 32 C 31 33 37 37 38 47"/>
      {/* Top tick marks */}
      <path d="M 15 3 L 15 7 M 25 3 L 25 7 M 35 3 L 35 7"/>
      {/* Bottom tick marks */}
      <path d="M 15 43 L 15 47 M 35 43 L 35 47"/>
    </svg>
  );
}

function IcoDiagnostico({ s=44, c='#1D1D1B' }) {
  /* Gear ring (outer + inner circles + 8 teeth) + magnifier + checkmark */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Outer gear circle */}
      <path d="M 5 20 C 5 11.7 11.7 5 20 5 C 28.3 5 35 11.7 35 20 C 35 28.3 28.3 35 20 35 C 11.7 35 5 28.3 5 20 Z"/>
      {/* Inner ring */}
      <path d="M 11 20 C 11 15 15 11 20 11 C 25 11 29 15 29 20 C 29 25 25 29 20 29 C 15 29 11 25 11 20 Z"/>
      {/* Cardinal teeth */}
      <path d="M 20 3 L 20 7 M 20 33 L 20 37 M 3 20 L 7 20 M 33 20 L 37 20"/>
      {/* Diagonal teeth */}
      <path d="M 8.1 8.1 L 10.9 10.9 M 29.1 29.1 L 31.9 31.9 M 8.1 31.9 L 10.9 29.1 M 29.1 10.9 L 31.9 8.1"/>
      {/* Filled centre */}
      <path d="M 17.5 20 C 17.5 18.6 18.6 17.5 20 17.5 C 21.4 17.5 22.5 18.6 22.5 20 C 22.5 21.4 21.4 22.5 20 22.5 C 18.6 22.5 17.5 21.4 17.5 20 Z" fill={c} stroke="none"/>
      {/* Magnifier circle */}
      <path d="M 26 33 C 26 27.5 30.5 23 36 23 C 41.5 23 46 27.5 46 33 C 46 38.5 41.5 43 36 43 C 30.5 43 26 38.5 26 33 Z"/>
      {/* Handle */}
      <path d="M 43 40 L 48 45"/>
      {/* Checkmark */}
      <path d="M 32 33 L 35 37 L 41 27"/>
    </svg>
  );
}

function IcoAgente({ s=44, c='#1D1D1B' }) {
  /* Chat bubble with tail + three filled circuit nodes + T-bar legs + lightning bolt */
  return (
    <svg width={s} height={s} viewBox="0 0 50 50" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {/* Bubble body */}
      <path d="M 6 4 C 6 2.9 6.9 2 8 2 L 38 2 C 39.1 2 40 2.9 40 4 L 40 28 C 40 29.1 39.1 30 38 30 L 20 30 L 9 40 L 12 30 L 8 30 C 6.9 30 6 29.1 6 28 Z"/>
      {/* Three filled nodes */}
      <path d="M 13 16 C 13 14.3 14.3 13 16 13 C 17.7 13 19 14.3 19 16 C 19 17.7 17.7 19 16 19 C 14.3 19 13 17.7 13 16 Z" fill={c} stroke="none"/>
      <path d="M 21 16 C 21 14.3 22.3 13 24 13 C 25.7 13 27 14.3 27 16 C 27 17.7 25.7 19 24 19 C 22.3 19 21 17.7 21 16 Z" fill={c} stroke="none"/>
      <path d="M 29 16 C 29 14.3 30.3 13 32 13 C 33.7 13 35 14.3 35 16 C 35 17.7 33.7 19 32 19 C 30.3 19 29 17.7 29 16 Z" fill={c} stroke="none"/>
      {/* Node connections */}
      <path d="M 19 16 L 21 16 M 27 16 L 29 16"/>
      {/* Circuit legs */}
      <path d="M 16 19 L 16 25 M 24 19 L 24 25 M 32 19 L 32 25"/>
      <path d="M 16 25 L 24 25 M 24 25 L 32 25"/>
      {/* Lightning bolt top-right */}
      <path d="M 42 2 L 38 10 L 42 10 L 38 18"/>
    </svg>
  );
}
/* Map icons to sub-items by service index + item index */
const subIcons = [
  [IcoBriefing, IcoCampanha, IcoBranding, IcoWorkshop],
  [IcoHuntPersonal, IcoSquads, IcoEstrutura],
  [IcoAssets, IcoCamera, IcoRetrato, IcoDiagnostico, IcoAgente],
];

/* Main category icons for the row header */
function IcoAsterisk({ s=36, c='#1D1D1B' }) {
  /* Six-arm asterisk + filled centre dot */
  return (
    <svg width={s} height={s} viewBox="0 0 36 36" fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round">
      <path d="M 18 3 L 18 33"/>
      <path d="M 3 11 L 33 25"/>
      <path d="M 33 11 L 3 25"/>
      <path d="M 15.5 18 C 15.5 16.6 16.6 15.5 18 15.5 C 19.4 15.5 20.5 16.6 20.5 18 C 20.5 19.4 19.4 20.5 18 20.5 C 16.6 20.5 15.5 19.4 15.5 18 Z" fill={c} stroke="none"/>
    </svg>
  );
}

function IcoPerson({ s=36, c='#1D1D1B' }) {
  /* Eye-lens containing a person head + filled pupil + shoulder arc */
  return (
    <svg width={s} height={s} viewBox="0 0 36 36" fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      {/* Eye almond */}
      <path d="M 2 18 C 2 18 8 6 18 6 C 28 6 34 18 34 18 C 34 18 28 30 18 30 C 8 30 2 18 2 18 Z"/>
      {/* Head circle */}
      <path d="M 14 16 C 14 13.2 15.8 11 18 11 C 20.2 11 22 13.2 22 16 C 22 18.8 20.2 21 18 21 C 15.8 21 14 18.8 14 16 Z"/>
      {/* Filled pupil */}
      <path d="M 16.5 16 C 16.5 15.2 17.1 14.5 18 14.5 C 18.9 14.5 19.5 15.2 19.5 16 C 19.5 16.8 18.9 17.5 18 17.5 C 17.1 17.5 16.5 16.8 16.5 16 Z" fill={c} stroke="none"/>
      {/* Shoulder arc */}
      <path d="M 13 27 C 14.5 23 16 22 18 22 C 20 22 21.5 23 23 27"/>
    </svg>
  );
}

function IcoSpark({ s=36, c='#1D1D1B' }) {
  /* Neural triangle: three filled corner nodes + edge lines + filled centre node */
  return (
    <svg width={s} height={s} viewBox="0 0 36 36" fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      {/* Corner nodes — filled */}
      <path d="M 15.5 5 C 15.5 3.6 16.6 2.5 18 2.5 C 19.4 2.5 20.5 3.6 20.5 5 C 20.5 6.4 19.4 7.5 18 7.5 C 16.6 7.5 15.5 6.4 15.5 5 Z" fill={c} stroke="none"/>
      <path d="M 4 30 C 4 28.6 5.1 27.5 6.5 27.5 C 7.9 27.5 9 28.6 9 30 C 9 31.4 7.9 32.5 6.5 32.5 C 5.1 32.5 4 31.4 4 30 Z" fill={c} stroke="none"/>
      <path d="M 27 30 C 27 28.6 28.1 27.5 29.5 27.5 C 30.9 27.5 32 28.6 32 30 C 32 31.4 30.9 32.5 29.5 32.5 C 28.1 32.5 27 31.4 27 30 Z" fill={c} stroke="none"/>
      {/* Edge lines */}
      <path d="M 18 7.5 L 7.5 27.5 M 18 7.5 L 28.5 27.5 M 9 30 L 27 30"/>
      {/* Centre node — filled */}
      <path d="M 15.5 20 C 15.5 18.6 16.6 17.5 18 17.5 C 19.4 17.5 20.5 18.6 20.5 20 C 20.5 21.4 19.4 22.5 18 22.5 C 16.6 22.5 15.5 21.4 15.5 20 Z" fill={c} stroke="none"/>
      {/* Spokes to centre */}
      <path d="M 18 7.5 L 18 17.5 M 7.5 27.5 L 15.5 20 M 28.5 27.5 L 20.5 20"/>
    </svg>
  );
}

const serviceIcons = [IcoAsterisk, IcoPerson, IcoSpark];

const servicesData = [
  {
    num: '01',
    title: 'Creative Marketing',
    sub: 'Estratégia & Conceito',
    desc: 'Consultoria de marketing estratégico para agências, marcas e startups de todos os tamanhos. Atuação flexível e sob demanda, cobrindo desde o briefing criativo até a entrega final.',
    items: [
      { title: 'Briefing Master', desc: 'Ajudo a criar o modelo de briefing ideal para extrair o melhor do seu time criativo ou agência.' },
      { title: 'Campanhas & Direção Criativa', desc: 'Desenvolvimento e execução de campanhas, do conceito até a execução.' },
      { title: 'Design & Branding', desc: 'Projetos de identidade visual e branding sob medida.' },
      { title: 'Workshops & Brainstorms', desc: 'Sessões imersivas com equipes internas para destravar ideias, desenhar estratégias e acelerar processos criativos.' },
    ],
  },
  {
    num: '02',
    title: 'Talent Hunting',
    sub: 'Times & Squads',
    desc: 'Montar times de alta performance exige entender que um grande portfólio não garante resultado se os perfis não forem complementares. Uso minha experiência e rede de contatos para montar a equipe criativa que seu projeto precisa.',
    items: [
      { title: 'Talent Hunting Personalizado', desc: 'Mapeamento e filtragem de profissionais criativos (designers, copywriters, ilustradores, motion designers) alinhados à cultura e aos desafios da empresa.' },
      { title: 'Squads On-Demand', desc: 'Curadoria de equipes de freelancers seniores para projetos de curto ou médio prazo.' },
      { title: 'Desenho de Estrutura', desc: 'Consultoria para diagnosticar gargalos internos e reestruturar o organograma criativo da sua empresa ou agência.' },
    ],
  },
  {
    num: '03',
    title: 'AI Solutions',
    sub: 'Escala & Inovação',
    desc: 'Conectar a potência da inteligência artificial à realidade prática e estética do mercado publicitário e corporativo. O foco é ganho de escala e inovação, sem perder o critério visual e técnico.',
    items: [
      { title: 'Assets & Campanhas', desc: 'Criação de imagens, ilustrações e vídeos proprietários gerados por IA para campanhas publicitárias e mídias sociais.' },
      { title: 'AI Photoshoots', desc: 'Produção de fotos conceituais e cenários hiper-realistas sob medida, reduzindo custos logísticos de grandes produções fotográficas.' },
      { title: 'Retrato Profissional', desc: 'Transformo sua foto em uma foto profissional para releases, LinkedIn ou currículo.' },
      { title: 'Diagnóstico & Otimização', desc: 'Workshop para identificar tarefas que podem ser otimizadas com inteligência artificial.' },
      { title: 'Agentes Criativos Customizados', desc: 'Desenvolvimento e treinamento de LLMs configurados com o tom de voz da marca, guias de design e regras do negócio para auxiliar no dia a dia da empresa.' },
    ],
  },
];

function Services() {
  const { isMobile } = useViewport();

  return (
    <section id="servicos" style={{ background:'#F6F3F0', padding: isMobile ? '0 20px 64px' : '0 56px 100px' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>

        {/* Header */}
        <div data-reveal style={{
          display:'flex', justifyContent:'space-between', alignItems:'baseline',
          borderTop:'1px solid #DDD9D4', paddingTop:20, marginBottom: isMobile ? 48 : 72,
        }}>
          <span style={{ fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:13, color:'#9A9A97', letterSpacing:'.12em', textTransform:'uppercase' }}>Serviços</span>
          <a href="#contato" style={{ fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:13, color:'#9A9A97', letterSpacing:'.08em', textDecoration:'none', transition:'color 150ms' }}
            onMouseEnter={e=>e.currentTarget.style.color='#1D1D1B'}
            onMouseLeave={e=>e.currentTarget.style.color='#9A9A97'}
          >Fale Conosco →</a>
        </div>

        {/* Service blocks — always visible */}
        <div style={{ display:'flex', flexDirection:'column', gap: isMobile ? 64 : 96 }}>
          {servicesData.map((s, i) => {
            const Icon = serviceIcons[i];
            return (
              <div key={s.num} data-reveal="fade">
                {/* Service header row */}
                <div style={{
                  display:'flex', alignItems:'flex-start', gap: isMobile ? 16 : 32,
                  marginBottom: isMobile ? 24 : 36,
                }}>
                  <span style={{
                    fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:12,
                    color:'#C0BFBB', letterSpacing:'.1em', paddingTop: isMobile ? 4 : 8,
                    flexShrink:0, minWidth: 28,
                  }}>{s.num}</span>

                  <div style={{ flex:1 }}>
                    <div style={{ display:'flex', alignItems:'center', gap: 16, marginBottom: 8 }}>
                      {!isMobile && <Icon s={36} c="#1D1D1B"/>}
                      <h3 style={{
                        fontFamily:'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
                        fontWeight:700, fontSize: isMobile ? 'clamp(28px,8vw,42px)' : 'clamp(36px,4vw,56px)',
                        textTransform:'uppercase', lineHeight:.95, color:'#1D1D1B',
                        margin:0, letterSpacing:'-.01em',
                      }}>{s.title}</h3>
                    </div>
                    <p style={{
                      fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400,
                      fontSize: isMobile ? 14 : 15, lineHeight:1.75,
                      color:'#7A7A77', margin: isMobile ? '12px 0 24px' : '16px 0 32px',
                      maxWidth: 560,
                    }}>{s.desc}</p>

                    {/* Sub-items */}
                    <div style={{
                      display:'grid',
                      gridTemplateColumns: isMobile ? '1fr 1fr' : (s.items.length > 3 ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)'),
                      gap: isMobile ? '20px 16px' : '32px 40px',
                    }}>
                      {s.items.map((item, j) => {
                        const SubIcon = subIcons[i][j];
                        return (
                          <div key={item.title} style={{ display:'flex', flexDirection:'column' }}>
                            {SubIcon && <div style={{ marginBottom: isMobile ? 8 : 12 }}><SubIcon s={isMobile ? 28 : 36} c="#1D1D1B"/></div>}
                            <p style={{
                              fontFamily:'Helvetica, Arial, sans-serif', fontWeight:700,
                              fontSize: isMobile ? 11 : 12, letterSpacing:'.06em',
                              textTransform:'uppercase', color:'#1D1D1B',
                              margin:'0 0 4px', lineHeight:1.3,
                            }}>{item.title}</p>
                            {!isMobile && <p style={{
                              fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400,
                              fontSize:13, lineHeight:1.65, color:'#7A7A77', margin:0,
                            }}>{item.desc}</p>}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>

                {/* Divider */}
                <div style={{ borderTop:'1px solid #DDD9D4', marginTop: isMobile ? 0 : 8 }}></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });
