function Services() {
  const [open, setOpen] = React.useState(0);

  const services = [
    {
      tag: '01',
      title: 'Fractional CX and product leadership',
      sub: "Step in as your interim CX or product lead.",
      fit: "For companies between hires, in growth phases, or solving a specific strategic problem.",
      items: [
        'Senior decision-making in the room',
        'Stakeholder management across the business',
        'Team leadership and coaching alongside me',
      ],
      outcome: "A senior CX or product lead in seat, immediately, without the cost or dilution of a full-time hire."
    },
    {
      tag: '02',
      title: 'Proposition and experience design',
      sub: "Get clear on what you're offering, who it's for, and why they should care.",
      fit: "For teams launching something new, or repositioning something that isn't landing.",
      items: [
        'Customer research and problem definition',
        'Service and experience design',
        'Go-to-market and positioning',
      ],
      outcome: "A proposition that lands, with the evidence to back it."
    },
    {
      tag: '03',
      title: 'Inclusive design and vulnerability strategy',
      sub: "Build products that work for everyone, especially the customers who need them most.",
      fit: "For financial services teams answering to FCA Consumer Duty, vulnerability frameworks, or inclusive proposition obligations.",
      items: [
        'FCA Consumer Duty implementation',
        'Vulnerability frameworks and customer strategy',
        'Inclusive proposition and service design',
      ],
      outcome: "Products and processes that work for every customer, including the ones easiest to overlook."
    }
  ];

  return (
    <section id="services" style={{ background: 'var(--beige-soft)', borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <div className="sec-header">
          <div>
            <div className="eyebrow">Services</div>
            <h2>How I help<span style={{ color: 'var(--navy)' }}>.</span></h2>
          </div>
          <p className="muted" style={{ fontSize: 18, lineHeight: 1.55 }}>
            Fractional, senior, and hands-on. I embed with your team for a defined period to solve a specific problem, then I'm done. No long retainers. No junior consultants doing the work. Just me, focused, for as long as you need.
          </p>
        </div>

        <div style={{ display: 'grid', gap: 14 }}>
          {services.map((s, i) => (
            <div
              key={i}
              className={`card service-card ${open === i ? 'open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{ background: open === i ? '#fff' : 'rgba(255,255,255,0.65)' }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32 }}>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ color: 'var(--navy)', marginBottom: 12 }}>{s.tag}</div>
                  <h3 style={{ fontSize: 'clamp(24px, 2.8vw, 34px)', marginBottom: 10 }}>{s.title}</h3>
                  <p style={{ fontSize: 17, maxWidth: 680 }}>{s.sub}</p>
                </div>
                <button
                  aria-label={open === i ? 'Collapse' : 'Expand'}
                  style={{
                    width: 44, height: 44, borderRadius: 999,
                    border: '1px solid var(--rule)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: open === i ? 'var(--ink)' : 'transparent',
                    color: open === i ? '#fff' : 'var(--ink)',
                    flexShrink: 0, transition: 'all 0.3s ease'
                  }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.3s ease' }}>
                    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                  </svg>
                </button>
              </div>

              <div className="svc-meta">
                <div className="svc-meta-grid">
                  <div>
                    <div className="mono" style={{ color: 'var(--navy)', marginBottom: 10 }}>Good fit when</div>
                    <p style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, lineHeight: 1.4, color: 'var(--ink)', marginBottom: 28 }}>
                      {s.fit}
                    </p>
                    <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 14 }}>What it looks like</div>
                    <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                      {s.items.map((x, j) => (
                        <li key={j} style={{ display: 'flex', gap: 12, fontSize: 15, lineHeight: 1.55 }}>
                          <span style={{ color: 'var(--navy)', flexShrink: 0 }}>→</span>
                          <span>{x}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 14 }}>Outcome</div>
                    <p style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, lineHeight: 1.35, color: 'var(--ink)' }}>
                      {s.outcome}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="services-cta">
          <div>
            <div className="mono" style={{ color: 'var(--navy)', marginBottom: 8 }}>NOT SURE WHICH ONE FITS?</div>
            <p style={{ fontFamily: "'Playfair Display', serif", fontSize: 24, lineHeight: 1.4, color: 'var(--ink)', maxWidth: 540 }}>
              Grab 30 minutes. We'll work out the right shape together, or I'll tell you straight if I'm not the right person for it.
            </p>
          </div>
          <a href="https://cal.com/megan-hunter" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            Book an intro call
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;