function Sticker({ item, cls }) {
  return (
    <div className={'sticker ' + (cls || '')} title={item.label}>
      <span className="ico" style={{background:item.bg}} aria-hidden="true">{item.icon}</span>{item.label}
    </div>
  );
}
function TopBar() {
  const { Button } = window.DentOFitDesignSystem_a776f9;
  return (
    <header className="topbar">
      <img src="assets/logo.png" alt="Dent-O-Fit — Total Dental Fitness Centre" style={{height:46}}/>
      <nav className="nav">
        <a href="#services">Services</a>
        <a href="#tour">Your Visit</a>
        <a href="#doctor">Our Doctor</a>
        <a href="#faq">FAQs</a>
        <a href="#contact">Contact</a>
      </nav>
      <Button size="sm" onClick={window.LP.book}>Book Appointment</Button>
    </header>
  );
}
function Hero() {
  const { Button } = window.DentOFitDesignSystem_a776f9;
  const { OFFERINGS } = window.LP;

  return (
    <section className="hero">
      <div className="stickers">
        {OFFERINGS.map((o, i) => <Sticker key={o.label} item={o} cls={'s' + (i + 1)}/>)}
      </div>
      <div className="hero-inner">
        <div className="eyebrow reveal in"><i></i>Hiranandani Gardens, Powai · Mumbai</div>
        <Mascot pose="wave" label="A smiling tooth mascot waving hello"/>
        <h1 className="hl"><Words text="Get your smile" className="in"/><br/><em>match fit</em></h1>
        <p className="sub reveal in" style={{'--d':'240ms'}}>From a single filling to a full set of implants — <b>Dr. Namrata Patil Shiwalkar</b> and team keep your teeth in top shape, gently and without the guesswork.</p>
        <div className="cta-row reveal in" style={{'--d':'320ms'}}>
          <Button size="lg" onClick={window.LP.book}>Book on WhatsApp</Button>
          <Button size="lg" variant="secondary" onClick={() => { window.location.href = window.LP.TEL; }}>Call {window.LP.PHONE}</Button>
        </div>
        <div className="meta reveal in" style={{'--d':'400ms'}}>
          <span><b>Since 2010</b> in Powai</span>
          <span><b>20 years</b> of practice</span>
          <span><b>Mon–Fri</b> · 9:30am–9pm</span>
        </div>
        <div className="sticker-row">
          {OFFERINGS.map(o => <Sticker key={o.label} item={o}/>)}
        </div>
      </div>
    </section>
  );
}
function Marquee() {
  const { MARQUEE } = window.LP;
  const run = MARQUEE.concat(MARQUEE);
  return (
    <div className="marq" aria-hidden="true">
      <div className="marq-track">{run.map((t, i) => <span key={i}>{t}</span>)}</div>
    </div>
  );
}
Object.assign(window, { Hero, TopBar, Marquee, Sticker });