const Services = () => {
  const items = [
    {
      k: '01',
      title: 'Channel pricing intelligence',
      body: 'Weekly SKU-level pricing across 38 markets. Catch compression, stock-outs, and grey-market drift before the market does.',
      glyph: (
        <svg viewBox="0 0 40 40"><path d="M4 32 L14 22 L22 28 L36 10" stroke="currentColor" strokeWidth="1.6" fill="none"/><circle cx="36" cy="10" r="2.2" fill="currentColor"/></svg>
      )
    },
    {
      k: '02',
      title: 'Demand-side surveys',
      body: 'Panels of system integrators, IT buyers, and enthusiast builders. We ask the question that moves the SKU.',
      glyph: (
        <svg viewBox="0 0 40 40"><rect x="6" y="8" width="28" height="20" rx="2" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M12 16 h16 M12 20 h10" stroke="currentColor" strokeWidth="1.6"/><path d="M14 28 L14 34" stroke="currentColor" strokeWidth="1.6"/></svg>
      )
    },
    {
      k: '03',
      title: 'Competitive teardown',
      body: 'BOM reconstruction, margin estimation, and roadmap inference from real hardware shipped to real customers.',
      glyph: (
        <svg viewBox="0 0 40 40"><rect x="8" y="8" width="24" height="24" rx="2" stroke="currentColor" strokeWidth="1.6" fill="none"/><rect x="14" y="14" width="5" height="5" fill="currentColor"/><rect x="21" y="14" width="5" height="5" fill="currentColor" opacity=".5"/><rect x="14" y="21" width="5" height="5" fill="currentColor" opacity=".5"/><rect x="21" y="21" width="5" height="5" fill="currentColor" opacity=".2"/></svg>
      )
    },
    {
      k: '04',
      title: 'Category forecasting',
      body: 'Twelve-quarter rolling forecasts for GPU, CPU, SSD, DRAM, PSU, and cooling categories, with scenario planning.',
      glyph: (
        <svg viewBox="0 0 40 40"><path d="M6 30 L14 24 L20 28 L28 16 L34 20" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M28 16 L32 14 M28 16 L30 20" stroke="currentColor" strokeWidth="1.6"/></svg>
      )
    },
    {
      k: '05',
      title: 'Brand and message testing',
      body: 'Copy, packaging, and positioning tested against in-category buyers — not a generic online panel.',
      glyph: (
        <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="12" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M14 20 L18 24 L26 14" stroke="currentColor" strokeWidth="1.8" fill="none"/></svg>
      )
    },
    {
      k: '06',
      title: 'Investor diligence',
      body: 'Pre-IC primary research on targets across components, peripherals, and computer accessories.',
      glyph: (
        <svg viewBox="0 0 40 40"><circle cx="18" cy="18" r="9" stroke="currentColor" strokeWidth="1.6" fill="none"/><path d="M25 25 L32 32" stroke="currentColor" strokeWidth="1.8"/></svg>
      )
    },
  ];
  return (
    <section className="services" id="services">
      <div className="container">
        <div className="section-head">
          <div className="kicker">Services</div>
          <h2 className="h-display">Everything you need to read the category — and move before it moves.</h2>
        </div>
        <div className="service-grid">
          {items.map((it) => (
            <article key={it.k} className="svc-card">
              <div className="svc-top">
                <span className="svc-k">{it.k}</span>
                <span className="svc-glyph">{it.glyph}</span>
              </div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
              <a href="#contact" className="svc-link">
                Learn more
                <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
