function Services() {
  const { SERVICES, EXTRAS } = window.LP;
  return (
    <section className="sec" id="services">
      <div className="wrap">
        <SecHead kicker="Everything under one roof" title="Care for every tooth," accent="and every age" lede="One clinic in Hiranandani Gardens, one set of records, one team that already knows your mouth — no being sent across town for the next step."/>
        <div className="grid3">
          {SERVICES.map((s, i) => (
            <article className="svc reveal" key={s.name} style={{'--d': (i % 3) * 110 + 'ms'}}>
              <div className="bar" style={{background:s.accent}}></div>
              <span className="em" aria-hidden="true">{s.icon}</span>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
              <div className="note">{s.note}</div>
            </article>
          ))}
        </div>
        <div className="chips reveal" style={{'--d':'120ms'}}>
          {EXTRAS.map(e => <span className="chip-x" key={e}>{e}</span>)}
        </div>
      </div>
    </section>
  );
}
function Tour() {
  const { STOPS } = window.LP;
  const asides = [
    <Mascot pose="guide" label="The tooth mascot pointing the way into the clinic" key="m1"/>,
    <div className="shot" key="s1"><img src="assets/treatment-room-1.jpg" alt="Treatment chair at Dent-O-Fit clinic" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>,
    <div className="shot" key="s2"><img src="assets/treatment-room-2.jpg" alt="Consultation room at Dent-O-Fit clinic" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>,
    <Mascot pose="cheer" label="The tooth mascot cheering with both hands up" key="m2"/>
  ];
  return (
    <section className="sec" id="tour" style={{background:'var(--green-50)'}}>
      <div className="wrap">
        <div className="tour-guide reveal"><Mascot pose="guide" sparks={false} label="The tooth mascot pointing down the page to start the tour"/></div>
        <SecHead kicker="Take the tour" title="Here's exactly how a" accent="visit goes" lede="Most people's worry isn't the treatment, it's not knowing what happens next. So here's the whole thing, start to finish."/>
        <div className="tour">
          {STOPS.map((s, i) => (
            <React.Fragment key={s.title}>
              <div className="rail"><div className="node">{i + 1}</div></div>
              <div className="stop reveal" style={{'--d':'80ms'}}>
                <span className="tag">{s.tag}</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <div className="aside reveal" style={{'--d':'220ms'}}>{asides[i]}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services, Tour });