const { Button, IconButton, Icon, Logo, Badge, Tag, Card, SectionHeading, StatBlock, ServiceCard, Dialog, Input, Select, Tabs } = window.SmilePlusDesignSystem_bc5017;
const DS_ROOT='_ds/smile-plus-design-system-bc50172d-8471-47bb-abbc-5812a0242306/';
const LOGO_SRC=DS_ROOT+'assets/logo-lockup.png';
const openBook=()=>window.dispatchEvent(new Event('sp-book'));
function FilledStar({size=15,color='var(--gold-500)'}){
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color} stroke={color} strokeWidth="1" strokeLinejoin="round" aria-hidden="true" style={{display:'inline-block',flex:'none'}}>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  </svg>;
}
const WA_ICON='assets/icons/whatsapp.webp';
function WaIcon({size=18}){
  return <img src={WA_ICON} alt="" width={size} height={size} style={{display:'inline-block',flex:'none'}}/>;
}
const WA_H={sm:'var(--control-h-sm)',md:'var(--control-h-md)',lg:'var(--control-h-lg)'};
const WA_PAD={sm:'0 14px',md:'0 20px',lg:'0 28px'};
const WA_FS={sm:13,md:15,lg:16};
function WaButton({size='lg',msg,wa,waText,children='WhatsApp',style}){
  const plainWa=wa||SP_CONTACT.wa, textWa=waText||SP_CONTACT.waText;
  return <a className="sp-plain sp-wa-btn" href={msg?textWa+encodeURIComponent(msg):plainWa} target="_blank" rel="noopener"
    style={{display:'inline-flex',alignItems:'center',justifyContent:'center',gap:8,height:WA_H[size],padding:WA_PAD[size],fontFamily:'var(--font-display)',fontWeight:600,fontSize:WA_FS[size],letterSpacing:'-0.005em',borderRadius:'var(--radius-pill)',...style}}>
    <WaIcon size={size==='sm'?15:18}/>{children}
  </a>;
}
const WA_ICONBTN_PX={sm:32,md:40,lg:48};
function WaIconButton({size='md',label='WhatsApp us',href}){
  const px=WA_ICONBTN_PX[size];
  return <a className="sp-plain sp-wa-iconbtn" href={href||SP_CONTACT.wa} target="_blank" rel="noopener" aria-label={label}
    style={{width:px,height:px,borderRadius:'50%',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
    <WaIcon size={Math.round(px*0.56)}/>
  </a>;
}
function CallBtns({size='lg',msg}){
  return <React.Fragment>
    <a className="sp-plain" href={'tel:'+SP_CONTACT.tel}><Button size={size} variant="accent" icon="phone">Call {SP_CONTACT.phone}</Button></a>
    <WaButton size={size} msg={msg}/>
  </React.Fragment>;
}

/* ---------- motion helpers ---------- */
let spObs=null;
function spObserve(el){
  if(!el) return;
  if(!spObs) spObs=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('is-in');spObs.unobserve(e.target);}}),{rootMargin:'0px 0px -8% 0px',threshold:.06});
  spObs.observe(el);
}
function Reveal({children,delay=0,style,className=''}){
  const r=React.useRef(null);
  React.useEffect(()=>spObserve(r.current),[]);
  return <div ref={r} className={'sp-rev '+className} style={{transitionDelay:delay+'ms',...style}}>{children}</div>;
}
let spParaBound=false;
function spBindParallax(){
  if(spParaBound) return; spParaBound=true;
  if(window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;
  let queued=false;
  const run=()=>{queued=false;
    document.querySelectorAll('.sp-para img').forEach(img=>{
      const b=img.parentElement.getBoundingClientRect();
      const vh=window.innerHeight||800;
      if(b.bottom<-200||b.top>vh+200) return;
      const p=(b.top+b.height/2-vh/2)/vh;
      img.style.transform='translate3d(0,'+(Math.max(-1,Math.min(1,p))*-26).toFixed(1)+'px,0)';
    });};
  const onScroll=()=>{if(!queued){queued=true;requestAnimationFrame(run);}};
  window.addEventListener('scroll',onScroll,{passive:true});
  window.addEventListener('resize',onScroll);
  requestAnimationFrame(run);
}

/* ---------- photography ---------- */
function Para({src,alt,ratio='4 / 3',gold,radius,style}){
  React.useEffect(spBindParallax,[]);
  return <div className="sp-para sp-shot" style={{aspectRatio:ratio,borderRadius:radius||'var(--radius-lg)',
    border:gold?'1px solid var(--border-gold)':undefined,outline:gold?'1px solid var(--gold-100)':undefined,outlineOffset:gold?8:undefined,...style}}>
    <img src={src} alt={alt} style={{position:'absolute',left:0,top:'-9%',height:'118%',width:'100%',objectFit:'cover'}}/>
  </div>;
}
function Shot({src,alt,ratio='4 / 3',gold,caption,style}){
  return <figure style={{margin:0,display:'flex',flexDirection:'column',gap:10}}>
    <span className={'sp-shot'+(gold?' sp-shot--gold':'')} style={{aspectRatio:ratio,...style}}><img src={src} alt={alt}/></span>
    {caption&&<figcaption className="sp-data" style={{letterSpacing:'var(--ls-mono)'}}>{caption}</figcaption>}
  </figure>;
}
function Slot({title,note,ratio='4 / 3',style}){
  return <div className="sp-slot" style={{aspectRatio:ratio,...style}}>
    <Icon name="camera" size={20} color="var(--gold-600)"/>
    <span className="sp-slot__t">{title}</span>
    <span className="sp-slot__d">{note}</span>
  </div>;
}
function Note({children}){
  return <p className="sp-note"><Icon name="info" size={16} color="var(--gold-700)" style={{flex:'none',marginTop:2}}/><span>{children}</span></p>;
}

/* ---------- before / after ---------- */
function BA({id,ratio='4 / 3',label,note}){
  return <figure style={{margin:0,display:'flex',flexDirection:'column',gap:12}}>
    <div className="sp-ba2">
      <div className="sp-ba2__img" style={{aspectRatio:ratio}}>
        <img src={'assets/photos/'+id+'-before.png'} alt={(label||'Case')+' — before treatment'}/>
        <span className="sp-ba2__tag">Before</span>
      </div>
      <div className="sp-ba2__img" style={{aspectRatio:ratio}}>
        <img src={'assets/photos/'+id+'-after.png'} alt={(label||'Case')+' — after treatment'}/>
        <span className="sp-ba2__tag">After</span>
      </div>
    </div>
    {(label||note)&&<figcaption style={{display:'flex',flexDirection:'column',gap:4}}>
      {label&&<span className="sp-data">{label}</span>}
      {note&&<span style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:15.5,color:'var(--text-heading)',lineHeight:1.35}}>{note}</span>}
    </figcaption>}
  </figure>;
}

function Case({id,note}){
  const p=SP_PANELS[id];
  if(!p) return null;
  return <BA id={id} ratio={p.ratio} label={'Case '+p.no+' · '+p.label} note={note||p.title}/>;
}

/* ---------- FAQ ---------- */
function FAQ({items,open:initial=0}){
  const [open,setOpen]=React.useState(initial);
  return <div className="sp-faq">
    {items.map(([q,a],i)=><div key={q} className="sp-faq__row">
      <button className="sp-faq__q" aria-expanded={open===i} onClick={()=>setOpen(open===i?-1:i)}>
        <span>{q}</span><Icon name="chevron-down" size={19} color="var(--ink-500)" className={'sp-faq__chev'+(open===i?' is-open':'')}/>
      </button>
      <div className={'sp-faq__a'+(open===i?' is-open':'')}><p>{a}</p></div>
    </div>)}
  </div>;
}

/* ---------- trust + reviews ---------- */
function GoogleG({size=18}){
  return <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" style={{flex:'none'}}>
    <path fill="#4285F4" d="M45.1 24.5c0-1.6-.1-2.8-.4-4H24v7.6h11.9c-.2 2-1.5 5-4.4 7l6.7 5.2c4-3.7 6.9-9.1 6.9-15.8z"/>
    <path fill="#34A853" d="M24 46c6 0 11-2 14.2-5.4l-6.7-5.2c-1.9 1.3-4.4 2.2-7.5 2.2-5.8 0-10.7-3.8-12.5-9.1l-7 5.4C8 41.1 15.4 46 24 46z"/>
    <path fill="#FBBC05" d="M11.5 28.5c-.5-1.4-.8-2.9-.8-4.5s.3-3.1.7-4.5l-7-5.4C3.3 17 2.5 20.4 2.5 24s.8 7 2.4 9.9l6.6-5.4z"/>
    <path fill="#EA4335" d="M24 10.2c4.1 0 6.9 1.8 8.5 3.3l6.2-6C34.9 4 30 2 24 2 15.4 2 8 6.9 4.9 14.1l6.6 5.4C13.3 14 18.2 10.2 24 10.2z"/></svg>;
}
function RatingPill({branch,invert}){
  return <a className="sp-plain" href={branch.google||SP_CLINIC.google} target="_blank" rel="noopener"
    style={{display:'inline-flex',alignItems:'center',gap:10,padding:'9px 14px',borderRadius:999,
      border:'1px solid '+(invert?'var(--border-gold-on-dark)':'var(--border-hairline)'),background:invert?'rgba(255,255,255,.05)':'var(--white)'}}>
    <GoogleG/>
    <span style={{display:'flex',flexDirection:'column',lineHeight:1.25}}>
      <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:14.5,color:invert?'var(--white)':'var(--text-heading)'}}>{branch.rating}★ · {branch.name}</span>
      <span style={{font:'var(--type-data)',letterSpacing:'var(--ls-mono)',fontSize:11,color:invert?'var(--gold-400)':'var(--text-muted)'}}>{branch.reviews}</span>
    </span></a>;
}
function TrustBar(){
  return <div className="sp-row" style={{gap:12,justifyContent:'center'}}>
    {SP_BRANCHES.map(b=><RatingPill key={b.id} branch={b}/>)}
    <span className="sp-chip"><Icon name="clock" size={15} color="var(--teal-600)"/>{SP_CLINIC.hoursLine}</span>
  </div>;
}
function ReviewCard({r,showReply=true,compact}){
  const branch=(SP_BRANCHES.find(b=>b.id===(r.branch||'powai'))||{});
  const href=r.link||branch.google||SP_CLINIC.google;
  return <a className="sp-plain" href={href} target="_blank" rel="noopener" style={{display:'block',height:'100%'}}>
    <Card padding={compact?22:28} elevation="hairline" interactive style={{display:'flex',flexDirection:'column',gap:14,height:'100%'}}>
      <div className="sp-row" style={{gap:10,justifyContent:'space-between'}}>
        <div className="sp-row" style={{gap:8}}>
          <GoogleG size={16}/>
          <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15.5,color:'var(--text-heading)'}}>{r.name}</span>
          {r.verified&&<Badge tone="success" icon="badge-check">Verified</Badge>}
        </div>
        <span className="sp-data" style={{fontSize:11}}>{r.when}</span>
      </div>
      <div className="sp-row" style={{gap:2}}>{[0,1,2,3,4].map(i=><FilledStar key={i} size={15} color="var(--gold-500)"/>)}</div>
      <p className="sp-quote" style={{fontSize:compact?16:17.5}}>“{r.text}”</p>
      <span className="sp-data" style={{fontSize:11}}>Visited for {r.treatment}</span>
      {!compact&&r.happy&&<div className="sp-row" style={{gap:7}}>{r.happy.map(h=><span key={h} className="sp-chip" style={{fontSize:12.5,padding:'5px 11px'}}><Icon name="check" size={13} color="var(--green-600)"/>{h}</span>)}</div>}
      {showReply&&r.reply&&<div className="sp-reply"><span className="sp-eyebrow" style={{display:'block',color:'var(--gold-800)',marginBottom:6}}>Reply from {r.doctor==='rajendra'?'Dr. Rajendra Shah':'Dr. Alok Shah'}</span>{r.reply}</div>}
    </Card>
  </a>;
}

/* ---------- header / footer / CTAs ---------- */
function SPHead({active}){
  const [menu,setMenu]=React.useState(false);
  return <header className="sp-head">
    <div className="sp-head__in">
      <a href="index.html" aria-label="Smile Plus Dental Clinic — home" style={{display:'flex',alignItems:'center'}}><Logo height={38} src={LOGO_SRC}/></a>
      <nav className="sp-head__nav">
        {SP_NAV.map(([l,h])=><a key={l} href={h} className={active===l?'is-on':''}>{l}</a>)}
        <a className="sp-plain" href={'tel:'+SP_CONTACT.tel}><Button size="sm" variant="accent" icon="phone">Call</Button></a>
        <WaIconButton size="sm"/>
      </nav>
      <div className="sp-head__menu">
        <a className="sp-plain" href={'tel:'+SP_CONTACT.tel}><Button size="sm" variant="accent" icon="phone">Call</Button></a>
        <WaIconButton/>
        <IconButton icon={menu?'x':'menu'} label="Menu" variant="secondary" onClick={()=>setMenu(m=>!m)}/>
      </div>
    </div>
    {menu&&<nav className="sp-drawer">{SP_NAV.map(([l,h])=><a key={l} href={h} onClick={()=>setMenu(false)}>{l}</a>)}</nav>}
  </header>;
}
function BookDialog(){
  const [open,setOpen]=React.useState(false);
  React.useEffect(()=>{const f=()=>setOpen(true);window.addEventListener('sp-book',f);return()=>window.removeEventListener('sp-book',f);},[]);
  if(!open) return null;
  return <Dialog open width={560} title="Call or message us" description={'One number for both branches. '+SP_CLINIC.hoursLine+'.'} onClose={()=>setOpen(false)}
    footer={<Button variant="ghost" onClick={()=>setOpen(false)}>Close</Button>}>
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      <div className="sp-cta-row"><CallBtns size="md"/></div>
      {SP_BRANCHES.map(b=><div key={b.id} style={{border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-md)',padding:16,display:'flex',flexDirection:'column',gap:8}}>
        <div className="sp-row" style={{justifyContent:'space-between',gap:10}}>
          <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:16,color:'var(--text-heading)'}}>{b.name} branch</span>
          <span className="sp-data">{b.rating}★</span>
        </div>
        <span style={{fontSize:14.5,lineHeight:1.55,color:'var(--text-body)'}}>{b.address}</span>
      </div>)}
    </div>
  </Dialog>;
}
function CTABand({title='Call us and we will find you a slot.',lead}){
  return <section className="sp-decor sp-decor-lattice sp-decor-lattice--dark sp-decor-arcs sp-decor-arcs--dark sp-sec--compact" style={{background:'var(--wash-emerald)',borderTop:'1px solid var(--border-gold)',overflow:'hidden'}}>
    <div className="sp-wrap" style={{display:'flex',flexWrap:'wrap',gap:32,alignItems:'center',justifyContent:'space-between'}}>
      <div className="sp-stack" style={{gap:12,maxWidth:520}}>
        <span className="sp-eyebrow" style={{color:'var(--text-gold-on-dark)'}}>Appointments</span>
        <h2 className="sp-h2" style={{color:'var(--white)'}}>{title}</h2>
        <p className="sp-body" style={{color:'var(--ink-300)'}}>{lead||SP_CLINIC.hoursLine+'. One number for both the Powai and Chandivali branches.'}</p>
      </div>
      <div className="sp-cta-row">
        <a className="sp-plain" href={'tel:'+SP_CONTACT.tel}><Button size="lg" variant="accent" icon="phone">Call {SP_CONTACT.phone}</Button></a>
        <WaButton size="lg"/>
      </div>
    </div>
  </section>;
}
function SPFooter(){
  return <React.Fragment>
    <footer className="sp-decor sp-decor-lattice sp-decor-lattice--dark" style={{background:'var(--wash-emerald)',borderTop:'1px solid var(--border-gold)',padding:'clamp(44px,6vw,64px) 0 36px',overflow:'hidden'}}>
      <div className="sp-wrap" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(230px,1fr))',gap:40}}>
        <div className="sp-stack" style={{gap:16,alignItems:'flex-start'}}>
          <span style={{background:'var(--white)',borderRadius:'var(--radius-md)',padding:'10px 14px',border:'1px solid var(--border-gold-on-dark)'}}><Logo height={42} src={LOGO_SRC}/></span>
          <p style={{margin:0,fontSize:15,lineHeight:1.65,color:'var(--ink-300)',maxWidth:300}}>Multi-specialty dental and orthodontic care in Powai and Chandivali.</p>
          <Badge tone="accent" dot>Accepting new patients</Badge>        </div>
        <div className="sp-stack" style={{gap:10}}>
          <span className="sp-eyebrow" style={{color:'var(--text-gold-on-dark)'}}>Clinic hours</span>
          {SP_CLINIC.hours.map(([d,t],i)=><div key={i} style={{display:'flex',justifyContent:'space-between',gap:14,fontSize:14,color:'var(--ink-300)',borderBottom:'1px solid var(--border-gold-on-dark)',paddingBottom:8}}>
            <span>{d}</span><span style={{font:'var(--type-data)',letterSpacing:'var(--ls-mono)',color:'var(--white)'}}>{t}</span></div>)}
        </div>
        <div className="sp-stack" style={{gap:9}}>
          <span className="sp-eyebrow" style={{color:'var(--text-gold-on-dark)'}}>Treatments</span>
          {SP_SERVICES.map(s=><a key={s.id} href={s.href} style={{fontSize:14.5,color:'var(--ink-300)',textDecoration:'none'}}>{s.nav}</a>)}
        </div>
        <div className="sp-stack" style={{gap:9}}>
          <span className="sp-eyebrow" style={{color:'var(--text-gold-on-dark)'}}>Reach us</span>
          <a href={'tel:'+SP_CONTACT.tel} style={{display:'flex',gap:9,alignItems:'center',fontSize:15.5,color:'var(--white)',textDecoration:'none',fontWeight:600}}>
            <Icon name="phone" size={17} color="var(--teal-400)"/>{SP_CONTACT.phone}</a>
          <a href={SP_CONTACT.wa} target="_blank" rel="noopener" style={{display:'flex',gap:9,alignItems:'center',fontSize:15,color:'var(--ink-300)',textDecoration:'none'}}>
            <WaIcon size={16}/>WhatsApp us</a>
          <a href="contact.html" style={{display:'flex',gap:9,alignItems:'center',fontSize:15,color:'var(--ink-300)',textDecoration:'none'}}><Icon name="map-pin" size={16} color="var(--teal-400)"/>Powai &amp; Chandivali, Mumbai</a>
          <a href={SP_CLINIC.google} target="_blank" rel="noopener" style={{display:'flex',gap:9,alignItems:'center',fontSize:15,color:'var(--ink-300)',textDecoration:'none'}}><Icon name="star" size={16} color="var(--gold-400)"/>Google profile</a>
        </div>
      </div>
      <div className="sp-wrap" style={{marginTop:36,paddingTop:20,borderTop:'1px solid var(--border-gold-on-dark)',display:'flex',justifyContent:'space-between',flexWrap:'wrap',gap:12}}>
        <span className="sp-data" style={{color:'var(--gold-400)'}}>© Smile Plus Dental Clinic</span>
        <span className="sp-data" style={{color:'var(--gold-400)'}}>Dr. Alok Shah, M.D.S. · Dr. Rajendra Shah, B.D.S.</span>
      </div>
    </footer>
    <BookDialog/>
  </React.Fragment>;
}
function PageHero({eyebrow,title,lead,photo,alt,slot,slotNote,noImage,children}){
  return <section className="sp-decor sp-decor-mark sp-sec--compact" style={{background:'var(--wash-premium)',borderBottom:'1px solid var(--border-gold)',overflow:'hidden'}}>
    <div className={noImage?'sp-wrap':'sp-wrap sp-grid-2'} style={{alignItems:'center'}}>
      <div className="sp-stack" style={{gap:20,alignItems:noImage?'center':'flex-start',textAlign:noImage?'center':undefined,maxWidth:noImage?760:undefined,margin:noImage?'0 auto':undefined}}>
        <span className="sp-eyebrow" style={{color:'var(--text-gold)'}}>{eyebrow}</span>
        <span className="sp-hr-gold" style={{width:64,background:'linear-gradient(90deg,var(--gold-500),var(--gold-300))'}}/>
        <h1 className="sp-display" style={{fontSize:'clamp(30px,4.4vw,56px)'}}>{title}</h1>
        {lead&&<p className="sp-lead" style={{maxWidth:540}}>{lead}</p>}
        {children}
      </div>
      {!noImage&&(photo?<Para src={photo} alt={alt} ratio="4 / 3" gold radius="var(--radius-xl)"/>:<Slot title={slot||'Photography'} note={slotNote} ratio="4 / 3"/>)}
    </div>
  </section>;
}
Object.assign(window,{DS_ROOT,LOGO_SRC,openBook,CallBtns,WaButton,WaIconButton,WaIcon,Reveal,Para,Shot,Slot,Note,BA,Case,FAQ,GoogleG,RatingPill,TrustBar,ReviewCard,SPHead,SPFooter,CTABand,PageHero,BookDialog,
  Button,IconButton,Icon,Logo,Badge,Tag,Card,SectionHeading,StatBlock,ServiceCard,Dialog,Tabs});