// ServiceGrid — the 9 channels in a 3-col grid. Click a tile to expand
// its 2-sentence description in-place (the real site links to subpages;
// in the kit we stand them in with copy lifted from the home page tone).
function ServiceGrid() {
  const [open, setOpen] = React.useState(null);
  const services = [
    { e:'🤖', name:'Artificial Intelligence',    blurb:'An AI layer on every campaign — automated bidding, creative testing, predictive targeting. Machine-grade efficiency without losing the strengths of human oversight.' },
    { e:'📺', name:'Connected TV Advertising',    blurb:'Premium CTV inventory across the major streaming platforms — bought, measured, and attributed against the rest of your funnel.' },
    { e:'🤳', name:'Creative Production',         blurb:'In-house production. Short-form, long-form, vertical, horizontal — built specifically for the channel it will run on.' },
    { e:'🖥️', name:'Display Advertising',         blurb:'Programmatic display with our compliance-first record — better quality scores, lower CPMs, longer-term account health.' },
    { e:'📢', name:'Search Engine Marketing',     blurb:'Paid search across Google & Bing. Bidding strategies built on real conversion data, not vanity metrics.' },
    { e:'🔍', name:'Search Engine Optimization',  blurb:'Long-game organic search — technical, content, and links — that compounds quarter after quarter.' },
    { e:'📸', name:'Social Media Marketing',      blurb:'Paid + organic across every meaningful surface. Creative tested in market, not in a deck.' },
    { e:'🎬', name:'Video Advertising',           blurb:'YouTube, IG Reels, TikTok, Shorts. Built to lead the funnel and rebuilt every month.' },
    { e:'🌐', name:'Website Development',         blurb:'Sites engineered to convert the traffic we send them. We build, we measure, we iterate.' },
  ];
  return (
    <section className="td-section">
      <div className="td-callout td-callout--example">
        <div className="td-callout__head">★ Example · Service Channels</div>
        <div className="td-services">
          {services.map((s, i) => (
            <button
              key={s.name}
              className={'td-service' + (open === i ? ' td-service--open' : '')}
              onClick={() => setOpen(open === i ? null : i)}
            >
              <span className="td-service__e">{s.e}</span>
              <span className="td-service__n">{s.name}</span>
              {open === i && <p className="td-service__b">{s.blurb}</p>}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ServiceGrid = ServiceGrid;