// ============================================================
// SERVICES PAGE — 4 service areas as long-form anchored blocks
// ============================================================

const SERVICES = [
  {
    id: 'voc',
    num: '01',
    icon: 'ear',
    title: 'VOC Insight Activation',
    intro: 'We turn customer feedback into insight, insight into action, and action into better experiences and durable business growth.',
    problem: 'Most VOC programmes collect data but never close the loop. Insight sits in dashboards while strategic decisions are made on instinct.',
    solution: 'We design continuous listening systems — interviews, panels, behavioural data, NPS-deep-dives — that route signal directly into product, marketing, and CS workflows.',
    deliverables: [
      'Continuous interview programmes',
      'Customer advisory panels',
      'Sentiment and theme reporting',
      'Closed-loop action tracking',
      'Insight-to-action playbooks',
      'Executive sense-making sessions',
    ],
    value: 'Faster decisions. Sharper roadmaps. Marketing and CS teams that share a single, evidenced view of the customer.',
  },
  {
    id: 'advocacy',
    num: '02',
    icon: 'megaphone',
    title: 'Customer Advocacy',
    intro: 'We build a predictable, scalable method for identifying, recruiting, activating, and celebrating happy, strategic customers.',
    problem: 'Reference customers are usually a small overworked list. Sales runs out of stories. Marketing runs out of fresh proof. Advocacy stalls.',
    solution: 'A tiered programme — discover, recruit, equip, reward — with the operational scaffolding so advocacy compounds month on month, not project by project.',
    deliverables: [
      'Advocacy operating model',
      'Reference library and CRM integration',
      'Recognition and rewards programme',
      'Advocate enablement materials',
      'Quarterly advocacy reporting',
      'Sales and CS playbooks',
    ],
    value: 'Predictable supply of references, reviews, and testimonials. A measurable lift in sales velocity and reduction in late-stage friction.',
  },
  {
    id: 'storytelling',
    num: '03',
    icon: 'bookOpen',
    title: 'Strategic Storytelling',
    intro: 'We translate complex technical success into strategic, human stories that influence buying decisions and earn lasting brand equity.',
    problem: 'B2B brands have remarkable customer outcomes buried inside feature pages and quarterly slides. The story never reaches the people who need to hear it.',
    solution: 'Editorial discipline, documentary-grade production, and a distribution plan that respects the audience. Stories sized for sales decks, keynotes, sites, and trade press.',
    deliverables: [
      'Documentary-style customer films',
      'Long-form written case studies',
      'Executive keynote narratives',
      'Sales-ready story decks',
      'Editorial photography',
      'Story-driven campaign systems',
    ],
    value: 'Memorable, trusted brand stories that move buyers, win awards, and outlive any single campaign cycle.',
  },
  {
    id: 'loyalty',
    num: '04',
    icon: 'usersRound',
    title: 'Loyalty & Communities',
    intro: 'We create value-led spaces where customers learn, connect, grow, and act as an extended sales and marketing force.',
    problem: 'Customer relationships often end at renewal. There is no peer network, no shared learning, no compounding loyalty — and no community insulation when a competitor calls.',
    solution: 'Hosted communities, member programmes, and learning ecosystems designed around genuine value exchange — not gated content and badges.',
    deliverables: [
      'Hosted customer communities',
      'Member and certification programmes',
      'Peer events and salons',
      'Community-led research and content',
      'Recognition and loyalty tiers',
      'Quarterly member digests',
    ],
    value: 'Stickier relationships, higher NRR, lower churn, and a self-sustaining engine for advocacy, evidence, and influence.',
  },
];

function ServicesHero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero__inner">
          <span className="hero__kicker">Services</span>
          <h1 style={{ font: '700 clamp(44px, 6vw, 88px)/1 var(--font-family-base)', letterSpacing: '-0.045em' }}>
            Four services.<br/>One growth engine.
          </h1>
          <p className="hero__lead">
            Listen, mobilise, story, belong. Each service is a complete operating model —
            run on its own, or sequenced together as a connected customer-powered growth programme.
          </p>
        </div>
      </div>
    </section>
  );
}

function ServicesIndex({ onNavigate }) {
  const scrollTo = (id) => {
    const el = document.getElementById(`svc-${id}`);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 88;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <section style={{ background: 'var(--bg-canvas)' }}>
        <div className="container">
          <div className="svc-toc">
            {SERVICES.map(s => (
              <div key={s.id} className="svc-toc__item" onClick={() => scrollTo(s.id)}>
                <div className="svc-toc__num">{s.num} · Service</div>
                <div className="svc-toc__title">{s.title}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section--canvas">
        <div className="container">
          {SERVICES.map(s => (
            <div key={s.id} id={`svc-${s.id}`} className="svc-block">
              <div className="svc-block__left">
                <div className="svc-block__num">{s.num} · Service</div>
                <h2 className="svc-block__title">{s.title}</h2>
                <p className="svc-block__intro">{s.intro}</p>
                <div style={{
                  marginTop: 32,
                  width: 56, height: 56,
                  borderRadius: 'var(--radius-md)',
                  background: 'var(--bright-turquoise-surface)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={s.icon} size={28} color="var(--text-deep-grape)" />
                </div>
              </div>

              <div className="svc-block__body">
                <div className="svc-block__chunk">
                  <h4>The customer problem</h4>
                  <p>{s.problem}</p>
                </div>
                <div className="svc-block__chunk">
                  <h4>The inevidence solution</h4>
                  <p>{s.solution}</p>
                </div>
                <div className="svc-block__chunk">
                  <h4>Example deliverables</h4>
                  <ul className="svc-block__deliverables">
                    {s.deliverables.map(d => <li key={d}>{d}</li>)}
                  </ul>
                </div>
                <div className="svc-block__chunk">
                  <h4>Business value</h4>
                  <p>{s.value}</p>
                </div>
                <div className="svc-block__cta">
                  <button className="btn btn--primary" onClick={() => onNavigate('contact')}>
                    Talk to the team <Icon name="arrowRight" size={16} color="#fff" />
                  </button>
                  <button className="btn btn--ghost" onClick={() => onNavigate('work')}>
                    See related work <Icon name="arrowUpRight" size={14} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

window.ServicesHero = ServicesHero;
window.ServicesIndex = ServicesIndex;