/* services.jsx — three pillars. variant: 'cards' (default) | 'rows' */
const SERVICES = [
  {
    icon: 'search', name: 'SEO',
    href: 'pages/seo.html',
    desc: 'Technical audits, content strategy and link acquisition that compound into durable organic growth.',
    points: ['Technical & on-page audits', 'Keyword & content strategy', 'White-hat link building', 'Local & international SEO'],
  },
  {
    icon: 'code', name: 'Web Development',
    href: 'pages/web-development.html',
    desc: 'Bespoke, fast, accessible sites engineered to rank and built to convert — not just to look good.',
    points: ['Bespoke design & build', 'E-commerce & CRO', 'Core Web Vitals & a11y', 'WordPress & Webflow CMS'],
  },
  {
    icon: 'bot', name: 'AI Automation',
    href: 'pages/ai-automation.html',
    desc: 'Lead capture, nurture flows and service agents that run the busywork so your team scales without limits.',
    points: ['Lead capture & nurture', 'AI chatbots & agents', 'Reporting automation', 'CRM & custom workflows'],
  },
];

function Services({ variant = 'cards' }) {
  const { Card } = window;
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="mt-container">
        <div className="section-head reveal">
          <span className="eyebrow eyebrow--tick">What we do</span>
          <h2>Three disciplines. One strategy.<br />Compounding results.</h2>
          <p className="lead">
            Most agencies keep these separate. We run them as one growth engine — so the
            website ranks, the rankings convert, and the conversions run themselves.
          </p>
        </div>

        {variant === 'rows' ? (
          <div className="svc-rows">
            {SERVICES.map((s, i) => (
              <a className="svc-row reveal" href={s.href} key={s.name}>
                <span className="svc-row__no">0{i + 1}</span>
                <div>
                  <h3>{s.name}</h3>
                  <p>{s.desc}</p>
                </div>
                <span className="svc-row__arrow"><Icon name="arrowUpRight" size={28} /></span>
              </a>
            ))}
          </div>
        ) : (
          <div className="services-grid">
            {SERVICES.map((s) => (
              <a className="card card--hover svc reveal" href={s.href} key={s.name}>
                <span className="svc__icon"><Icon name={s.icon} size={26} /></span>
                <h3>{s.name}</h3>
                <p className="svc__desc">{s.desc}</p>
                <ul className="svc__list">
                  {s.points.map((p) => (
                    <li key={p}><Icon name="check" size={17} stroke={2.2} />{p}</li>
                  ))}
                </ul>
                <span className="svc__more">Explore {s.name} <Icon name="arrowUpRight" size={15} /></span>
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Services });