// ─────────── Image constants ───────────
const IMG = {
  heroBg: 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1600&q=80&auto=format&fit=crop',
  heroCard: 'Clinic%20photos%20/IMG-20201213-WA0015.webp',
  ctaBg: 'https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=1600&q=80&auto=format&fit=crop',
  // Services
  invisalign: 'https://images.unsplash.com/photo-1606811841689-23dfddce3e95?w=800&q=80&auto=format&fit=crop',
  braces: 'https://images.unsplash.com/photo-1571772996211-2f02c9727629?w=800&q=80&auto=format&fit=crop',
  crowns: 'https://images.unsplash.com/photo-1607613009820-a29f7bb81c04?w=800&q=80&auto=format&fit=crop',
  implants: 'https://images.unsplash.com/photo-1609840114035-3c981b782dfe?w=800&q=80&auto=format&fit=crop',
  rct: 'https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=800&q=80&auto=format&fit=crop',
  whitening: 'https://images.unsplash.com/photo-1607613009820-a29f7bb81c04?w=800&q=80&auto=format&fit=crop',
  paediatric: 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&q=80&auto=format&fit=crop',
  xray: 'https://images.unsplash.com/photo-1606811841689-23dfddce3e95?w=800&q=80&auto=format&fit=crop',
  // Process — real clinic photos
  proc1: 'Clinic%20photos%20/_PS_3858.webp',
  proc2: 'Clinic%20photos%20/IMG-20201213-WA0015.webp',
  proc3: 'Clinic%20photos%20/_PS_3859.webp',
  // Avatars for trust row
  av1: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&q=80&auto=format&fit=crop',
  av2: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&q=80&auto=format&fit=crop',
  av3: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&q=80&auto=format&fit=crop',
  av4: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&q=80&auto=format&fit=crop'
};


// ─────────── Hero (full-bleed) ───────────
const Hero = () =>
<section id="home" className="hero-v2">
    <div className="hero-v2-bg">
      <img src={IMG.heroBg} alt="" loading="eager" />
    </div>

    <div className="wrap hero-v2-grid">
      <div className="hero-v2-left reveal in">
        <div className="hero-v2-trusted">
          <div className="hero-v2-avatars">
            <img src={IMG.av1} alt="" />
            <img src={IMG.av2} alt="" />
            <img src={IMG.av3} alt="" />
            <img src={IMG.av4} alt="" />
          </div>
          <span className="label"><b>Trusted by 5,000+ smiling patients</b><br />across Mulund &amp; Mumbai</span>
        </div>

        <h1>Specialist dentistry,<br /><i>delivered with care.</i></h1>
        <p className="hero-v2-sub">Mulund's only Orthodontist &amp; Prosthodontist couple — Dr. Abhijit &amp; Dr. Sonali Shanbhag.</p>
        <p className="hero-v2-lede">
          Invisalign, braces, implants, crowns and painless root canals — planned end-to-end before you sit down.
        </p>

        <div className="hero-v2-actions">
          <button className="btn-pill" onClick={() => scrollTo('book')}>
            Book Appointment
            <span className="arr"><Icon name="arrow" size={14} /></span>
          </button>
          <a href="https://wa.me/919321859061" target="_blank" rel="noopener noreferrer" className="hero-v2-secondary hero-v2-wa">
            <Icon name="whatsapp" size={16} />
            WhatsApp Us
          </a>
        </div>
      </div>

      <aside className="hero-v2-card reveal in reveal-delay-2">
        <div className="hero-v2-card-img"><img src={IMG.heroCard} alt="Expert dental care" /></div>
        <h3>One orthodontist. One prosthodontist.</h3>
        <p>Your full treatment, planned before you sit down. No referrals, no second opinions needed.</p>
        <div className="hero-v2-card-rating">
          <span className="stars">★ ★ ★ ★ ★</span>
          <span>4.9 · 200+ Google reviews</span>
        </div>
      </aside>
    </div>

    <div className="hero-v2-scroll-hint">Scroll to explore</div>
  </section>;


// ─────────── Services (hover-expand cards) ───────────
const SERVICES = [
{ num: '01', icon: 'smile', img: IMG.invisalign, name: 'Invisalign', desc: 'Clear, removable aligners. Almost invisible, designed in 3D before treatment begins.', meta: '6–18 months · Dr. Abhijit', variant: 'feature', badge: 'Most popular' },
{ num: '02', icon: 'tooth', img: IMG.braces, name: 'Braces', desc: 'Metal, ceramic, lingual & self-ligating.', meta: '12–24 months', variant: 'image' },
{ num: '03', icon: 'crown', img: IMG.crowns, name: 'Crowns & Veneers', desc: 'Zirconia, E-max, layered porcelain.', meta: '2 visits · Photo-mocked', variant: 'image' },
{ num: '04', icon: 'shield', img: IMG.implants, name: 'Dental Implants', desc: 'Single-tooth, full-arch and All-on-4. Bone graft and sinus lift handled in-house.', meta: 'Dr. Sonali · Prosthodontist', variant: 'dark wide' },
{ num: '05', icon: 'syringe', img: IMG.rct, name: 'Painless RCT', desc: 'Single-sitting root canal with rotary endodontics.', meta: 'Same-day', variant: 'cream' },
{ num: '06', icon: 'sparkle', img: IMG.whitening, name: 'Teeth Whitening', desc: 'In-chair laser plus take-home trays.', meta: 'Up to 8 shades', variant: 'image' },
{ num: '07', icon: 'kid', img: IMG.paediatric, name: 'Paediatric Care', desc: 'First visits, fluoride, fissure sealants.', meta: 'Ages 2–14', variant: 'gold' },
{ num: '08', icon: 'xray', img: IMG.xray, name: 'Diagnostics', desc: 'Digital OPG and intraoral imaging.', meta: 'Same-visit plan', variant: 'image' }];


const IMG_FALLBACK = 'https://images.unsplash.com/photo-1606811841689-23dfddce3e95?w=800&q=80&auto=format&fit=crop';
const onImgErr = (e) => {if (e.target.dataset.fallback !== '1') {e.target.dataset.fallback = '1';e.target.src = IMG_FALLBACK;}};

const ServiceTile = ({ s }) => {
  const isImage = s.variant.includes('image') || s.variant.includes('feature');
  const style = isImage ? { '--bg-img': `url(${s.img})` } : undefined;
  return (
    <div className={`svc-tile ${s.variant}`} style={style} onClick={() => scrollTo('book')}>
      <span className="svc-num">{s.num} / Service</span>
      <div className="svc-icn"><Icon name={s.icon} size={18} /></div>
      {s.badge && <span className="feature-badge">{s.badge}</span>}
      <h3>{s.name}</h3>
      <p>{s.desc}</p>
      <span className="svc-meta">{s.meta}</span>
      <div className="svc-arrow"><Icon name="arrow" size={14} /></div>
    </div>
  );
};


const ServicesSection = () =>
<section id="services" className="sec">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <p className="eyebrow"><span className="dot"></span>What we do</p>
          <h2 className="display">Two specialists.<br /><i>One full menu</i> of dentistry.</h2>
        </div>
        <p>Every chair-side decision is made by a specialist. Orthodontics by Dr. Abhijit, prosthodontics and restorative by Dr. Sonali. No generalists guessing on your enamel.</p>
      </div>

      <div className="svc-bento reveal reveal-delay-1">
        {SERVICES.map((s) => <ServiceTile key={s.num} s={s} />)}
      </div>

      <div className="svc-toolbar reveal reveal-delay-2">
        <div className="svc-pills">
          {['Cleaning', 'Bonding', 'Bridges', 'Extractions', 'Fillings', 'Mouth guards', 'Reshaping', 'Oral surgery', 'Emergency care'].map((t) =>
        <span key={t} className="svc-pill">{t}</span>
        )}
        </div>
        <Btn kind="ghost" onClick={() => scrollTo('book')}>Not sure? Free consult</Btn>
      </div>
    </div>
  </section>;


// ─────────── Treatment Process ───────────
const PROCESS = [
{ num: '001', img: IMG.proc1, title: 'Book Appointment', desc: 'Schedule your visit with our quick WhatsApp booking or the form below. Confirmation within minutes.' },
{ num: '002', img: IMG.proc2, title: 'Consultation Time', desc: 'Meet Dr. Abhijit or Dr. Sonali. Digital scans, X-rays if needed, and a written plan you take home.' },
{ num: '003', img: IMG.proc3, title: 'Treatment Care', desc: 'Begin treatment with modern equipment and a calm, sterile environment. Follow-ups built into the plan.', cta: true }];


const ProcessSection = () =>
<section id="process" className="process">
    <div className="wrap">
      <div className="process-head reveal">
        <div className="left">
          <p className="eyebrow"><span className="dot"></span>The Process</p>
        </div>
        <h2>Treatment <span>Process.</span></h2>
      </div>

      <div className="process-grid reveal reveal-delay-1">
        {PROCESS.map((p) =>
      <article key={p.num} className={`proc-card ${p.cta ? 'has-cta' : ''}`}>
            <div className="ph">
              <img src={p.img} alt={p.title} loading="lazy" onError={onImgErr} />
              <span className="num">{p.num}</span>
            </div>
            <h3>{p.num} . {p.title}</h3>
            <p>{p.desc}</p>
            {p.cta &&
        <a className="cta" onClick={() => scrollTo('treatments')}>
                See Treatments
                <span className="arr"><Icon name="arrow" size={12} /></span>
              </a>
        }
          </article>
      )}
      </div>
    </div>
  </section>;


// ─────────── CTA Strip ───────────
const CTAStrip = () =>
<section className="cta-strip">
    <div className="cta-strip-bg"><img src={IMG.ctaBg} alt="" loading="lazy" /></div>
    <div className="wrap">
      <div className="cta-strip-inner reveal">
        <div className="eyebrow-light">Your smile starts here</div>
        <h2>Ready to Achieve Your <i>Perfect Smile?</i></h2>
        <p>Book a free 20-minute consultation with the Shanbhags. Bring your worries, your X-rays, your questions. Leave with a plan.</p>
        <button className="btn-pill" onClick={() => scrollTo('book')}>
          Book Appointment
          <span className="arr"><Icon name="arrow" size={14} /></span>
        </button>
      </div>
    </div>
  </section>;


Object.assign(window, { Hero, ServicesSection, ProcessSection, CTAStrip, IMG });