// page-services.jsx — Services page content

const SERVICES = [
  { slug: 'brand-identity',  num: '01', t: 'Brand Identity',               d: 'Logos, wordmarks, brand guidelines, naming sprints. The visual language that sets a business apart on day one and still works five years in.',       tags: ['Logo', 'Naming', 'Guidelines'] },
  { slug: 'packaging-print', num: '02', t: 'Packaging & Print',             d: 'Packaging, signage, brochures, hoardings, vehicle wraps. Everything that lives offline — produced and proofed in-house.',                               tags: ['Packaging', 'Print', 'Outdoor'] },
  { slug: 'real-estate',     num: '03', t: 'Real Estate Marketing',         d: 'Pre-launch teasers, site activation, broker collateral and lead funnels for builders and townships across India.',                                       tags: ['Builders', 'Brokers', 'Funnels'] },
  { slug: 'political',       num: '04', t: 'Political Campaigns',           d: 'Candidate creative, door-to-door collateral, IVR, voter outreach and on-ground field ops for state and local elections.',                               tags: ['Candidates', 'IVR', 'Field Ops'] },
  { slug: 'performance',     num: '05', t: 'Performance Marketing',         d: 'Meta, Google Ads, YouTube and programmatic — engineered to ship qualified leads at a known cost.',                                                       tags: ['Meta', 'Google', 'YouTube'] },
  { slug: 'content-video',   num: '06', t: 'Content & Production',          d: 'Reels, drone footage, brand films, music videos and photography — produced by our in-house creative team, turned around fast.',                         tags: ['Reels', 'Films', 'Photo'] },
  { slug: 'automation',      num: '07', t: 'Marketing Automation',          d: 'WhatsApp, email, CRM and lead-routing workflows. Nurture every lead like it’s your only one, without the headcount.',                              tags: ['WhatsApp', 'CRM', 'Workflows'] },
  { slug: 'web-seo',         num: '08', t: 'Web & SEO',                     d: 'Marketing sites, landing pages and on-page SEO. Built to load fast on a 4G phone in a tier-2 town.',                                                   tags: ['Sites', 'SEO', 'Speed'] },
];

function ServicesPage({ setRoute }) {
  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Eight services.<br /><span className="it">One studio.</span></TypeReveal></h1>
          <p className="deck">
            We resist the urge to outsource. Branding, marketing, automation and production are all run by senior people in our Ludhiana studio — so the people you brief are the people who execute.
          </p>
        </div>
      </div>

      <section id="capabilities">
        <div className="wrap">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} className="svc-stack-item" delay={i * 40}
                    onClick={() => setRoute('service/' + s.slug)}>
              <h1 className="svc-stack-title">
                {s.t.split('').map((ch, j) => (
                  <span key={j} className="svc-ch-wrap">
                    <span className="svc-ch" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? ' ' : ch}</span>
                    <span className="svc-ch clone" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? ' ' : ch}</span>
                  </span>
                ))}
              </h1>
            </Reveal>
          ))}
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { ServicesPage, SERVICES });