/* Bento grid of services. Each cell links to its dedicated product page.
 * The product slugs map 1:1 to entries in /src/data/products.jsx.
 */
function Services() {
  return (
    <section id="services" className="tight">
      <div className="wrap">
        <div className="sec-head">
          <h2>Everything a local business needs — <span className="serif">one roof</span>.</h2>
          <p>We build, automate, and grow it. You answer the customers we bring to your door. <a href="/products" className="services-allcta">See every product →</a></p>
        </div>

        <div className="bento">
          {/* WhatsApp bot — big */}
          <a href="/products/whatsapp-chatbot" className="cell cell-link span-7 tall">
            <div className="cell-label"><span className="dot" /> WhatsApp Chatbot</div>
            <div className="cell-title">Answer every customer in 11 seconds — even at 2am.</div>
            <div className="cell-body">A branded WA bot on your number that handles FAQs, bookings, reservations, order tracking, and quiet handoff to a human when it matters.</div>
            <div className="cell-figure"><WAChatStage compact={true} /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Metrics */}
          <a href="/products/analytics" className="cell cell-link span-5 tall dark">
            <div className="cell-label"><span className="dot" /> Reporting & Analytics</div>
            <div className="cell-title">Watch the money move.</div>
            <div className="cell-body">One dashboard stitches Meta Ads, WhatsApp, your website, and CRM into numbers you actually use.</div>
            <div className="cell-figure" style={{ background: 'var(--ink-2)', border: '1px solid var(--ink-3)' }}><MetricsStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Website */}
          <a href="/products/website" className="cell cell-link span-6">
            <div className="cell-label"><span className="dot" /> Website Design</div>
            <div className="cell-title">A website that looks like you mean business.</div>
            <div className="cell-body">Fast, mobile-first, Google-ready. Built in a week, not a quarter.</div>
            <div className="cell-figure"><WebsiteStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* SEO */}
          <a href="/products/seo" className="cell cell-link span-6">
            <div className="cell-label"><span className="dot" /> SEO</div>
            <div className="cell-title">Rank for what your neighbours search.</div>
            <div className="cell-body">Local SEO, Google Business, reviews — the unsexy work that puts you on the first page.</div>
            <div className="cell-figure"><SEOStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Meta Ads */}
          <a href="/products/meta-ads" className="cell cell-link span-7">
            <div className="cell-label"><span className="dot" /> Meta Ads</div>
            <div className="cell-title">Spend less. Sell more. See why.</div>
            <div className="cell-body">Campaigns set up right: pixel wired, audiences sharp, creative tested weekly. No agency black box.</div>
            <div className="cell-figure"><AdsStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Meta Business Onboarding — accent */}
          <a href="/products/meta-onboarding" className="cell cell-link span-5 accent">
            <div className="cell-label"><span className="dot" /> Meta Business Onboarding</div>
            <div className="cell-title">Get verified, get the green tick.</div>
            <div className="cell-body">WABA setup, Business Manager, domain verification, catalog, shop, CTWA — we handle the maze.</div>
            <div className="cell-figure" style={{ background: 'rgba(0,40,24,.08)', border: '1px solid rgba(0,40,24,.12)', padding: 18, display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
              <div className="mbm-row"><span className="mbm-check">✓</span> Business Manager created</div>
              <div className="mbm-row"><span className="mbm-check">✓</span> Domain verified</div>
              <div className="mbm-row"><span className="mbm-check">✓</span> WhatsApp Cloud API</div>
              <div className="mbm-row"><span className="mbm-check">✓</span> Green tick (official)</div>
              <style>{`
                .mbm-row { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--f-sans); color: var(--accent-ink); }
                .mbm-check { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; }
              `}</style>
            </div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* CRM */}
          <a href="/products/crm" className="cell cell-link span-7">
            <div className="cell-label"><span className="dot" /> CRM & Customer DB</div>
            <div className="cell-title">Every lead in one place.</div>
            <div className="cell-body">A single pipeline view — WA chats, form fills, and ad leads roll into one Kanban your team actually opens.</div>
            <div className="cell-figure"><CRMStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Pixel tracking */}
          <a href="/products/pixel-tracking" className="cell cell-link span-5">
            <div className="cell-label"><span className="dot" /> Pixel & Tracking</div>
            <div className="cell-title">Every click, counted correctly.</div>
            <div className="cell-body">Meta Pixel, Conversions API, GA4 — set up the way iOS 14 actually wants.</div>
            <div className="cell-figure"><PixelStage /></div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Catalog feed — new card highlighting Meta Business AI integration */}
          <a href="/products/catalog-feed" className="cell cell-link span-6">
            <div className="cell-label"><span className="dot" /> Catalog & Meta Business AI</div>
            <div className="cell-title">A live product feed Meta polls on its own.</div>
            <div className="cell-body">CSV + JSON endpoints that always reflect your current inventory. Edit in your admin, the feed updates within minutes.</div>
            <div className="cell-figure" style={{ background: 'var(--paper-3)', padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'center', fontFamily: 'var(--f-mono)', fontSize: 12, color: 'var(--ink)' }}>
              <div style={{ color: 'var(--muted)' }}>GET /inventory.csv</div>
              <div style={{ marginTop: 6 }}>200 · 18 cols · 142 rows</div>
              <div style={{ marginTop: 2, color: 'var(--muted)' }}>cache: stale-while-revalidate 300s</div>
            </div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>

          {/* Digital marketing — full */}
          <a href="/products/digital-marketing" className="cell cell-link span-6 short">
            <div className="cell-label"><span className="dot" /> Digital Marketing (the rest of it)</div>
            <div className="cell-title">Google Ads · Instagram · Emailers · Content · Landing pages.</div>
            <div className="cell-body" style={{maxWidth: '58ch'}}>When the full playbook is needed, we bring it. We'll tell you honestly what will actually move your numbers — and skip the rest.</div>
            <div className="cell-figure" style={{ background: 'transparent', border: 'none', marginTop: 12, padding: 0, minHeight: 70 }}>
              <div className="marquee">
                <div className="marquee-track">
                  {['Google Ads', 'Instagram Reels', 'Email & Newsletter', 'Landing Pages', 'Content Calendar', 'Influencer Briefs', 'Retargeting', 'Review Management', 'UGC Collection', 'Google Ads', 'Instagram Reels', 'Email & Newsletter', 'Landing Pages', 'Content Calendar', 'Influencer Briefs', 'Retargeting', 'Review Management', 'UGC Collection'].map((t, i) => (
                    <span key={i} className="marquee-chip">{t}</span>
                  ))}
                </div>
              </div>
              <style>{`
                .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); width: 100%; }
                .marquee-track { display: inline-flex; gap: 10px; white-space: nowrap; animation: marquee-x 28s linear infinite; padding-right: 10px; will-change: transform; }
                .marquee-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); background: var(--paper); }
                html.dark .marquee-chip { background: var(--paper-3); }
                .marquee-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
              `}</style>
            </div>
            <span className="cell-cta">Learn more <Ic.arrow size={14} /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;