/* Puneet Dental Clinic — Home page app (depends on common.jsx + icons.jsx + treatments-data.js) */
const { useState, useEffect } = React;
const { Nav, Footer, MobileBar, Lightbox, Contact, smoothScroll } = window;

/* ----------- Data ----------- */
/* Service catalog — links to treatment pages.
   Title + description shown on the home grid; slug maps to /treatments/{slug}.html */
const SERVICES = [
  { ic: 'Implant', slug: 'dental-implants', t: 'Dental Implants', d: 'Permanent replacement for missing teeth — natural look, natural chew.' },
  { ic: 'Sparkle', slug: 'smile-makeover', t: 'Smile Makeover', d: 'A complete plan combining whitening, veneers and shaping for a confident smile.' },
  { ic: 'Drop', slug: 'root-canal-treatment', t: 'Root Canal Treatment', d: 'Save a damaged tooth with gentle, modern endodontic care.' },
  { ic: 'Tooth', slug: 'crowns-and-bridges', t: 'Crowns & Bridges', d: 'Restore broken or missing teeth with durable, lifelike ceramic work.' },
  { ic: 'Brush', slug: 'teeth-cleaning', t: 'Teeth Cleaning', d: 'Scaling and polishing to remove tartar and keep gums healthy.' },
  { ic: 'Smile', slug: 'teeth-whitening', t: 'Teeth Whitening', d: 'Safe, in-clinic whitening to lift years of stains in a single sitting.' },
  { ic: 'Sparkle', slug: 'laminates-and-veneers', t: 'Laminates & Veneers', d: 'Ultra-thin porcelain shells that close gaps, mask stains and reshape teeth.' },
  { ic: 'Tooth', slug: 'dentures', t: 'Dentures', d: 'Comfortable, well-fitted partial and full dentures, custom-made for you.' },
  { ic: 'Heart', slug: 'gum-treatment-laser', t: 'Gum Treatment (Laser)', d: 'Laser-assisted therapy for bleeding, swollen or receding gums.' },
  { ic: 'Tool', slug: 'wisdom-tooth-extraction', t: 'Wisdom Tooth Extraction', d: 'Careful surgical removal with minimum discomfort and faster healing.' },
  { ic: 'Sparkle', slug: 'smile-design-surgery', t: 'Smile Design Surgery', d: 'Precision contouring and aesthetic surgery for an even, balanced smile.' },
  { ic: 'Award', slug: 'braces-and-aligners', t: 'Braces & Aligners', d: 'Traditional braces and clear aligners for all ages.' },
  { ic: 'Child', slug: 'pediatric-dentistry', t: 'Pediatric Dentistry', d: 'Gentle, patient care for children — first visit to teen years.' },
  { ic: 'Tool', slug: 'tooth-extraction', t: 'Tooth Extraction', d: 'Safe, quick removal when a tooth cannot be saved.' },
  { ic: 'Shield', slug: 'full-mouth-rehab', t: 'Full Mouth Rehab', d: 'Comprehensive treatment planning to rebuild a complete, healthy bite.' },
];

const IMPLANT_STEPS = [
  { t: 'Consultation & 3D imaging', d: 'Detailed examination with digital X-ray and CBCT planning to map your bone and bite.' },
  { t: 'Treatment plan & costing', d: 'A clear written plan — timeline, sittings, and transparent cost — before anything begins.' },
  { t: 'Implant placement', d: 'A short, comfortable surgical sitting under local anesthesia in a sterile setup.' },
  { t: 'Healing & integration', d: 'A few weeks for the implant to fuse naturally with your jawbone.' },
  { t: 'Final crown fitting', d: 'A custom ceramic tooth fitted, shade-matched and polished to look indistinguishable.' },
];

const REVIEWS = [
  { stars: 5, body: "I've been consulting Dr. Puneet Mehrotra for my dental treatments and checkups for the last 3 years. He always gives an honest opinion about what's required, and I'm extremely satisfied with the accuracy of his diagnosis and procedures. He also has the ability to put the patient at ease. I would definitely not hesitate to refer him to family and friends.", n: 'Nilesh Kothari', meta: 'Long-term patient', av: 'N' },
  { stars: 5, body: 'I am a dentist myself, and I have complete trust in Dr. Puneet Mehrotra for my dental treatment. My whole family goes to him for our dental care — he is excellent, beyond doubt.', n: 'Menka Vij Chandiramani', meta: 'Fellow dentist', av: 'M' },
  { stars: 5, body: "I am thankful to Dr. Puneet for giving my smile back. Being in the film industry, all my teeth needed to be right — he replaced all of them with implants and gave me a completely natural smile. Thanks and lots of love and luck to him.", n: 'Shammie', meta: 'Full mouth implants', av: 'S' },
  { stars: 5, body: 'As an Australian visiting India, I came to Dr. Puneet Mehrotra with a lot of dental issues. He explained the treatment patiently and cleared all my doubts. My fear of dental treatment has vanished — his hand is so good I took my treatment without any pain, and it was affordable too.', n: 'Cathrine', meta: 'International patient', av: 'C' },
  { stars: 5, body: "I came to know about Puneet Dental Clinic & Implant Centre via Google and took an appointment for implants. My case was difficult — low bone density, as told by my dentist in Singapore — but Dr. Puneet managed it very well. It's been 5 years and my implants are still perfectly fine.", n: 'Mehtew', meta: 'Dental implants, Singapore', av: 'M' },
  { stars: 5, body: 'Dr. Puneet is patient, understanding, steady and excellent at his work. I consulted him for an impacted wisdom tooth and braces. He studied my case thoroughly and suggested the best long-term options, without unnecessary maintenance. Highly recommend him for a pain-free, perfect smile.', n: 'Aporva Singh', meta: 'Wisdom tooth & braces', av: 'A' },
  { stars: 5, body: 'I live in the UAE and visited India for a teeth problem. Dr. Puneet treated me well and completed all the work within a week — no pain. Thanks a lot.', n: 'Obaid', meta: 'International patient', av: 'O' },
  { stars: 5, body: 'I live in San Francisco and had seen 2 clinics and 3 specialists there for my TMJ pain — 4 years of it, with tests and treatments that never held. A relative told me about Dr. Puneet Mehrotra on a visit to India. He understood the problem in the first visit; within a month I was pain-free and could chew properly again, and it has not come back in 2 years.', n: 'Khyati Patel', meta: 'TMJ treatment, San Francisco', av: 'K' },
  { stars: 5, body: 'I had a root canal and capping on my front teeth in 2007, and both stayed shaky for years despite a specialist surgery. In 2011 I was referred to Dr. Puneet Mehrotra, who advised a repeat root canal on both teeth. Within a week I saw improvement, and both teeth are still firm today. Thank you for saving my teeth.', n: 'Amrita Pandey', meta: 'Root canal retreatment', av: 'A' },
  { stars: 5, body: 'My previous root canal was very painful and took a week. So when Dr. Puneet told me I needed one on my molar, I was terrified — but he assured me it would be painless and done in one sitting. It took half an hour, exactly as promised. I do not fear dental treatment anymore.', n: 'Ashok Ahuja', meta: 'Root canal treatment', av: 'A' },
  { stars: 5, body: 'My previous dentist told me my wisdom tooth surgery would mean a swollen, painful week. Dr. Puneet removed it in 10 minutes — no pain, no swelling. I was back at work the very next day. I will surely recommend him to friends and relatives.', n: 'Shonali Sen', meta: 'Wisdom tooth extraction', av: 'S' },
  { stars: 5, body: 'I am thankful to Dr. Puneet Mehrotra for taking care of my teeth. All the best, Doctor.', n: 'Abu Jani', meta: 'Patient', av: 'A' },
];

const FAQS = [
  { q: 'Do dental implants hurt?', a: 'Implant placement is done under local anesthesia, so you do not feel pain during the procedure. Most patients describe mild soreness for a day or two afterwards, easily managed with the prescribed medication.' },
  { q: 'How long does an implant treatment take?', a: 'A single implant from start to final crown typically takes 3 to 5 months. For some cases an immediate temporary tooth can be placed on the same day. We share your personalised timeline after the CBCT scan.' },
  { q: 'What does treatment cost at your clinic?', a: 'Cost varies depending on the treatment and complexity. After your consultation you receive a written, itemised plan with no hidden charges. We are happy to explain alternatives at different price points.' },
  { q: 'Is the clinic safe and sterilised?', a: 'Yes. We use autoclave-sterilised instruments, sealed disposable kits, and follow standard infection-control protocols for every patient. You are welcome to ask about our sterilisation process during your visit.' },
  { q: 'Do you treat children?', a: 'Yes — we see children of all ages, including first dental visits. The clinic is family-friendly and the team is experienced with gentle, child-led care.' },
  { q: 'Do you accept walk-ins or only appointments?', a: 'We prefer appointments so you do not have to wait, but we always try to accommodate genuine emergencies. Call or WhatsApp us and we will guide you.' },
];

/* Gallery shows real clinic photos. Each is also a drag-and-drop slot, so the
   clinic can swap in a better shot anytime — drops persist on this (root) page
   via the .image-slots.state.json sidecar. */
const GALLERY = [
  { id: 'home-gallery-1', label: 'Consultation', src: 'assets/clinic-consult.jpg', ph: 'Drop a photo of a consultation' },
  { id: 'home-gallery-2', label: 'Treatment room', src: 'assets/clinic-room.jpg', ph: 'Drop a photo of the treatment room' },
  { id: 'home-gallery-3', label: 'Treatment in progress', src: 'assets/clinic-treatment.jpg', ph: 'Drop a photo of treatment in progress' },
  { id: 'home-gallery-4', label: 'Sterile setup', src: 'assets/clinic-sterile.jpg', ph: 'Drop a photo of the sterilisation area' }, // UV sterilising cabinet
  { id: 'home-gallery-5', label: 'Chair-side care', src: 'assets/clinic-care.jpg', ph: 'Drop a photo of chair-side care' },
];

/* ----------- Tweak defaults ----------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "teal",
  "displayFont": "serif",
  "showWelcomeBadge": true
}/*EDITMODE-END*/;

const PALETTES = {
  teal:  { '--primary': '#0F4C5C', '--primary-700': '#0B3D4A', '--primary-100': '#D6E7EA', '--accent': '#2BB3A3', '--soft': '#EEF7F6' },
  navy:  { '--primary': '#0B3D5C', '--primary-700': '#07304A', '--primary-100': '#D4E0EC', '--accent': '#3F8DBF', '--soft': '#EAF1F8' },
  forest:{ '--primary': '#1F4D3A', '--primary-700': '#163829', '--primary-100': '#D5E6DC', '--accent': '#67A07A', '--soft': '#EDF5EF' },
};

/* ----------- HERO ----------- */
function Hero({ tweaks }){
  const [clinicStatus, setClinicStatus] = useState(() => getClinicStatus());

  useEffect(() => {
    const refresh = () => setClinicStatus(getClinicStatus());
    const timer = window.setInterval(refresh, 60 * 1000);
    window.addEventListener('focus', refresh);
    return () => {
      window.clearInterval(timer);
      window.removeEventListener('focus', refresh);
    };
  }, []);

  return (
    <section id="home" className="hero">
      <div className="container hero-grid">
        <div>
          <span className="hero-tag">
            <span className={`dot status-${clinicStatus.tone}`}></span> Andheri West, Mumbai · {clinicStatus.heroText}
          </span>
          <h1>
            Gentle dental care.<br/>
            Advanced <em>implant</em> solutions.
          </h1>
          <p className="lead">
            A trusted family clinic in Mumbai offering modern dental treatment for every age — from routine cleanings to complete smile rehabilitation. Honest advice, careful hands, and a sterile, calm setting.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => smoothScroll('contact')}>
              <Icon.Calendar size={16} /> Book appointment
            </button>
            <a className="btn btn-whats btn-lg" href="https://wa.me/919930457845?text=Hello%2C%20I%27d%20like%20to%20book%20an%20appointment%20at%20Puneet%20Dental%20Clinic.">
              <Icon.Whatsapp size={16} /> WhatsApp us
            </a>
            <a className="btn btn-ghost btn-lg" href="tel:+919930457845">
              <Icon.Phone size={16} /> Call now
            </a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item"><span className="n">25+</span><span className="l">Years of practice</span></div>
            <div className="hero-meta-item"><span className="n">5★</span><span className="l">Google rating</span></div>
            <div className="hero-meta-item"><span className="n">3L+</span><span className="l">Patients treated</span></div>
          </div>
        </div>
        <div className="hero-visual-wrap">
          <div className="hero-visual">
            <image-slot id="home-hero" src="assets/smile-closeup.jpg" alt="Confident patient smile after dental care" loading="eager" fetchpriority="high" shape="rect" placeholder="Drop a warm photo — the dentist with a patient, or a confident smile" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
          </div>
          <div className="hero-card">
            <div>
              <div className="stars">★★★★★</div>
              <div className="t1">Trusted for 25+ years in Andheri West</div>
              <div className="t2">5★ · 180+ Google reviews</div>
            </div>
          </div>
          {tweaks.showWelcomeBadge && (
            <div className="hero-card-right">
              <span className={`pulse status-${clinicStatus.tone}`}></span>
              <span className="t">{clinicStatus.badge}<small>{clinicStatus.detail}</small></span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ----------- TRUST ----------- */
function Trust(){
  const items = [
    { ic: 'Award', t: '25+ years of practice' },
    { ic: 'Implant', t: 'Dental implants' },
    { ic: 'Drop', t: 'Root canal treatment' },
    { ic: 'Shield', t: 'Sterilised clinic' },
    { ic: 'Star', t: '5 ★ on Google' },
    { ic: 'Pin', t: 'Andheri West, Mumbai' },
  ];
  return (
    <div className="trust">
      <div className="container trust-inner">
        {items.map((it, i) => {
          const I = Icon[it.ic];
          return (
            <div key={i} className="trust-item">
              <span className="ic"><I size={20} /></span>
              <span className="lbl">{it.t}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ----------- SERVICES ----------- */
function Services(){
  const [showAll, setShowAll] = useState(false);
  const items = showAll ? SERVICES : SERVICES.slice(0, 8);
  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Treatments</span>
          <h2>Care for every smile, <em>at every age.</em></h2>
          <p>From a routine cleaning to full-mouth rehabilitation — every treatment begins with a careful explanation, so you always know what's planned and why.</p>
        </div>
        <div className="services-grid">
          {items.map((s, i) => {
            const I = Icon[s.ic];
            return (
              <a key={i} className="svc" href={`treatments/${s.slug}.html`}>
                <div className="svc-ic"><I size={22} /></div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <span className="svc-link">Learn more <Icon.Arrow size={12} /></span>
              </a>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <button className="btn btn-ghost btn-lg" onClick={() => setShowAll(!showAll)}>
            {showAll ? 'Show fewer treatments' : `Show all ${SERVICES.length} treatments`} <Icon.Arrow size={12} />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ----------- IMPLANT ----------- */
function Implant(){
  return (
    <section id="implants" className="implant">
      <div className="container implant-grid">
        <div className="implant-visual">
          <image-slot id="home-implant" src="assets/implant-planning.jpg" alt="Digital dental implant planning consultation" loading="lazy" shape="rect" placeholder="Drop a photo — implant consultation or 3D scan planning" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
          <div className="implant-badge">
            <div className="ic"><Icon.Implant size={18} /></div>
            <div>
              <div className="t1">Implant Center</div>
              <div className="t2">Digital planning · sterile protocol</div>
            </div>
          </div>
        </div>
        <div className="implant-content">
          <span className="eyebrow">Implant Center</span>
          <h2>A permanent answer to <em>missing teeth.</em></h2>
          <p>
            Dental implants restore the way you chew, speak and smile — and once placed, they look and feel like a tooth that has always been there. Every implant case at our clinic begins with a CBCT scan and a transparent written plan, so there are no surprises.
          </p>
          <div className="implant-steps">
            {IMPLANT_STEPS.map((s, i) => (
              <div key={i} className="step">
                <div className="step-num">{i + 1}</div>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="btn btn-primary btn-lg" href="treatments/dental-implants.html">
              Read more about implants <Icon.Arrow size={14} />
            </a>
            <button className="btn btn-ghost btn-lg" onClick={() => smoothScroll('contact')}>
              Book a consultation
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------- DOCTOR ----------- */
function Doctor(){
  return (
    <section id="doctor" className="doctor">
      <div className="container doctor-grid">
        <div className="doctor-visual">
          <div className="doctor-img">
            <img src="assets/doctor.jpg" alt="Dr. Puneet Mehrotra, dentist and implantologist in Andheri West" width="360" height="360" loading="lazy" decoding="async" />
            <div className="doctor-img-caption">
              <div className="n">Dr. Puneet Mehrotra</div>
              <div className="r">BDS · Implantologist</div>
            </div>
          </div>
          <div className="doctor-quote">
            Every patient deserves to understand their treatment before it begins.
          </div>
        </div>
        <div className="doctor-content">
          <span className="eyebrow">About the doctor</span>
          <h2>A quarter-century of <em>careful, considered dentistry.</em></h2>
          <p>
            Dr. Puneet Mehrotra has practiced in Mumbai for over 25 years, with a special interest in implantology and full-mouth rehabilitation. Generations of families from Andheri now visit the clinic — many who first came as children are now bringing their own kids. The approach has stayed the same: listen first, explain clearly, treat gently.
          </p>
          <div className="cred-grid">
            <div className="cred"><div className="l">Qualification</div><div className="v">BDS, Government Dental College, Mumbai</div></div>
            <div className="cred"><div className="l">Special interest</div><div className="v">Implants & full-mouth rehabilitation</div></div>
            <div className="cred"><div className="l">Registration</div><div className="v">Maharashtra State Dental Council</div></div>
            <div className="cred"><div className="l">Experience</div><div className="v">25+ years in clinical dentistry</div></div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
            <button className="btn btn-primary" onClick={() => smoothScroll('contact')}>Book a consultation</button>
            <button className="btn btn-ghost" onClick={() => smoothScroll('reviews')}>Read patient reviews</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------- GALLERY ----------- */
function Gallery(){
  const features = [
    { ic: 'Shield', t: 'Sterilisation you can trust', d: 'Autoclaved instruments, sealed disposable kits, and gloves changed for every patient. We will show you our sterilisation area if you ask.' },
    { ic: 'Sparkle', t: 'Modern dental technology', d: 'Digital X-ray, RVG, intraoral camera, rotary endodontics, and a complete implant kit — used by hands that know when each one is needed.' },
    { ic: 'Heart', t: 'Family-clinic comfort', d: 'A calm, well-lit space with attentive staff. Children, anxious patients, and elderly family members are all welcome.' },
  ];
  return (
    <section id="gallery" className="clinic">
      <div className="container">
        <div className="clinic-head">
          <div>
            <span className="eyebrow">Inside the clinic</span>
            <h2>Clean, calm, and built for <em>careful work.</em></h2>
          </div>
          <p>Real photos from inside our Andheri clinic. The setting is unhurried by design — a place where patients feel looked after, and where every procedure is done with steady attention.</p>
        </div>
        <div className="gallery">
          {GALLERY.map((g, i) => (
            <div key={i} className={`g g${i + 1}`} data-label={g.label}>
              <image-slot id={g.id} src={g.src} alt={`${g.label} at Puneet Dental Clinic in Andheri West`} loading="lazy" shape="rect" placeholder={g.ph} style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
            </div>
          ))}
        </div>
        <div className="feature-row">
          {features.map((f, i) => {
            const I = Icon[f.ic];
            return (
              <div key={i} className="feature">
                <div className="ic"><I size={22} /></div>
                <h3>{f.t}</h3>
                <p>{f.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ----------- REVIEWS ----------- */
function Reviews(){
  const [paused, setPaused] = useState(false);
  // Track is the review list duplicated once, scrolled by CSS keyframe from
  // 0 to -50% — because the two halves are identical, the loop is seamless.
  const loop = [...REVIEWS, ...REVIEWS];
  return (
    <section id="reviews" className="reviews">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Patient stories</span>
          <h2>What our patients <em>actually say.</em></h2>
          <p>Real reviews from real patients — not testimonials. We do not edit or curate what people write.</p>
          <div style={{ marginTop: 18 }}>
            <span className="google-badge">
              <Icon.Star size={16} />
              <span><span className="gscore">5</span> / 5 from 180+ Google reviews</span>
            </span>
          </div>
        </div>
      </div>
      <div
        className="reviews-marquee"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className={`reviews-track ${paused ? 'is-paused' : ''}`}>
          {loop.map((r, i) => (
            <div key={i} className="review" aria-hidden={i >= REVIEWS.length}>
              <div className="stars">{'★'.repeat(r.stars)}</div>
              <div className="body">"{r.body}"</div>
              <div className="author">
                <div className="avatar">{r.av}</div>
                <div>
                  <div className="nm">{r.n}</div>
                  <div className="meta">{r.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------- FAQ ----------- */
function FAQ(){
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="faq">
      <div className="container faq-grid">
        <div className="faq-side">
          <span className="eyebrow">Common questions</span>
          <h2>Honest answers — <em>before</em> you book.</h2>
          <p>If something is on your mind that isn't here, just WhatsApp us. We try to answer the same day.</p>
          <a className="btn btn-whats" href="https://wa.me/919930457845?text=Hello%2C%20I%27d%20like%20to%20book%20an%20appointment%20at%20Puneet%20Dental%20Clinic.">
            <Icon.Whatsapp size={16} /> WhatsApp the clinic
          </a>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle"><Icon.Plus size={14} /></span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------- TWEAKS PANEL ----------- */
function TweaksUI({ tweaks, setTweak }){
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Visual">
        <TweakRadio
          label="Display font"
          value={tweaks.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={[
            { value: 'serif', label: 'Serif (Cormorant)' },
            { value: 'sans', label: 'All sans (DM Sans)' },
          ]}
        />
        <TweakSelect
          label="Color palette"
          value={tweaks.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            { value: 'teal', label: 'Deep teal & mint (default)' },
            { value: 'navy', label: 'Navy & sky' },
            { value: 'forest', label: 'Forest & sage' },
          ]}
        />
        <TweakToggle
          label="Welcome status badge in hero"
          value={tweaks.showWelcomeBadge}
          onChange={(v) => setTweak('showWelcomeBadge', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ----------- APP ----------- */
function App(){
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState('home');
  const [lightbox, setLightbox] = useState(null);

  /* Palette */
  useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[tweaks.palette] || PALETTES.teal;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [tweaks.palette]);

  /* Display font */
  useEffect(() => {
    if (tweaks.displayFont === 'sans'){
      document.body.classList.add('display-sans');
    } else {
      document.body.classList.remove('display-sans');
    }
  }, [tweaks.displayFont]);

  /* Scroll spy */
  useEffect(() => {
    const ids = ['home', 'services', 'implants', 'doctor', 'gallery', 'reviews', 'contact'];
    const onScroll = () => {
      const fromTop = window.scrollY + 120;
      let cur = 'home';
      for (const id of ids){
        const el = document.getElementById(id);
        if (el && el.offsetTop <= fromTop) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <Nav active={active} />
      <main>
        <Hero tweaks={tweaks} />
        <Trust />
        <Services />
        <Implant />
        <Doctor />
        <Gallery />
        <Reviews />
        <FAQ />
        <Contact />
      </main>
      <Footer />
      <MobileBar />
      <Lightbox src={lightbox} onClose={() => setLightbox(null)} />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);