function ServiceGrid() {
  const services = [
    { tag: 'Permits',   tagColor: 'var(--lmc-yellow)', title: 'Permits & licensing',     desc: 'City hall, CCB, neighborhood notices. We sit through the meetings so you don\u2019t have to.', img: '../../assets/samples/sample-08-city-hall.jpg' },
    { tag: 'Storefront',tagColor: 'var(--lmc-green)',  title: 'Storefront & buildout',   desc: 'Inspectors, contractors, signage. From empty lease to "Coming Soon" in the window.',           img: '../../assets/samples/sample-09-coming-soon.jpg' },
    { tag: 'Capital',   tagColor: 'var(--lmc-teal)',   title: 'Capital that actually closes', desc: 'Cannabis-aware lenders who understand the timeline from license to first sale.',           img: '../../assets/samples/sample-10-money-halftone.jpg' },
    { tag: 'Branding',  tagColor: 'var(--lmc-red)',    title: 'Branding & artwork',      desc: 'Window wraps, packaging, social. The good stuff that makes your shop look like yours.',     img: '../../assets/samples/sample-11-plant-pattern.jpg' },
  ];
  return (
    <section id="services" style={{ padding: '96px 0 80px', background: 'var(--lmc-paper)', borderBottom: '2px solid var(--lmc-black)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 36, flexWrap: 'wrap' }}>
          <div>
            <span className="eyebrow">What we do</span>
            <h2 style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '14px 0 0', maxWidth: 640 }}>
              Four lanes. <span className="marker" style={{ fontSize: 56, display: 'inline-block', transform: 'rotate(-2deg)', color: 'var(--lmc-green)' }}>One</span> launch team.
            </h2>
          </div>
          <a href="#process" className="btn-ghost">See the process →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {services.map((s, i) => (
            <article key={i} className="svc-card">
              <div className="img" style={{ backgroundImage: `url(${s.img})` }} />
              <div className="body">
                <span className="tag" style={{ background: s.tagColor, color: s.tag === 'Branding' ? 'var(--lmc-white)' : 'var(--lmc-black)' }}>{s.tag}</span>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ServiceGrid = ServiceGrid;