/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
const useLang = window.useLang;
const S = window.STR;
const MARQUEE = window.MARQUEE;
const { TREATMENTS, WHY, FAQS, TESTIMONIALS, GALLERY } = window;

const CLINIC_PHONE_DISPLAY = "+91 94274 72800";
const CLINIC_PHONE_TEL = "+919427472800";
const CLINIC_WA = "919427472800";
// Embed by clinic name so it resolves to the Google listing.
// For a pinpoint pin, paste the iframe code from Google Maps → Share → "Embed a map".
const MAP_EMBED = "https://www.google.com/maps?q=Bhaktinagar+Circle,+Geeta+Mandir+Road,+Rajkot,+Gujarat+360002&output=embed";

// --------- Icons ---------
const Icon = {
  Plus: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 5v14M5 12h14"/></svg>,
  Arrow: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  ArrowL: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>,
  Phone: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 4h4l2 5-3 2c1 3 3 5 6 6l2-3 5 2v4c0 1-1 2-2 2C9 22 2 15 2 6c0-1 1-2 3-2z"/></svg>,
  Wa: () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 00-8.5 15l-1.4 5 5.1-1.3A10 10 0 1012 2zm5.6 14.3c-.2.6-1.2 1.2-1.7 1.3-.4 0-1 .1-3.1-.7-2.6-1-4.2-3.7-4.4-3.9-.1-.2-1-1.3-1-2.5s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5.2.6.7 2 .8 2.1.1.2 0 .4 0 .6 0 .2-.2.3-.4.5-.1.1-.3.3-.4.5-.1.2-.3.4-.1.7.1.3.7 1.2 1.5 1.9 1 .9 1.9 1.2 2.2 1.3.3.1.4.1.6-.1l.7-.8c.2-.2.4-.2.7-.1.3.1 1.7.8 2 1 .3.1.5.2.5.3 0 .2 0 .9-.2 1.7z"/></svg>
};

// --------- Nav ---------
function Nav() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const closeMenu = () => setMenuOpen(false);
  return (
    <nav className={"nav" + (scrolled || menuOpen ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="nav-inner">
        <a href="#top" className="logo" onClick={closeMenu}>
          <img className="logo-img" src="assets/logo.png" alt="Banjara Dental Clinic" />
          <span>
            {t("brand")}
            <span className="logo-sub">{t("logoSub")}</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="#about">{t("navAbout")}</a>
          <a href="#treatments">{t("navTreatments")}</a>
          <a href="#gallery">{t("navGallery")}</a>
          <a href="#faq">{t("navFaq")}</a>
          <window.LangToggle/>
          <a href="#book" className="nav-cta">{t("navBook")} <Icon.Arrow/></a>
        </div>
        <div className="nav-mobile">
          <a href="#book" className="nav-cta" onClick={closeMenu}>{t("navBook")}</a>
          <button
            className="nav-burger"
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      <div className="nav-menu">
        <a href="#about" onClick={closeMenu}>{t("navAbout")}</a>
        <a href="#treatments" onClick={closeMenu}>{t("navTreatments")}</a>
        <a href="#gallery" onClick={closeMenu}>{t("navGallery")}</a>
        <a href="#faq" onClick={closeMenu}>{t("navFaq")}</a>
        <div className="nav-menu-lang"><window.LangToggle/></div>
      </div>
    </nav>
  );
}

// --------- Live open/closed status (always IST / Asia-Kolkata) ---------
function useClinicStatus() {
  const compute = () => {
    // Read the current time in IST regardless of the visitor's device timezone
    const parts = new Intl.DateTimeFormat("en-US", {
      timeZone: "Asia/Kolkata",
      weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false
    }).formatToParts(new Date());
    const get = (t) => parts.find(p => p.type === t)?.value;
    const wdMap = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
    const day = wdMap[get("weekday")];
    let hh = parseInt(get("hour"), 10);
    if (hh === 24) hh = 0; // some engines emit 24 at midnight
    const mins = hh * 60 + parseInt(get("minute"), 10);
    const isWeekday = day >= 1 && day <= 5;
    const inMorning = mins >= 9 * 60 && mins < 13 * 60;
    const inEvening = mins >= 17 * 60 && mins < 20 * 60;
    const open = isWeekday && (inMorning || inEvening);
    let nextChange = "";
    if (open) nextChange = "";
    else if (isWeekday && mins < 9 * 60) nextChange = "opensAt9";
    else if (isWeekday && mins >= 13 * 60 && mins < 17 * 60) nextChange = "opensAt5";
    else if (isWeekday && day !== 5 && mins >= 20 * 60) nextChange = "opensTomorrow"; // Mon–Thu night → tomorrow 9 AM
    else nextChange = "opensMon"; // Fri night + weekend
    return { open, isWeekday, nextChange };
  };
  const [status, setStatus] = useState(compute);
  useEffect(() => {
    const id = setInterval(() => setStatus(compute()), 30000);
    return () => clearInterval(id);
  }, []);
  return status;
}

// --------- Hero ---------
function Hero() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  const marq = MARQUEE[lang];
  const status = useClinicStatus();
  const statusLabel = status.open
    ? t("heroOpen")
    : (status.nextChange === "opensAt9" ? t("heroOpensAt9")
      : status.nextChange === "opensAt5" ? t("heroOpensAt5")
      : status.nextChange === "opensTomorrow" ? t("heroOpensTomorrow")
      : status.nextChange === "opensMon" ? t("heroOpensMon")
      : t("heroClosedToday"));
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">{t("heroEyebrow")}</span>
            <h1 style={{marginTop: 24}}>
              {t("heroTitlePre")}<em>{t("heroTitleEm")}</em>{t("heroTitlePost")}
            </h1>
            <p className="hero-sub">
              {t("heroSub")} {t("heroSubAccent") && <span className="guj">{t("heroSubAccent")}</span>}
            </p>
            <div className="hero-actions">
              <a href="#book" className="btn btn-primary">{t("heroBook")} <Icon.Arrow/></a>
              <a href="#treatments" className="btn btn-ghost">{t("heroExplore")}</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="num">26+</span>
                <span className="label">{t("heroM1")}</span>
              </div>
              <div className="hero-meta-item">
                <span className="num">3 Lac+</span>
                <span className="label">{t("heroM2")}</span>
              </div>
            </div>
          </div>
          <div className="hero-visual">
            <img className="hero-img" src="assets/clinic-entrance.jpeg" alt="Banjara Dental Clinic entrance, Rajkot" loading="eager" />
            <div className="hero-badge b1">
              <span className={"dot " + (status.open ? "" : "dot-off")}></span>
              <div className="text">
                <strong>{statusLabel}</strong>
                <span>{t("heroHours")}</span>
              </div>
            </div>
            <div className="hero-badge b2">
              <div className="text">
                <strong>BDS</strong>
                <span>{t("heroQualSub")}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {marq.concat(marq).map((m, i) => <span key={i}>{m}</span>)}
        </div>
      </div>
    </section>
  );
}

// --------- About ---------
function About() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-grid">
          <img className="about-img" src="assets/doctor.jpeg" alt="Dr. Vipul Banjara, BDS" loading="lazy" />
          <div>
            <span className="eyebrow">{t("aboutEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("aboutTitle")}</h2>
            <p style={{marginTop: 24, fontSize: 17}}>{t("aboutP1")}</p>
            <p style={{marginTop: 16}}>{t("aboutP2")}</p>
            <div className="signature">{t("aboutSign")}</div>
            <div className="about-credentials">
              <div className="cred">
                <div className="key">{t("credQualK")}</div>
                <div className="val">{t("credQualV")}</div>
              </div>
              <div className="cred">
                <div className="key">{t("credExpK")}</div>
                <div className="val">{t("credExpV")}</div>
              </div>
              <div className="cred">
                <div className="key">{t("credSpecK")}</div>
                <div className="val">{t("credSpecV")}</div>
              </div>
              <div className="cred">
                <div className="key">{t("credLangK")}</div>
                <div className="val">{t("credLangV")}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --------- Treatments ---------
function Treatments() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  const other = lang === "en" ? "gu" : "en";
  const [open, setOpen] = useState(null);
  return (
    <section className="section section-soft" id="treatments">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("trEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("trTitle")}</h2>
          </div>
          <p className="lead">{t("trLead")}</p>
        </div>
        <div className="treatments-grid">
          {TREATMENTS.map((tr, i) => (
            <div
              key={tr.num}
              className={"treatment " + (open === i ? "expanded" : "")}
              onClick={() => setOpen(open === i ? null : i)}
            >
              <div className="t-num">{tr.num} / 12</div>
              <div className="t-head">
                <div>
                  <h3>{tr.name[lang]}</h3>
                  <span className="t-guj guj">{tr.name[other]}</span>
                </div>
                <div className="t-icon"><Icon.Plus/></div>
              </div>
              <p className="t-desc">{tr.desc[lang]}</p>
              <div className="t-detail">
                <div className="t-detail-inner">
                  <ul>
                    {tr.points[lang].map(p => <li key={p}>{p}</li>)}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --------- Why Us + Counters ---------
function WhyUs() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <section className="section section-dark" id="why">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("whyEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("whyTitle")}</h2>
          </div>
          <p className="lead">{t("whyLead")}</p>
        </div>
        <div className="why-grid">
          {WHY.map(r => (
            <div className="why-card" key={r.n}>
              <span className="why-num">{r.n}</span>
              <h3>{r.h[lang]}</h3>
              <p>{r.p[lang]}</p>
            </div>
          ))}
        </div>
        <Counters />
      </div>
    </section>
  );
}

function useCounter(target, duration = 2000) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const tt = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - tt, 3);
          setVal(Math.round(target * eased));
          if (tt < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target, duration]);
  return [val, ref];
}

function CounterItem({ n, suffix, label, fmt }) {
  const [v, ref] = useCounter(n);
  const display = fmt ? fmt(v) : v.toLocaleString("en-IN");
  return (
    <div className="counter" ref={ref}>
      <div className="n">{display}<em>{suffix}</em></div>
      <div className="l">{label}</div>
    </div>
  );
}

const lacFmt = (v) => v >= 100000
  ? (v / 100000).toLocaleString("en-IN", { maximumFractionDigits: 1 }) + " Lac"
  : Math.round(v).toLocaleString("en-IN");

function Counters() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <div className="counters">
      <CounterItem n={300000} suffix="+" fmt={lacFmt} label={t("cnt1")} />
      <CounterItem n={20000} suffix="+" label={t("cnt2")} />
      <CounterItem n={4000} suffix="+" label={t("cnt3")} />
      <CounterItem n={15000} suffix="+" label={t("cnt4")} />
      <CounterItem n={1200} suffix="+" label={t("cnt5")} />
    </div>
  );
}

// --------- Gallery ---------
// --------- Clinic Gallery ---------
const CLINIC_PHOTOS = [
  { src: "assets/clinic-entrance.jpeg", cap: { en: "Clinic entrance", gu: "ક્લિનિક પ્રવેશદ્વાર" } },
  { src: "assets/clinic-reception.jpeg", cap: { en: "Reception & waiting area", gu: "રિસેપ્શન અને વેઇટિંગ એરિયા" } },
  { src: "assets/clinic-waiting.jpeg", cap: { en: "Spacious waiting lounge", gu: "વિશાળ વેઇટિંગ લાઉન્જ" } },
  { src: "assets/clinic-room1.jpeg", cap: { en: "Treatment room", gu: "સારવાર રૂમ" } },
  { src: "assets/clinic-room2.jpeg", cap: { en: "Fully-equipped dental operatory", gu: "સંપૂર્ણ સજ્જ ડેન્ટલ ઓપરેટરી" } }
];

function Gallery() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  const trackRef = useRef(null);
  const [lightbox, setLightbox] = useState(null);
  const scroll = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".clinic-card");
    const step = card ? card.getBoundingClientRect().width + 24 : 440;
    track.scrollBy({ left: dir * step, behavior: "smooth" });
  };
  return (
    <section className="section section-soft" id="gallery">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("galEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("galTitle")}</h2>
          </div>
          <p className="lead">{t("galLead")}</p>
        </div>
        <div className="gallery">
          <div className="gallery-track" ref={trackRef}>
            {CLINIC_PHOTOS.map((p, i) => (
              <figure className="clinic-card" key={i} onClick={() => setLightbox(i)}>
                <div className="clinic-img-wrap">
                  <img src={p.src} alt={p.cap[lang]} loading="lazy" />
                  <span className="clinic-zoom">⤢</span>
                </div>
                <figcaption>
                  <span className="clinic-num">{String(i + 1).padStart(2, "0")} / {String(CLINIC_PHOTOS.length).padStart(2, "0")}</span>
                  <span className="clinic-cap">{p.cap[lang]}</span>
                </figcaption>
              </figure>
            ))}
          </div>
          <div className="gallery-controls">
            <button className="gallery-btn" onClick={() => scroll(-1)} aria-label="Previous"><Icon.ArrowL/></button>
            <button className="gallery-btn" onClick={() => scroll(1)} aria-label="Next"><Icon.Arrow/></button>
          </div>
        </div>
      </div>
      {lightbox !== null && (
        <div className="clinic-lightbox" onClick={() => setLightbox(null)}>
          <button className="clinic-lightbox-close" aria-label="Close">✕</button>
          <button className="clinic-lightbox-nav prev" onClick={e => { e.stopPropagation(); setLightbox((lightbox - 1 + CLINIC_PHOTOS.length) % CLINIC_PHOTOS.length); }} aria-label="Previous"><Icon.ArrowL/></button>
          <figure className="clinic-lightbox-fig" onClick={e => e.stopPropagation()}>
            <img src={CLINIC_PHOTOS[lightbox].src} alt={CLINIC_PHOTOS[lightbox].cap[lang]} />
            <figcaption>{CLINIC_PHOTOS[lightbox].cap[lang]}</figcaption>
          </figure>
          <button className="clinic-lightbox-nav next" onClick={e => { e.stopPropagation(); setLightbox((lightbox + 1) % CLINIC_PHOTOS.length); }} aria-label="Next"><Icon.Arrow/></button>
        </div>
      )}
    </section>
  );
}

// --------- Testimonials ---------
function Testimonials() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <section className="section" id="testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("tsEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("tsTitle")}</h2>
          </div>
          <p className="lead">{t("tsLead")}</p>
        </div>
        <div className="testimonials-grid">
          {TESTIMONIALS.map((tm, i) => (
            <div className="testimonial" key={i}>
              <div className="quote-mark">"</div>
              <p>{tm.quote[lang]}</p>
              <div className="testimonial-foot">
                <div className="tf-avatar">{tm.initial}</div>
                <div style={{flex: 1}}>
                  <div className="tf-name">{tm.name}</div>
                  <div className="tf-meta">{tm.meta[lang]}</div>
                </div>
                <div className="stars">★★★★★</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --------- FAQ ---------
function FAQ() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  const [open, setOpen] = useState(0);
  return (
    <section className="section section-soft" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">{t("faqEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("faqTitle")}</h2>
            <p style={{marginTop: 24}}>{t("faqP")}</p>
            <a href="#book" className="btn btn-ghost" style={{marginTop: 24}}>{t("faqBtn")} <Icon.Arrow/></a>
          </div>
          <div>
            {FAQS.map((f, i) => (
              <div
                key={i}
                className={"faq-item " + (open === i ? "open" : "")}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q">
                  <span>{f.q[lang]}</span>
                  <span className="faq-toggle">+</span>
                </div>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a[lang]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// --------- Booking ---------
function Booking() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <section className="section" id="book">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("bkEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("bkTitle")}</h2>
          </div>
          <p className="lead">{t("bkLead")}</p>
        </div>
        <div className="booking-grid">
          <div className="booking-info">
            <span className="eyebrow" style={{color: "var(--accent-soft)"}}>{t("bkHoursEye")}</span>
            <h2 style={{marginTop: 18}}>{t("bkHoursTitle")}</h2>
            <p>{t("bkHoursP")}</p>
            <div className="bi-list">
              <div className="bi-row"><span className="k">{t("bkMorningK")}</span><span className="v">{t("bkMorningV")}</span></div>
              <div className="bi-row"><span className="k">{t("bkEveningK")}</span><span className="v">{t("bkEveningV")}</span></div>
              <div className="bi-row"><span className="k">{t("bkWeekK")}</span><span className="v">{t("bkWeekV")}</span></div>
              <div className="bi-row"><span className="k">{t("bkWeekendK")}</span><span className="v">{t("bkWeekendV")}</span></div>
              <div className="bi-row"><span className="k">{t("bkWaK")}</span><span className="v">{t("bkWaV")}</span></div>
            </div>
          </div>
          <div className="call-card">
            <span className="eyebrow">{t("callEye")}</span>
            <h3 className="call-card-h">{t("callH")}</h3>
            <p className="call-card-sub">{t("callSub")}</p>
            <a href={"tel:" + CLINIC_PHONE_TEL} className="call-number">
              <span className="call-number-icon"><Icon.Phone/></span>
              <span>
                <span className="call-number-label">{t("callTap")}</span>
                <span className="call-number-val">{CLINIC_PHONE_DISPLAY}</span>
              </span>
            </a>
            <div className="call-actions">
              <a href={"tel:" + CLINIC_PHONE_TEL} className="btn btn-primary" style={{flex: 1, justifyContent: "center"}}>{t("callNow")} <Icon.Phone/></a>
              <a href={"https://wa.me/" + CLINIC_WA} target="_blank" rel="noopener" className="btn btn-ghost" style={{flex: 1, justifyContent: "center"}}>{t("callWa") || "WhatsApp"} <Icon.Wa/></a>
            </div>
            <div className="call-note">{t("callNote")}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --------- Contact + Map ---------
function Contact() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <section className="section section-soft" id="contact">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("ctEyebrow")}</span>
            <h2 style={{marginTop: 18}}>{t("ctTitle")}</h2>
          </div>
        </div>
        <div className="contact-grid">
          <div className="contact-info-list">
            <a className="contact-card" href={"tel:" + CLINIC_PHONE_TEL} style={{textDecoration: "none", display: "block"}}>
              <div className="lbl">{t("ctPhoneL")}</div>
              <div className="val">{CLINIC_PHONE_DISPLAY}</div>
              <div className="sub">{t("ctPhoneSub")}</div>
            </a>
            <div className="contact-card">
              <div className="lbl">{t("ctAddrL")}</div>
              <div className="val">{t("ctAddrV")}</div>
              <div className="sub">{t("ctAddrSub")}</div>
            </div>
          </div>
          <div className="map-embed-wrap">
            <iframe
              className="map-embed"
              src={MAP_EMBED}
              title={t("mapName")}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

// --------- Footer ---------
function Footer() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#top" className="logo" style={{color: "var(--bg)"}}>
              <img className="logo-img" src="assets/logo-light.png" alt="Banjara Dental Clinic" />
              <span style={{color: "var(--bg)"}}>
                {t("brand")}
                <span className="logo-sub" style={{color: "rgba(255,255,255,.5)"}}>{t("logoSub")}</span>
              </span>
            </a>
            <p className="footer-tagline">{t("ftTagline")}</p>
          </div>
          <div>
            <h4>{t("ftTreatments")}</h4>
            <ul>
              <li><a href="#treatments">{t("ftImplants")}</a></li>
              <li><a href="#treatments">{t("ftRct")}</a></li>
              <li><a href="#treatments">{t("ftOrtho")}</a></li>
              <li><a href="#treatments">{t("ftVeneers")}</a></li>
              <li><a href="#treatments">{t("ftAll")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("ftClinic")}</h4>
            <ul>
              <li><a href="#about">{t("ftAbout")}</a></li>
              <li><a href="#gallery">{t("ftClinicPhotos")}</a></li>
              <li><a href="#testimonials">{t("ftReviews")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("ftContact")}</h4>
            <ul>
              <li>{t("mapAddr")}</li>
              <li>{CLINIC_PHONE_DISPLAY}</li>
              <li>{t("ctPhoneSub")}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t("ftRights")}</span>
          <span>{t("ftLoc")}</span>
        </div>
      </div>
    </footer>
  );
}

// --------- FAB ---------
function Fab() {
  const [lang] = useLang();
  const t = k => S[k][lang];
  return (
    <div className="fab">
      <button className="fab-btn fab-wa" data-tip={t("fabWa")} onClick={() => window.open("https://wa.me/" + CLINIC_WA, "_blank")}><Icon.Wa/></button>
      <button className="fab-btn fab-call" data-tip={t("fabCall")} onClick={() => window.location.href = "tel:" + CLINIC_PHONE_TEL}><Icon.Phone/></button>
    </div>
  );
}

// --------- Tweaks ---------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "displayFont": "sans"
}/*EDITMODE-END*/;

function Tweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.dataset.palette = t.palette;
    document.documentElement.dataset.displayFont = t.displayFont;
  }, [t.palette, t.displayFont]);
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Color palette" />
      <window.TweakSelect
        label="Palette"
        value={t.palette}
        onChange={v => setTweak("palette", v)}
        options={[
          { value: "mono", label: "Charcoal & White" },
          { value: "classic", label: "White · Black · Red" },
          { value: "warm", label: "Warm Brown" },
          { value: "clay", label: "Terracotta" },
          { value: "ocean", label: "Clinical Blue" },
          { value: "teal", label: "Mint Teal" },
          { value: "sage", label: "Sage Green" },
          { value: "plum", label: "Plum" }
        ]}
      />
      <window.TweakSection label="Display font" />
      <window.TweakRadio
        label="Font"
        value={t.displayFont}
        onChange={v => setTweak("displayFont", v)}
        options={["sans", "serif"]}
      />
    </window.TweaksPanel>
  );
}

// --------- App ---------
function App() {
  useEffect(() => {
    const root = document.documentElement;
    const all = () => document.querySelectorAll(".section, .hero");
    all().forEach(el => el.classList.add("reveal"));
    root.classList.add("reveal-ready");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add("visible");
      });
    }, { threshold: 0.06 });
    all().forEach(el => obs.observe(el));
    // reveal anything already near the viewport immediately
    requestAnimationFrame(() => {
      all().forEach(el => {
        if (el.getBoundingClientRect().top < window.innerHeight * 0.95) el.classList.add("visible");
      });
    });
    // failsafe — never leave content hidden
    const failsafe = setTimeout(() => all().forEach(el => el.classList.add("visible")), 1600);
    return () => { obs.disconnect(); clearTimeout(failsafe); };
  }, []);

  return (
    <>
      <window.LangPopup/>
      <Nav/>
      <Hero/>
      <About/>
      <Treatments/>
      <WhyUs/>
      <Gallery/>
      <Testimonials/>
      <FAQ/>
      <Booking/>
      <Contact/>
      <Footer/>
      <Fab/>
      <Tweaks/>
    </>
  );
}

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