// site/Services.jsx — 3 portal cards double as tabs; selected category expands a detail panel below.
// On MOBILE: accordion behavior — tapping a lane expands its services inline below that lane only.
const IMG_EVENTS = 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=900&q=80&auto=format&fit=crop';
const IMG_INCENTIVE = 'https://images.unsplash.com/photo-1506929562872-bb421503ef21?w=900&q=80&auto=format&fit=crop';
const IMG_INNOVATION = 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=900&q=80&auto=format&fit=crop';

const SERVICES = [
  {
    id: 'events',
    idx: '01 · Category',
    title: 'Business Events',
    copy: 'Conferences, kickoffs, leadership summits and partner days — designed end-to-end so your team walks out aligned, not exhausted.',
    href: 'business-events.html',
    image: IMG_EVENTS,
    panel: {
      eyebrow: 'Strategic Meetings & Event Management',
      title: 'End-to-end for every business event',
      body: 'From investigator meetings to global kickoffs — we plan, produce, and run corporate gatherings that leave teams aligned and energized.',
      items: [
        'Meetings Management',
        'Global Hotel Sourcing & Venue Negotiation',
        'Registration & Attendee Management',
        'Event Design & Production',
        'Virtual & Hybrid Event Support',
        'Destination Experiences & Local Coordination',
      ],
    },
  },
  {
    id: 'incentive',
    idx: '02 · Category',
    title: 'Incentive Travel',
    copy: 'Unforgettable trips that reward performance and build loyalty. We handle every detail — destinations, logistics, moments that land.',
    href: 'incentive-travel.html',
    image: IMG_INCENTIVE,
    panel: {
      eyebrow: 'Incentive Travel Programs',
      title: 'Reward experiences, from concept to curbside',
      body: 'Programs designed to motivate performance and celebrate top achievers — anywhere in the world, every detail considered.',
      items: [
        'Incentive Travel Design & Management',
        'Destination & Resort Sourcing',
        'Group Air & Travel Coordination',
        'On-site Program Management',
        'Destination Experiences & Local Coordination',
      ],
    },
  },
  {
    id: 'innovation',
    idx: '03 · Category',
    title: 'Innovation',
    copy: 'Workshops, hackathons, and ideation programs that unlock real thinking. Includes Happy Sites — our AI-enabled site inspection platform.',
    href: 'innovation.html',
    image: IMG_INNOVATION,
    panel: {
      eyebrow: 'Innovation Programs',
      title: 'AI-enabled tools for the future of meetings',
      body: "We're building a suite of AI-enabled tools for planners. Happy Sites is live today; more tools are under development.",
      items: [
        'Happy Sites — AI-enabled site inspection platform',
        'Additional tools under development',
      ],
    },
  },
];

function ServicePanel({ service }) {
  const panel = service.panel;
  return (
    <div className="services-panel" key={service.id}>
      <div className="panel-intro">
        <div className="panel-eyebrow">{panel.eyebrow}</div>
        <h3>{panel.title}<span className="period">.</span></h3>
        <p>{panel.body}</p>
        <a className="btn btn-primary" href={service.href} style={{ marginTop: 24 }}>
          Learn more <span className="btn-arrow">›</span>
        </a>
      </div>
      <ul>
        {panel.items.map((item, i) => (
          <li key={item}>
            <span className="count">{String(i + 1).padStart(2, '0')}</span>
            <span className="label">{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Services({ variant, dark, terse, data }) {
  const CARD_IMAGES = [IMG_EVENTS, IMG_INCENTIVE, IMG_INNOVATION];
  const services = (data && data.services)
    ? data.services.map((s, i) => ({
        id: s._key || String(i),
        idx: s.categoryLabel,
        title: s.title,
        copy: s.copy,
        href: s.href,
        image: CARD_IMAGES[i] || IMG_EVENTS,
        panel: s.panel,
      }))
    : SERVICES;

  const eyebrow = (data && data.eyebrow) || 'What we do';
  const heading = (data && data.heading) || 'Three ways we move the needle';
  const intro   = (data && data.intro)   || "We're a business events agency — not a production shop. Strategy comes first, and every moment maps to an outcome that matters to your board. Tap a lane to see the services inside it.";

  const [active, setActive] = React.useState(null);
  const activeId = active || (services[0] && services[0].id);
  const activeService = services.find(s => s.id === activeId) || services[0];
  return (
    <section id="services" className={`services ${variant || ''} ${dark ? 'dark' : ''}`}>
      <div className="container">
        <div className="services-head">
          <div>
            <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
            <h2>{heading}<span className="period">.</span></h2>
          </div>
          {!terse && <p className="intro">{intro}</p>}
        </div>

        {/* Mobile accordion: each lane is its own row, tap to toggle panel inline below it */}
        <div className="services-accordion">
          {services.map(s => {
            const isOpen = active === s.id;
            return (
              <div key={s.id} className={`acc-item ${isOpen ? 'open' : ''}`}>
                <button
                  type="button"
                  className="acc-lane"
                  aria-expanded={isOpen}
                  onClick={() => setActive(isOpen ? null : s.id)}
                >
                  <div className="acc-image">
                    <img src={s.image} alt="" />
                  </div>
                  <div className="acc-text">
                    <h3>{s.title}<span className="period">.</span></h3>
                    <span className="acc-cta">
                      {isOpen ? 'Hide services' : 'Show services'} <span className="chev" aria-hidden>{isOpen ? '▾' : '›'}</span>
                    </span>
                  </div>
                </button>
                {isOpen && <ServicePanel service={s} />}
              </div>
            );
          })}
        </div>

        {/* Desktop: 3-up grid of big cards, with a single expanded panel below */}
        <div className="services-grid" role="tablist">
          {services.map(s => (
            <div key={s.id}
              role="tab"
              aria-selected={active === s.id}
              className={`service-card ${active === s.id ? 'active' : ''}`}
              onClick={() => setActive(s.id)}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActive(s.id); } }}
              tabIndex={0}>
              <div className="image">
                <img src={s.image} alt="" />
              </div>
              <div className="body">
                <h3>{s.title}<span className="period">.</span></h3>
                {!terse && <p>{s.copy}</p>}
                <span className="more">Show services <span className="arrow">›</span></span>
              </div>
            </div>
          ))}
        </div>

        <div className="services-panel-desktop">
          {activeService && <ServicePanel service={activeService} />}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;