const SP_HERO=[
  {src:SP_PHOTOS.storefront,cap:'Smile Plus Dental Clinic'},
  {src:SP_PHOTOS.reception,cap:'Reception'},
  {src:SP_PHOTOS.roomModern,cap:'Treatment room'},
  {src:SP_PHOTOS.roomXray,cap:'Chairside imaging'}
];
function Hero(){
  const [i,setI]=React.useState(0);
  React.useEffect(()=>{const t=setInterval(()=>setI(v=>(v+1)%SP_HERO.length),6200);return()=>clearInterval(t);},[]);
  return <section className="sp-hero" style={{display:'flex',alignItems:'flex-end'}}>
    {SP_HERO.map((s,n)=><div key={s.src} className={'sp-hero__layer'+(n===i?' is-on':'')} aria-hidden={n!==i}>
      <div className="sp-kb" style={{backgroundImage:'url('+s.src+')',animationDelay:(-5*n)+'s'}}/>
    </div>)}
    <div className="sp-hero__scrim"/>
    <div className="sp-wrap" style={{position:'relative',zIndex:2,padding:'clamp(56px,9vw,92px) clamp(20px,4vw,32px) clamp(28px,4vw,40px)'}}>
      <div className="sp-stack" style={{gap:22,alignItems:'flex-start',maxWidth:740}}>
        <Badge tone="accent" icon="crown">Multi-specialty dental &amp; orthodontic clinic · Powai &amp; Chandivali</Badge>
        <h1 className="sp-display" style={{color:'var(--white)'}}>Expert dental and orthodontic care.</h1>
        <p className="sp-lead" style={{color:'var(--ink-150)',maxWidth:560}}>Quality, comfortable treatment from Dr. Alok Shah (M.D.S. Orthodontist) and Dr. Rajendra Shah (B.D.S. Implantologist), at two clinics in the Powai Vihar and Chandivali area.</p>
        <div className="sp-cta-row">
          <CallBtns/>
          <a className="sp-plain" href="services.html"><Button size="lg" variant="secondary" iconRight="arrow-right">See treatments</Button></a>
        </div>
        <div className="sp-row" style={{gap:10,marginTop:4}}>
          {SP_BRANCHES.map(b=><RatingPill key={b.id} branch={b} invert/>)}
        </div>
      </div>
      <div className="sp-row" style={{justifyContent:'space-between',gap:16,marginTop:34}}>
        <div className="sp-hero__dots">{SP_HERO.map((s,n)=><button key={s.src} className={'sp-hero__dot'+(n===i?' is-on':'')} aria-label={'Show '+s.cap} onClick={()=>setI(n)}/>)}</div>
        <span className="sp-data" style={{color:'var(--gold-400)'}}>{SP_HERO[i].cap}</span>
      </div>
    </div>
  </section>;
}
function Intro(){
  return <section className="sp-sec sp-decor sp-decor-mark sp-decor-mark--left" style={{background:'var(--surface-page)',overflow:'hidden'}}>
    <div className="sp-wrap sp-grid-2">
      <Reveal className="sp-stack" style={{gap:22,alignItems:'flex-start'}}>
        <span className="sp-eyebrow" style={{color:'var(--text-gold)'}}>About the clinic</span>
        <span className="sp-hr-gold" style={{width:64,background:'linear-gradient(90deg,var(--gold-500),var(--gold-300))'}}/>
        <h2 className="sp-h2">Comfortable care, explained before it starts.</h2>
        <p className="sp-lead">Smile Plus is a multi-specialty dental and orthodontic clinic providing quality and comfortable dental care to all patients, owned by Dr. Alok Shah and Dr. Rajendra Shah. World-class facilities, cutting-edge technology, a wonderful support staff and a soothing environment in the Chandivali and Powai Vihar area.</p>
        <div className="sp-row" style={{gap:10}}>
          {['Painless single sitting root canals','Certified clear aligner provider','Transparent, reasonable pricing','One-to-one treatment explanation'].map(t=>
            <span key={t} className="sp-chip"><Icon name="check-circle-2" size={15} color="var(--green-600)"/>{t}</span>)}
        </div>
        <a className="sp-plain" href="about.html"><Button variant="secondary" iconRight="arrow-right">More about us</Button></a>
      </Reveal>
      <Reveal delay={90}><Para src={SP_PHOTOS.reception} alt="Reception at Smile Plus Dental Clinic" ratio="4 / 3" gold radius="var(--radius-xl)"/></Reveal>
    </div>
  </section>;
}
function Services(){
  return <section className="sp-sec" style={{background:'var(--wash-premium)',borderTop:'1px solid var(--border-gold)',borderBottom:'1px solid var(--border-gold)'}}>
    <div className="sp-wrap sp-stack" style={{gap:36}}>
      <Reveal><SectionHeading rule size="md" eyebrow="What we treat" title="Treatments we are known for" description="Each one planned, priced and explained before we begin."/></Reveal>
      <Reveal delay={80}><div className="sp-grid-3">
        {SP_SERVICES.map((s,i)=><a key={s.id} className="sp-plain" href={s.href} style={{display:'block'}}>
          <ServiceCard icon={s.icon} title={s.title} description={s.card} meta={s.meta} premium={i===0}/></a>)}
        <a className="sp-plain" href="services.html" style={{display:'block'}}>
          <Card interactive padding={28} style={{height:'100%',display:'flex',flexDirection:'column',gap:12,justifyContent:'center'}}>
            <Icon name="arrow-right" size={22} color="var(--brand-primary)"/>
            <span className="sp-h3" style={{fontSize:20}}>All treatments</span>
            <span className="sp-body" style={{fontSize:15}}>Consultation, fillings, extractions, cleaning and the rest of our general dentistry.</span>
          </Card></a>
      </div></Reveal>
    </div>
  </section>;
}
function Transformations(){
  const picks=['ba-03','ba-09','ba-02'];
  return <section className="sp-sec" style={{background:'var(--surface-page)'}}>
    <div className="sp-wrap sp-stack" style={{gap:32}}>
      <Reveal><SectionHeading rule size="md" eyebrow="Smile transformations" title="Real results, before and after" description="All photography is our own patients’ treatment records."/></Reveal>
      <div className="sp-grid-3">
        {picks.map((id,i)=><Reveal key={id} delay={i*70}><Case id={id}/></Reveal>)}
      </div>
      <div style={{display:'flex',justifyContent:'center'}}>
        <a className="sp-plain" href="before-after.html"><Button variant="emerald" iconRight="arrow-right">See the full smile gallery</Button></a>
      </div>
    </div>
  </section>;
}
function Reviews(){
  const picks=[SP_REVIEWS[5],SP_REVIEWS[6],SP_REVIEWS[7]];
  const [i,setI]=React.useState(0);
  return <section className="sp-sec sp-decor sp-decor-mark" style={{background:'var(--wash-premium)',borderTop:'1px solid var(--border-gold)',borderBottom:'1px solid var(--border-gold)',overflow:'hidden'}}>
    <div className="sp-wrap sp-stack" style={{gap:30}}>
      <Reveal><SectionHeading rule size="md" eyebrow="Patient stories" title="What our patients actually wrote" description="Verbatim from our Google profile — Powai is rated 4.9★ across 154+ reviews."/></Reveal>
      <Reveal delay={70}><div style={{maxWidth:860,margin:'0 auto',width:'100%'}}><ReviewCard r={picks[i]}/></div></Reveal>
      <div className="sp-row" style={{gap:12,justifyContent:'center'}}>
        <IconButton icon="chevron-left" label="Previous review" onClick={()=>setI((i-1+picks.length)%picks.length)}/>
        <span className="sp-data">{i+1} / {picks.length}</span>
        <IconButton icon="chevron-right" label="Next review" onClick={()=>setI((i+1)%picks.length)}/>
        <a className="sp-plain" href="reviews.html" style={{marginLeft:8}}><Button variant="secondary" iconRight="arrow-right">All reviews</Button></a>
      </div>
    </div>
  </section>;
}
function DoctorsPreview(){
  return <section className="sp-sec" style={{background:'var(--surface-page)'}}>
    <div className="sp-wrap sp-stack" style={{gap:36}}>
      <Reveal><SectionHeading rule size="md" eyebrow="Clinical team" title="Meet the two dentists who will treat you" description="The same doctors at every visit — no rotating panel."/></Reveal>
      <div className="sp-grid-2" style={{alignItems:'stretch'}}>
        {SP_DOCTORS.map((d,i)=><Reveal key={d.id} delay={i*80}>
          <a className="sp-plain" href={d.href} style={{display:'block',height:'100%'}}>
            <Card interactive padding={0} style={{overflow:'hidden',height:'100%',display:'flex',flexDirection:'column'}}>
              <span className="sp-shot" style={{border:0,borderRadius:0,aspectRatio:'4 / 3.2'}}>
                <img src={d.photo} alt={d.name+' — '+d.role} style={{objectPosition:'center 25%'}}/></span>
              <span className="sp-stack" style={{gap:8,padding:'22px 24px 26px'}}>
                <span className="sp-h3">{d.name}, {d.credential}</span>
                <span className="sp-data">{d.role}</span>
                <span className="sp-body" style={{fontSize:15.5,marginTop:4}}>{d.one}</span>
                <span className="sp-row" style={{gap:7,marginTop:8,color:'var(--brand-primary)',fontFamily:'var(--font-display)',fontWeight:600,fontSize:14.5}}>
                  Read the profile<Icon name="arrow-right" size={16} color="var(--brand-primary)"/></span>
              </span>
            </Card></a></Reveal>)}
      </div>
    </div>
  </section>;
}
function Locations(){
  return <section className="sp-sec" style={{background:'var(--wash-premium)',borderTop:'1px solid var(--border-gold)'}}>
    <div className="sp-wrap sp-stack" style={{gap:34}}>
      <Reveal><SectionHeading rule size="md" eyebrow="Two locations" title="Powai Vihar and Chandivali" description={SP_CLINIC.hoursLine}/></Reveal>
      <div className="sp-grid-2" style={{alignItems:'stretch'}}>
        {SP_BRANCHES.map((b,i)=><Reveal key={b.id} delay={i*80}>
          <Card padding={0} style={{overflow:'hidden',height:'100%',display:'flex',flexDirection:'column'}}>
            <iframe title={b.name+' branch map'} src={b.map} loading="lazy" style={{width:'100%',height:210,border:0,display:'block',background:'var(--ink-150)'}}></iframe>
            <span className="sp-stack" style={{gap:12,padding:'22px 24px 26px'}}>
              <span className="sp-row" style={{justifyContent:'space-between',gap:12}}>
                <span className="sp-h3" style={{fontSize:22}}>{b.name} branch</span>
                <span className="sp-row" style={{gap:6}}><GoogleG size={15}/><span className="sp-data" style={{color:'var(--text-heading)'}}>{b.rating}★</span></span>
              </span>
              <span className="sp-body" style={{fontSize:15}}>{b.address}</span>
              <span className="sp-row" style={{gap:10,marginTop:4}}>
                <a className="sp-plain" href={'tel:'+b.tel}><Button size="sm" variant="accent" icon="phone">Call {b.phone}</Button></a>
                <WaButton size="sm" wa={b.wa} waText={b.waText} msg={'Hello Smile Plus, I would like an appointment at the '+b.name+' branch.'}/>
              </span>
            </span>
          </Card></Reveal>)}
      </div>
      <div style={{display:'flex',justifyContent:'center'}}><a className="sp-plain" href="contact.html"><Button variant="secondary" iconRight="arrow-right">Directions and timings</Button></a></div>
    </div>
  </section>;
}
function HomePage(){
  return <React.Fragment>
    <SPHead active="Home"/>
    <Hero/>
    <div className="sp-sec--compact" style={{background:'var(--white)',borderBottom:'1px solid var(--border-hairline)',padding:'20px 0'}}><div className="sp-wrap"><TrustBar/></div></div>
    <Intro/>
    <Services/>
    <Transformations/>
    <Reviews/>
    <DoctorsPreview/>
    <Locations/>
    <CTABand/>
    <SPFooter/>
  </React.Fragment>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<HomePage/>);