/* v2 — All section components */

function TopBar() {
  return (
    <div className="topbar">
      <div className="container">
        <div className="row">
          <div className="left">
            <span className="badge"><span className="star">★</span> 5.0 on Google</span>
            <span className="item-2">Mon — Sat · 8AM – 9PM</span>
          </div>
          <div className="right">
            <a href="tel:9059037661"><Ico name="phone" size={13} /> +91 90590 37661</a>
            <a href="mailto:balajibestdentalc@gmail.com" className="item-2"><Ico name="mail" size={13} /> {CLINIC.email}</a>
            <a href={CLINIC.ig2} target="_blank" rel="noreferrer"><Ico name="instagram" size={13} /> Instagram</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function NavBar() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const links = [
    ['#about', 'About'],
    ['#services', 'Treatments'],
    ['#doctors', 'Doctors'],
    ['#smile', 'Smile Gallery'],
    ['#videos', 'Library'],
    ['#reviews', 'Reviews'],
    ['#locations', 'Locations'],
  ];
  const close = () => setMenuOpen(false);
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav__inner">
          <a href="#top" className="brand" onClick={close}>
            <span className="mark">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M12 3c-3 0-5 1-6 1s-2-1-3 1c-1 2 0 5 0 7s1 4 2 6 1 4 2 4 1.5-3 2-4.5S8 16 9 16s2 1.5 3 1.5 2-1.5 3-1.5 1 1 1.5 1.5S17 21 18 21s1-2 2-4 2-4 2-6-1-5-2-7-2-1-3-1-3-1-6-1z"/>
              </svg>
            </span>
            <span>Balaji's Best Dental<small>Infinity Implant Studio</small></span>
          </a>
          <div className="nav__links">
            {links.map(([h, l]) => <a key={h} href={h} className="nav__link">{l}</a>)}
          </div>
          <div className="nav__cta">
            <a href="tel:9059037661" className="btn btn--ghost"><Ico name="phone" size={14} /> Call</a>
            <a href="#book" className="btn btn--primary">Book <Ico name="arr" size={14} /></a>
          </div>
          <button className={`nav__hamburger ${menuOpen ? 'open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {menuOpen && (
        <div className="mobile-nav-overlay" onClick={close}>
          <div className="mobile-nav-drawer" onClick={e => e.stopPropagation()}>
            <div className="mobile-nav-head">
              <span className="mobile-nav-logo">Balaji's Best Dental</span>
              <button className="mobile-nav-close" onClick={close}>✕</button>
            </div>
            <nav className="mobile-nav-links">
              {links.map(([h, l]) => <a key={h} href={h} className="mobile-nav-link" onClick={close}>{l}</a>)}
            </nav>
            <div className="mobile-nav-actions">
              <a href="tel:9059037661" className="btn btn--ghost" style={{width:'100%',justifyContent:'center'}} onClick={close}>
                <Ico name="phone" size={16} /> Call +91 90590 37661
              </a>
              <a href="#book" className="btn btn--primary" style={{width:'100%',justifyContent:'center'}} onClick={close}>
                Book Appointment <Ico name="arr" size={16} />
              </a>
              <a href="https://wa.me/919059037661" target="_blank" rel="noreferrer" className="btn btn--wa" style={{width:'100%',justifyContent:'center',marginTop:4}} onClick={close}>
                <Ico name="wa" size={18} /> WhatsApp us
              </a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero__grid">
          <div>
            <R as="div" className="eyebrow"><span className="pulse"></span> Hyderabad · Suchitra & Chintal · Est. 2014</R>
            <R as="h1" className="hero__title" delay={120} style={{ marginTop: 24 }}>
              Advanced dental <em>care.</em><br/>
              Quietly <span className="underline">precise</span><br/>
              implants. <em>Daily.</em>
            </R>
            <R as="p" className="hero__lede" delay={250}>
              A multidisciplinary dental practice with master-trained implantologists, in-house CBCT &amp; OPG,
              conscious sedation and laser-assisted surgeries — all delivered under one calm, evidence-based roof.
            </R>
            <R as="div" className="hero__cta" delay={400}>
              <a href="#book" className="btn btn--primary btn--lg">Book your visit <Ico name="arr" size={15} /></a>
              <a href="#services" className="btn btn--ghost btn--lg">Explore treatments</a>
            </R>
            <R as="div" className="hero__bullets" delay={550}>
              <span><Ico name="check" size={16} /> 5.0 Google reviews</span>
              <span><Ico name="check" size={16} /> 17+ years of experience</span>
              <span><Ico name="check" size={16} /> Same-day implants</span>
            </R>
          </div>
          <R as="div" className="hero__media" variant="scale" delay={300}>
            <img src="assets/clinic/clinic-5.jpeg" alt="Implant surgery in progress at Balaji's Best Dental" className="hero__img" />
            <div className="live-card"><span className="dot"></span> 3 visits booked today</div>
            <div className="rating-card">
              <div className="num">5.0</div>
              <div className="stars">★★★★★</div>
              <div className="meta">300+ Google reviews</div>
            </div>
            <div className="book-card">
              <div className="avatars"><div>B</div><div>T</div><div>+8</div></div>
              <div>
                <h5>10+ specialists, one studio</h5>
                <p>Implants · Cosmetic · Pediatric · Endo · Ortho</p>
              </div>
            </div>
          </R>
        </div>
      </div>
    </section>
  );
}

function TagsStrip() {
  const items = ["Dental Implants", "Smile Design", "Clear Aligners", "Root Canal", "Laser Dentistry", "Pediatric Care", "Conscious Sedation", "CBCT · OPG", "Cosmetic Dentistry", "Full Arch Implants"];
  return (
    <div className="tags-strip">
      <div className="row">
        {[0,1].map((rep) => (
          <span key={rep} style={{ display: 'inline-flex', gap: 56, alignItems: 'center' }}>
            {items.map((it, i) => <span className="item" key={`${rep}-${i}`}><span className="star">✦</span> {it}</span>)}
          </span>
        ))}
      </div>
    </div>
  );
}

function TrustStats() {
  const stats = [
    { num: 12, suffix: "", lbl: "Years of practice", desc: "Established 2014, with two studios across Hyderabad." },
    { num: 8, suffix: "k+", lbl: "Patients cared for", desc: "Across general dentistry, implants, ortho and cosmetic." },
    { num: 10, suffix: "+", lbl: "In-house specialists", desc: "Endodontists, oral surgeons, pedodontists, orthodontists." },
    { num: 5.0, decimals: 1, lbl: "Google rating", desc: "Verified, unedited reviews from real patients." },
  ];
  return (
    <section className="trust" id="about">
      <div className="trust__inner">
        {stats.map((s, i) => (
          <R as="div" className="stat" key={i} delay={i * 80}>
            <div className="num"><CountUp to={s.num} suffix={s.suffix || ''} decimals={s.decimals || 0} />{!s.suffix && !s.decimals ? <em>+</em> : null}</div>
            <div className="lbl">{s.lbl}</div>
            <div className="desc">{s.desc}</div>
          </R>
        ))}
      </div>
    </section>
  );
}

function AboutSection() {
  return (
    <section className="section about-story" id="story">
      <div className="container">
        <div className="sec-h">
          <div>
            <R as="div" className="eyebrow"><span className="pulse"></span> Our Story</R>
            <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 18 }}>
              Built on trust, <em>since 2014.</em>
            </R>
          </div>
        </div>
        <div className="about-grid">
          <R as="div" className="about-card" delay={0}>
            <div className="about-card__icon">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
            </div>
            <h4>Our History</h4>
            <p>{CLINIC.history}</p>
          </R>
          <R as="div" className="about-card" delay={100}>
            <div className="about-card__icon">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>
              </svg>
            </div>
            <h4>Our Mission</h4>
            <p>{CLINIC.mission}</p>
          </R>
          <R as="div" className="about-card" delay={200}>
            <div className="about-card__icon">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="4"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5 19l2-2m10-10l2-2"/>
              </svg>
            </div>
            <h4>Our Vision</h4>
            <p>{CLINIC.vision}</p>
          </R>
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { ico: "tooth", num: "01", t: "Dental Implants", d: "Immediate-loading and full-arch systems planned with in-house CBCT for sub-millimetre precision.", href: "services/dental-implants.html" },
    { ico: "smile", num: "02", t: "Cosmetic & Smile Design", d: "Veneers, whitening and smile design — refined to your features, never overdone.", href: "services/cosmetic-dentistry.html" },
    { ico: "align", num: "03", t: "Clear Aligners", d: "Invisible orthodontics for adults and teens, monitored on a personal cadence.", href: "services/clear-aligners.html" },
    { ico: "shield", num: "04", t: "Root Canal Therapy", d: "Single-visit endodontics performed by consultant specialists with magnification.", href: "services/root-canal.html" },
    { ico: "laser", num: "05", t: "Laser Dentistry", d: "Soft-tissue laser surgeries — minimally invasive, near-bloodless, faster healing.", href: "services/laser-dentistry.html" },
    { ico: "sparkle", num: "06", t: "Pediatric Dentistry", d: "Gentle, conscious-sedation supported care for our youngest patients.", href: "services/pediatric-dentistry.html" },
    { ico: "moon", num: "07", t: "Conscious Sedation", d: "For anxious patients and complex procedures — supervised throughout.", href: "services/conscious-sedation.html" },
    { ico: "scan", num: "08", t: "CBCT & OPG Imaging", d: "Advanced 3D diagnostic scanning, in-house. No referral, no waiting.", href: "services/cbct-opg-imaging.html" },
  ];
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="sec-h">
          <div>
            <R as="div" className="eyebrow"><span className="pulse"></span> Treatments</R>
            <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 18 }}>
              Comprehensive care, <em>under one roof.</em>
            </R>
          </div>
          <R as="p" className="sec-h__sub" delay={200}>
            From routine hygiene to full-arch implant rehabilitation — every treatment is delivered by a specialist
            who has trained for years in that exact discipline.
          </R>
        </div>
        <div className="svc-grid">
          {items.map((s, i) => (
            <R as="div" className="svc" key={s.num} delay={i * 50}>
              <div className="svc__num">{s.num}</div>
              <div className="svc__icon"><Ico name={s.ico} size={26} /></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <a href={s.href} className="more">Learn more <Ico name="arr" size={14} /></a>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  const reasons = [
    { ico: "shield", t: "Sterilization & ethics", d: "Hospital-grade sterilization protocols, audited and visible to every patient." },
    { ico: "scan", t: "In-house CBCT & OPG", d: "Accurate 3D diagnostics on-site — no referrals, no waiting, no compromise." },
    { ico: "tooth", t: "Master-trained implantology", d: "Dr. Balaji Gupta is a master in immediate-loading implants — 17+ years." },
    { ico: "moon", t: "Conscious sedation unit", d: "Anxiety, dental phobia and complex cases handled gently and safely." },
    { ico: "sparkle", t: "Multidisciplinary team", d: "Endo, ortho, surgery, pedo — every speciality available under one roof." },
  ];
  return (
    <section className="section why">
      <div className="container">
        <div className="why__grid">
          <R as="div" className="why__media">
            <div className="badge"><div className="ico"><Ico name="check" size={14} /></div> Hospital-grade sterilization</div>
            <img src="assets/clinic/clinic-2.jpeg" alt="Treatment room at Balaji's Best Dental, Suchitra" className="why__img" />
            <div className="stat-pill">
              <div className="num">17<span style={{ fontSize: '0.6em' }}>+</span></div>
              <div className="lbl">Years experience</div>
            </div>
          </R>
          <div>
            <R as="div" className="eyebrow"><span className="pulse"></span> Why Balaji's Best Dental</R>
            <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 18, marginBottom: 32 }}>
              The <em>quiet</em> standards <br/>that define our care.
            </R>
            <div className="reasons">
              {reasons.map((r, i) => (
                <R as="div" className="reason" key={r.t} delay={i * 70}>
                  <div className="reason__icon"><Ico name={r.ico} size={24} /></div>
                  <div>
                    <h4>{r.t}</h4>
                    <p>{r.d}</p>
                  </div>
                  <div className="arr"><Ico name="arr" size={14} /></div>
                </R>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Doctors() {
  return (
    <section className="section" id="doctors" style={{ background: 'var(--white)' }}>
      <div className="container">
        <div className="sec-h">
          <div>
            <R as="div" className="eyebrow"><span className="pulse"></span> The team</R>
            <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 18 }}>
              Specialists, <em>not generalists.</em>
            </R>
          </div>
          <R as="p" className="sec-h__sub" delay={200}>
            Two founding doctors, eight consulting specialists and three dental surgeons — every one chosen
            for the depth of their training in a single field.
          </R>
        </div>
        <div className="docs">
          {DOCTORS.map((d, i) => (
            <R as="div" className="doc" key={d.name} delay={i * 100}>
              <div className="doc__photo">
                <img
                  src={i === 0 ? 'assets/clinic/clinic-1.jpeg' : 'assets/clinic/clinic-6.jpeg'}
                  alt={d.name}
                  className="doc__img"
                />
                <div className="yrs"><strong>{d.yrs}+</strong> years</div>
              </div>
              <div className="doc__body">
                <div className="role">{d.role}</div>
                <h3>{d.name}</h3>
                <div className="creds">
                  <span>{d.creds.split(' · ')[0]}</span>
                  <span>{d.creds.split(' · ')[1]}</span>
                </div>
                <p className="bio">{d.bio}</p>
                <div className="specs">{d.specs.map((s) => <span key={s}>{s}</span>)}</div>
                <div className="actions">
                  <a href="#book" className="btn btn--primary">Book with {d.name.split(' ')[1]} <Ico name="arr" size={14} /></a>
                </div>
              </div>
            </R>
          ))}
        </div>

        <R as="h3" className="h3" delay={150} style={{ marginTop: 64, marginBottom: 8 }}>
          Visiting <em style={{ color: 'var(--teal)', fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400 }}>consultants.</em>
        </R>
        <R as="p" className="lede" delay={200} style={{ maxWidth: 540, marginBottom: 24 }}>
          Specialists who lend their decades of practice to our patients.
        </R>
        <div className="doc-strip">
          {CONSULTANTS.map((c, i) => (
            <R as="div" className="doc-mini" key={c.name} delay={i * 50}>
              <div className="doc-mini__avatar">{c.name.split(' ')[1]?.[0] || c.name[0]}</div>
              <div>
                <h5>{c.name}</h5>
                <div className="role">{c.role}</div>
              </div>
            </R>
          ))}
        </div>

        <R as="h3" className="h3" delay={150} style={{ marginTop: 64, marginBottom: 8 }}>
          Credentials &amp; <em style={{ color: 'var(--teal)', fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400 }}>certifications.</em>
        </R>
        <R as="p" className="lede" delay={200} style={{ maxWidth: 540, marginBottom: 28 }}>
          International and national certifications held by our founding doctors.
        </R>
        <div className="certs-strip">
          {['cert-1','cert-2','cert-3','cert-4','cert-5','cert-6'].map((c, i) => (
            <R as="div" className="cert-card" key={c} delay={i * 60}>
              <img src={`assets/certifications/${c}.jpeg`} alt={`Certificate ${i + 1}`} />
            </R>
          ))}
        </div>

        <R as="div" className="team-photo" delay={100} style={{ marginTop: 56 }}>
          <img src="assets/clinic/clinic-8.jpeg" alt="Balaji's Best Dental team" />
          <div className="team-photo__cap">Our team · Suchitra Studio</div>
        </R>
      </div>
    </section>
  );
}

function SmileGallery() {
  const cases = [
    { lbl: "Implant Procedure", img: "assets/clinic/clinic-1.jpeg" },
    { lbl: "Intraoral Scanning", img: "assets/clinic/clinic-4.jpeg" },
    { lbl: "Pediatric Outreach", img: "assets/clinic/clinic-3.jpeg" },
    { lbl: "Surgical Suite", img: "assets/clinic/clinic-6.jpeg" },
  ];
  return (
    <section className="section smile" id="smile">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> Smile gallery</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Real patients. <em>Real results.</em>
          </R>
          <R as="p" className="sec-h__sub" delay={200}>
            Drag the slider to see the difference — every result you see is from our own patients,
            with their consent.
          </R>
        </div>

        <R as="div" className="smile__main" delay={150}>
          <BeforeAfter
            before={<div className="bg-fill gradient-2"><div className="ph-label">Before · Patient consent on file</div></div>}
            after={<div className="bg-fill gradient-1"><div className="ph-label">After · Implant + crown · 3 weeks</div></div>}
          />
          <div className="smile__copy">
            <h3>From hesitation to <em>confidence,</em> in three visits.</h3>
            <p>
              A 52-year-old patient missing two front teeth. Implant placement, immediate temporary, final crown
              at three weeks. Filmed and consented for our patient stories archive.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href="#videos" className="btn btn--gold" style={{ flex: '1 1 auto', justifyContent: 'center' }}>Watch the journey <Ico name="play" size={13} /></a>
              <a href="#book" className="btn btn--ghost" style={{ flex: '1 1 auto', justifyContent: 'center', background: 'transparent', borderColor: 'rgba(255,255,255,0.3)', color: 'var(--white)' }}>Talk to a specialist</a>
            </div>
          </div>
        </R>

        <div className="case-strip">
          {cases.map((c, i) => (
            <R as="div" className="case" key={c.lbl} delay={i * 60}>
              <img src={c.img} alt={c.lbl} className="case__img" />
              <span className="lbl">{c.lbl}</span>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function Journey() {
  const steps = [
    { n: "01", t: "Book online", d: "Pick a branch, treatment and time. We confirm by phone within an hour." },
    { n: "02", t: "Consultation", d: "An unhurried first visit. CBCT or OPG only when truly required." },
    { n: "03", t: "Treatment plan", d: "Plain-language plan, timeline and honest cost — never a surprise." },
    { n: "04", t: "Care that lasts", d: "Performed by the right specialist. Followed up gently. Always." },
  ];
  return (
    <section className="section journey">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> The patient journey</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Four steps, <em>nothing rushed.</em>
          </R>
        </div>
        <div className="journey__steps">
          {steps.map((s, i) => (
            <R as="div" className="jstep" key={s.n} delay={i * 100}>
              <div className="jstep__num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function VideosSec() {
  const [selected, setSelected] = useState(null);
  const allVideos = [VIDEOS_FEATURED, ...VIDEOS];

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setSelected(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <section className="section videos-sec" id="videos">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> Educational Videos</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Learn from <em>Dr. Balaji Gupta.</em>
          </R>
          <R as="p" className="sec-h__sub" delay={200}>
            16 films on implants, cosmetics, aligners, pediatric care and more — made for patients who want to understand before they decide.
          </R>
        </div>
      </div>

      <div className="vscroll-outer">
        <div className="vscroll">
          {allVideos.map((v, i) => (
            <R as="div" key={i} className="vcard" delay={i * 30} onClick={() => setSelected(v)}>
              <img
                src={`https://drive.google.com/thumbnail?id=${v.driveId}&sz=w480`}
                alt=""
                className="vcard__thumb"
                onError={(e) => { e.currentTarget.src = 'assets/clinic/clinic-5.jpeg'; }}
              />
              <div className="vcard__overlay">
                <div className="vcard__play-btn"><Ico name="play" size={20} /></div>
              </div>
              {i === 0 && <span className="vcard__badge">Patient Story</span>}
            </R>
          ))}
        </div>
      </div>

      {selected && (
        <div className="vmodal" onClick={() => setSelected(null)}>
          <div className="vmodal__box" onClick={(e) => e.stopPropagation()}>
            <button className="vmodal__close" onClick={() => setSelected(null)}>✕</button>
            <iframe
              src={`https://drive.google.com/file/d/${selected.driveId}/preview`}
              className="vmodal__iframe"
              allow="autoplay"
              allowFullScreen
              title="Video"
            />
          </div>
        </div>
      )}
    </section>
  );
}

function ReviewsSec() {
  return (
    <section className="section reviews-sec" id="reviews">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> Patient voices</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Trust, <em>earned</em> one smile at a time.
          </R>
          <R as="div" className="r-rating" delay={200}>
            <span className="num">5.0</span>
            <span className="stars">★★★★★</span>
            <span className="meta">300+ verified reviews</span>
            <span className="g">G</span>
          </R>
        </div>
        <div className="r-grid">
          {REVIEWS.map((r, i) => (
            <R as="div" className="r-card" key={r.name} delay={i * 100}>
              <div className="quote-icon">"</div>
              <span className="stars">★★★★★</span>
              <h4>{r.title}</h4>
              <p>{r.body}</p>
              <div className="who">
                <div className="av">{r.initial}</div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="badge"><span className="g">G</span> {r.badge} · {r.when}</div>
                </div>
              </div>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function Locations() {
  return (
    <section className="section loc-sec" id="locations">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> Visit us</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Two studios, <em>same care.</em>
          </R>
          <R as="p" className="sec-h__sub" delay={200}>
            Whichever branch is closer — both share the same team, equipment and clinical standards.
          </R>
        </div>
        <div className="loc-grid">
          {CLINIC.branches.map((b, i) => (
            <R as="div" className="loc-card" key={b.key} delay={i * 120}>
              <div className="loc-card__map">
                <iframe
                  src={b.embed}
                  title={`${b.city} branch map`}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  allowFullScreen
                />
                <span className="loc-card__badge">{b.label}</span>
              </div>
              <div className="loc-card__body">
                <h3>{b.city} <em>Branch</em></h3>
                <p className="loc-card__addr">
                  <Ico name="pin" size={15} /> {b.addr}
                </p>
                <div className="loc-card__hours">
                  <div><Ico name="clock" size={14} /><span>Mon – Sat</span><strong>8:00 AM – 9:00 PM</strong></div>
                  <div><Ico name="clock" size={14} /><span>Sundays</span><strong>10:00 AM – 1:00 PM</strong></div>
                </div>
                <div className="loc-card__actions">
                  <a href={b.maps} target="_blank" rel="noreferrer" className="btn btn--primary">
                    <Ico name="pin" size={14} /> Get directions
                  </a>
                  <a href={`tel:${CLINIC.phoneRaw}`} className="btn btn--ghost">
                    <Ico name="phone" size={14} /> Call us
                  </a>
                  <a href={`https://wa.me/919059037661?text=${encodeURIComponent(`Hi, I'd like to book an appointment at your ${b.city} branch.`)}`} target="_blank" rel="noreferrer" className="btn btn--ghost">
                    <Ico name="wa" size={14} /> WhatsApp
                  </a>
                </div>
              </div>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "Do I need a referral for a CBCT or OPG scan?", a: "No. We have CBCT and OPG imaging in-house. Walk in, scan, and go — no external referrals required." },
    { q: "Are immediate-loading implants safe?", a: "Yes, when performed correctly. Dr. Balaji Gupta is a master in immediate-loading implants and has done thousands of these procedures over 17 years. We only recommend it when your bone and gum health support it." },
    { q: "I have severe dental anxiety. Can you help?", a: "Absolutely. We have a dedicated conscious sedation unit. You will be relaxed, responsive and comfortable throughout — supervised by our sedationist." },
    { q: "Do you treat children?", a: "Yes. We have two consultant pedodontists and our founder Dr. Balaji is also a trained pedodontist. Our pediatric suite is designed to feel calm and unintimidating." },
    { q: "How long do dental implants last?", a: "With good oral hygiene and routine check-ups, modern dental implants are designed to last 20+ years. Many of our 2014 cases are still going strong today." },
    { q: "What insurance / payment options do you accept?", a: "We accept all major debit/credit cards, UPI, and bank transfers. We also offer flexible payment plans for major treatments — please ask at your consultation." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq-sec">
      <div className="container">
        <div className="sec-h sec-h--center">
          <R as="div" className="eyebrow"><span className="pulse"></span> Common questions</R>
          <R as="h2" className="sec-h__title" delay={100} style={{ marginTop: 12 }}>
            Honest answers, <em>plainly put.</em>
          </R>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <R as="div" className={`faq-item ${open === i ? 'open' : ''}`} key={i} delay={i * 50}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="body"><p>{it.a}</p></div>
            </R>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABand() {
  const [form, setForm] = useState({ name: '', phone: '', branch: '', treatment: '', date: '', note: '' });
  const [submitted, setSubmitted] = useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const { name, phone, branch, treatment, date, note } = form;
    if (!name || !phone || !branch || !treatment) return;
    const msg = [
      `🦷 *New Appointment Request*`,
      ``,
      `👤 *Name:* ${name}`,
      `📞 *Phone:* ${phone}`,
      `🏥 *Branch:* ${branch}`,
      `💊 *Treatment:* ${treatment}`,
      date ? `📅 *Preferred Date:* ${date}` : null,
      note ? `📝 *Note:* ${note}` : null,
    ].filter(Boolean).join('\n');
    window.open(`https://wa.me/919059037661?text=${encodeURIComponent(msg)}`, '_blank');
    setSubmitted(true);
  };

  return (
    <section className="section cta-band" id="book">
      <div className="container">
        <div className="book-grid">

          <div className="book-left">
            <R as="div" className="eyebrow" style={{ background: 'rgba(255,255,255,0.08)', color: 'var(--gold-soft)' }}>
              <span className="pulse"></span> Book your visit
            </R>
            <R as="h2" delay={100} style={{ marginTop: 16 }}>
              Begin with a <em>conversation.</em>
            </R>
            <R as="p" delay={200} style={{ marginTop: 16, opacity: 0.8, lineHeight: 1.75 }}>
              A first visit is unhurried — we listen, examine, and explain. No obligation, no pressure. Just honest care.
            </R>
            <div className="book-info">
              <div className="book-info__row"><Ico name="phone" size={16} /><span>{CLINIC.phone}</span></div>
              <div className="book-info__row"><Ico name="mail" size={16} /><span>{CLINIC.email}</span></div>
              <div className="book-info__row"><Ico name="clock" size={16} /><span>Mon–Sat 8AM–9PM · Sun 10AM–1PM</span></div>
              <div className="book-info__row"><Ico name="pin" size={16} /><span>Suchitra &amp; Chintal, Hyderabad</span></div>
            </div>
            <div className="book-direct">
              <a href={`tel:${CLINIC.phoneRaw}`} className="btn btn--gold">
                <Ico name="phone" size={14} /> Call now
              </a>
              <a href="https://wa.me/919059037661" target="_blank" rel="noreferrer" className="btn btn--ghost-light">
                <Ico name="wa" size={14} /> WhatsApp
              </a>
            </div>
          </div>

          <R as="div" className="book-form-wrap" delay={150}>
            {submitted ? (
              <div className="book-success">
                <div className="book-success__icon"><Ico name="check" size={32} /></div>
                <h3>Request sent!</h3>
                <p>WhatsApp is opening with your details. We'll confirm your appointment shortly.</p>
                <button className="btn btn--gold" style={{ marginTop: 24 }} onClick={() => setSubmitted(false)}>
                  Book another
                </button>
              </div>
            ) : (
              <form className="book-form" onSubmit={handleSubmit} noValidate>
                <h3 className="book-form__title">Appointment details</h3>

                <div className="bf-row">
                  <div className="bf-field">
                    <label>Full name *</label>
                    <input type="text" placeholder="Your name" value={form.name} onChange={set('name')} required />
                  </div>
                  <div className="bf-field">
                    <label>Phone number *</label>
                    <input type="tel" placeholder="+91 98765 43210" value={form.phone} onChange={set('phone')} required />
                  </div>
                </div>

                <div className="bf-row">
                  <div className="bf-field">
                    <label>Branch *</label>
                    <select value={form.branch} onChange={set('branch')} required>
                      <option value="">Select branch</option>
                      <option>Suchitra (Flagship)</option>
                      <option>Chintal</option>
                    </select>
                  </div>
                  <div className="bf-field">
                    <label>Treatment needed *</label>
                    <select value={form.treatment} onChange={set('treatment')} required>
                      <option value="">Select treatment</option>
                      {SERVICES.map((s) => <option key={s.num}>{s.name}</option>)}
                      <option>General Checkup</option>
                      <option>Not sure — need consultation</option>
                    </select>
                  </div>
                </div>

                <div className="bf-row">
                  <div className="bf-field">
                    <label>Preferred date</label>
                    <input type="date" value={form.date} onChange={set('date')} min={new Date().toISOString().split('T')[0]} />
                  </div>
                  <div className="bf-field">
                    <label>Any notes?</label>
                    <input type="text" placeholder="e.g. anxious patient, child visit…" value={form.note} onChange={set('note')} />
                  </div>
                </div>

                <button type="submit" className="btn btn--wa btn--lg" style={{ width: '100%', marginTop: 8 }}>
                  <Ico name="wa" size={18} /> Send via WhatsApp
                </button>
                <p className="bf-note">Opens WhatsApp with your details pre-filled. We'll confirm within the hour.</p>
              </form>
            )}
          </R>
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot__grid">
          <div>
            <div className="foot__brand">Balaji's Best Dental<small>Infinity Implant Studio · Est. 2014</small></div>
            <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.7, maxWidth: 360 }}>
              An Infinity Implant Studio in Hyderabad, dedicated to evidence-based, ethical and patient-centred
              dentistry since 2014.
            </p>
            <div className="foot__social">
              <a href={CLINIC.ig1} target="_blank" rel="noreferrer"><Ico name="instagram" size={16} /></a>
              <a href={`https://wa.me/919059037661`} target="_blank" rel="noreferrer"><Ico name="wa" size={16} /></a>
              <a href={`tel:${CLINIC.phoneRaw}`}><Ico name="phone" size={16} /></a>
              <a href={`mailto:${CLINIC.email}`}><Ico name="mail" size={16} /></a>
            </div>
          </div>
          <div className="foot__col">
            <h4>Treatments</h4>
            <ul>
              <li><a href="services/dental-implants.html">Dental Implants</a></li>
              <li><a href="services/cosmetic-dentistry.html">Cosmetic Dentistry</a></li>
              <li><a href="services/clear-aligners.html">Clear Aligners</a></li>
              <li><a href="services/root-canal.html">Root Canal</a></li>
              <li><a href="services/laser-dentistry.html">Laser Dentistry</a></li>
              <li><a href="services/pediatric-dentistry.html">Pediatric Care</a></li>
              <li><a href="services/conscious-sedation.html">Conscious Sedation</a></li>
              <li><a href="services/cbct-opg-imaging.html">CBCT & OPG Imaging</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#about">About us</a></li>
              <li><a href="#doctors">Doctors</a></li>
              <li><a href="#smile">Smile gallery</a></li>
              <li><a href="#videos">Educational library</a></li>
              <li><a href="#reviews">Reviews</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <h4>Reach us</h4>
            <ul>
              <li><a href="suchitra.html" style={{color:'inherit',textDecoration:'none'}}>Suchitra — Flagship →</a></li>
              <li><a href="chintal.html" style={{color:'inherit',textDecoration:'none'}}>Chintal — Second Branch →</a></li>
              <li style={{ marginTop: 10, color: 'var(--gold-soft)' }}>{CLINIC.phone}</li>
              <li>{CLINIC.email}</li>
              <li style={{ marginTop: 10 }}>Mon–Sat · 8AM – 9PM</li>
              <li>Sun · 10AM – 1PM</li>
            </ul>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© {new Date().getFullYear()} Balaji's Best Dental Infinity Implant Studio · Hyderabad</span>
          <span>Performed under registered dental council guidelines</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingCTAs() {
  return (
    <div className="float-actions">
      <a href={`https://wa.me/919059037661`} target="_blank" rel="noreferrer" className="wa">
        <Ico name="wa" size={26} />
        <span className="label-pop">Chat on WhatsApp</span>
      </a>
      <a href={`tel:${CLINIC.phoneRaw}`} className="call">
        <Ico name="phone" size={22} />
        <span className="label-pop">Call us now</span>
      </a>
    </div>
  );
}

function StickyBook() {
  return (
    <div className="sticky-book">
      <div>
        <div style={{ fontWeight: 700, fontSize: '0.95rem', color: 'var(--ink)' }}>Ready to smile?</div>
        <div style={{ fontSize: '0.78rem', color: 'var(--ink-3)' }}>Book a free consultation</div>
      </div>
      <div style={{ display: 'flex', gap: 10 }}>
        <a href="tel:9059037661" className="btn btn--ghost" style={{ padding: '10px 16px', fontSize: '0.85rem' }}>
          <Ico name="phone" size={14} /> Call
        </a>
        <a href="#book" className="btn btn--primary" style={{ padding: '10px 18px', fontSize: '0.85rem' }}>
          Book Now <Ico name="arr" size={14} />
        </a>
      </div>
    </div>
  );
}

Object.assign(window, {
  TopBar, NavBar, Hero, TagsStrip, TrustStats, AboutSection, Services, WhyUs, Doctors,
  SmileGallery, Journey, VideosSec, ReviewsSec, Locations, FAQ, CTABand, Foot, FloatingCTAs, StickyBook,
});