// Services / Atelier section — expandable cards
function ServiceRow({ service, expanded, onToggle }) {
  const r = useReveal();
  return (
    <div className={'de-srow ' + (expanded ? 'is-open' : '')} ref={r} onClick={onToggle}>
      <div className="de-srow__head">
        <div className="de-srow__code">{service.code}</div>
        <div className="de-srow__title">
          <h3>{service.title}</h3>
          <p>{service.tagline}</p>
        </div>
        <button className="de-srow__btn" aria-label="Toggle">
          <Icon name={expanded ? 'minus' : 'plus'} size={18}/>
        </button>
      </div>
      <div className="de-srow__body">
        <ul>
          {service.items.map(it => (
            <li key={it}><span></span>{it}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Services() {
  const [open, setOpen] = useState(0);
  const ref = useReveal();
  return (
    <section className="de-section de-services" id="services">
      <div className="de-container">
        <div className="de-services__head de-reveal is-in" ref={ref}>
          <div className="de-eyebrow">Our Atelier · What We Do</div>
          <h2 className="de-services__heading">
            The disciplines<br/>of <em>the house.</em>
          </h2>
          <p className="de-services__lead">
            Four practices, one signature. Every residence is taken from drawing
            to handover under a single coordinated team.
          </p>
        </div>

        <div className="de-services__list">
          {SERVICES.map((s, i) => (
            <ServiceRow key={s.code}
              service={s}
              expanded={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;