// Shared service narrative: stacked panels for home and service details.
const ServiceShowcase = ({detailed = false}) => {
  const root=React.useRef(null);
  const services=window.CONTENT.SERVICES;
  const palettes=[
    {bg:'#6600ff',fg:'#ffffff',accent:'#ffcc00',variant:'curl'},
    {bg:'#ffcc00',fg:'#0a0a0f',accent:'#ff0066',variant:'ring'},
    {bg:'#ff0066',fg:'#0a0a0f',accent:'#ff9900',variant:'dash'},
    {bg:'#ff9900',fg:'#0a0a0f',accent:'#6600ff',variant:'hook'}
  ];
  React.useEffect(()=>{
    const panels=[...root.current.querySelectorAll('.service-stack__panel')];
    let frame=0;
    const update=()=>{
      frame=0;
      const enabled=window.GarabatoFX?.isMotionEnabled();
      panels.forEach((panel,i)=>{
        const next=panels[i+1]?.getBoundingClientRect();
        const covered=enabled&&next?Math.max(0,Math.min(1,(window.innerHeight-next.top)/Math.max(1,window.innerHeight-96))):0;
        panel.style.setProperty('--covered',covered.toFixed(4));
      });
    };
    const schedule=()=>{if(!frame)frame=requestAnimationFrame(update);};
    const measure=()=>{
      const nav=window.innerWidth<=600?68:88;
      panels.forEach(panel=>{
        // Tall cards scroll through their full content, then pin at the bottom.
        const pin=Math.min(nav,window.innerHeight-panel.offsetHeight);
        panel.style.setProperty('--pin-top',pin+'px');
      });
      schedule();
    };
    const resize=new ResizeObserver(measure);
    panels.forEach(panel=>resize.observe(panel));
    window.addEventListener('scroll',schedule,{passive:true});window.addEventListener('resize',measure);
    window.addEventListener('garabato-motion-change',schedule);schedule();
    return()=>{cancelAnimationFrame(frame);resize.disconnect();window.removeEventListener('scroll',schedule);window.removeEventListener('resize',measure);window.removeEventListener('garabato-motion-change',schedule);};
  },[]);
  return <section ref={root} className="service-stack" id={detailed?'service-disciplines':'services'} aria-label="Lo que hacemos">
    <div className="service-stack__intro">
      <div className="t-eyebrow service-stack__intro-eyebrow">Lo que hacemos</div>
      <div><h2>Cuatro disciplinas.<br/><em>Un solo trazo.</em></h2></div>
      <div className="service-stack__lead"><p>Construimos marcas, productos y relatos con carácter. Cuatro formas de dar vida a lo que tu marca tiene para decir.</p>
        <nav className="service-stack__index" aria-label="Explorar servicios">{services.map(s=><a key={s.n} href={detailed?'#svc-'+s.n:'#home-svc-'+s.n}><span>{s.n}</span> {s.title}<Icon name="arrow-down" size={14}/></a>)}</nav>
      </div>
    </div>
    <div className="service-stack__panels">
      {services.map((service,i)=>{
        const theme=palettes[i];
        return <article key={service.n} id={(detailed?'svc-':'home-svc-')+service.n} className="service-stack__panel" style={{'--service-bg':theme.bg,'--service-fg':theme.fg,'--service-accent':theme.accent,'--panel-index':i}} aria-labelledby={(detailed?'service-title-':'home-service-title-')+service.n}>
          <span className="service-stack__watermark" aria-hidden="true">{service.n}</span>
          <div className="service-stack__content">
            <div className="service-stack__copy">
              <h3 id={(detailed?'service-title-':'home-service-title-')+service.n}>{service.title}</h3>
              <p className="service-stack__description">{detailed?service.desc:service.short}</p>
              <ul className="service-stack__items">{service.items.slice(0,detailed?6:4).map(item=><li key={item}><Icon name="arrow-right" size={14}/>{item}</li>)}</ul>
              {detailed?<dl className="service-stack__specs"><div><dt>Tiempo</dt><dd>{service.time}</dd></div><div><dt>Inversión</dt><dd>{service.price}</dd></div><div><dt>Empieza con</dt><dd>{service.starts}</dd></div></dl>:null}
              <a className="service-stack__link" href={detailed?'index.html#contact':'services.html#svc-'+service.n}>{detailed?'Hablemos de '+service.title:'Explorar '+service.title}<Icon name="arrow-up-right" size={17}/></a>
            </div>
            <div className="service-stack__drawing" aria-hidden="true"><GraphicTrace variant={theme.variant} size="xl" duration={950} cycle={Infinity}/></div>
          </div>
        </article>;
      })}
    </div>
  </section>;
};
window.ServiceShowcase=ServiceShowcase;