// Shared components — Navbar, Footer, Hero, TrustStrip, WhatsAppFab, etc.
// Make available globally for the page scripts.

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Nav ---------- */
function DSCNavbar({ route, navigate }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "treatments", label: "Treatments" },
    { id: "dentists",   label: "Dentists"   },
    { id: "contact",    label: "Visit"      },
  ];

  return (
    <nav className={`dsc-nav ${scrolled ? "scrolled" : ""}`} data-screen-label="nav">
      <div className="dsc-container">
        <div className="dsc-nav-inner">
          <a className="dsc-logo" href="#/" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
            <span className="dsc-logo-mark">Dubai Sky Clinic</span>
            <span className="dsc-logo-sub dsc-italic">by Trio Dental</span>
          </a>
          <div className="dsc-nav-links">
            {links.map((l) => (
              <a key={l.id}
                 href={`#/${l.id}`}
                 className={`dsc-nav-link ${route.startsWith(l.id) ? "active" : ""}`}
                 onClick={(e) => { e.preventDefault(); navigate(l.id); }}>
                {l.label}
              </a>
            ))}
            <a className="dsc-btn dsc-btn-primary" href="#/book"
               onClick={(e) => { e.preventDefault(); navigate("book"); }}>
              Book a consultation
              <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Trust strip ---------- */
function DSCTrustStrip() {
  const d = window.DSC_DATA;
  return (
    <div className="dsc-trust" data-screen-label="trust">
      <div className="dsc-trust-cell">
        <div className="dsc-trust-num">{d.ratings.doctify.score}<span style={{fontSize: "0.6em", color: "var(--ink-mute)"}}>/{d.ratings.doctify.of}</span></div>
        <div className="dsc-trust-label">Doctify · {d.ratings.doctify.count} verified reviews</div>
      </div>
      <div className="dsc-trust-cell">
        <div className="dsc-trust-num">{d.ratings.google.score}<span style={{fontSize: "0.6em", color: "var(--ink-mute)"}}>/{d.ratings.google.of}</span></div>
        <div className="dsc-trust-label">Google · ~{d.ratings.google.count} reviews</div>
      </div>
      <div className="dsc-trust-cell">
        <div className="dsc-trust-num">20<span style={{fontSize: "0.6em"}}>+ yrs</span></div>
        <div className="dsc-trust-label">In Dubai since {d.clinic.foundedYear}</div>
      </div>
      <div className="dsc-trust-cell">
        <div className="dsc-trust-num">DHA</div>
        <div className="dsc-trust-label">Regulated · Trio Dental LLC</div>
      </div>
    </div>
  );
}

/* ---------- Hero v2 — editorial theatre ---------- */
function DSCHero({ navigate }) {
  const d = window.DSC_DATA;

  // Live-ish clock (Dubai time — UTC+4)
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const dubaiTime = useMemo(() => {
    const fmt = new Intl.DateTimeFormat("en-GB", {
      hour: "2-digit", minute: "2-digit", timeZone: "Asia/Dubai", hour12: false
    });
    return fmt.format(now);
  }, [now]);

  // Floor counter that climbs to 21 on mount
  const [floor, setFloor] = useState(1);
  useEffect(() => {
    let f = 1;
    const id = setInterval(() => {
      f += 1;
      setFloor(f);
      if (f >= 21) clearInterval(id);
    }, 75);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="dsc-hero" data-screen-label="hero">
      {/* Meta ticker line */}
      <div className="dsc-container">
        <div className="dsc-hero-meta">
          <span className="dsc-hero-meta-cell">
            <strong>25.2513° N</strong> · 55.3014° E
          </span>
          <span className="dsc-hero-meta-cell">
            Burjuman Business Tower · <strong>Level 21</strong>
          </span>
          <span className="dsc-hero-meta-cell">
            Dubai · <strong>{dubaiTime}</strong> GST
          </span>
          <span className="dsc-hero-meta-cell">
            Altitude · <strong>~84&nbsp;m</strong>
          </span>
          <span className="dsc-hero-meta-spacer"></span>
          <span className="dsc-hero-meta-live">
            <strong>Now booking</strong> — consultations
          </span>
        </div>

        <div className="dsc-hero-grid">
          {/* Floor counter — elevator strip */}
          <div className="dsc-floors" aria-hidden="true">
            {[21, 18, 15, 12, 9, 6, 3, 1].map((n) => {
              const isActive = n === 21 && floor >= 21;
              const isPassing = n === floor;
              const isReached = floor >= n;
              return (
                <div key={n}
                     className={`dsc-floor-row ${isActive ? "active" : isPassing ? "passing" : !isReached ? "dim" : ""}`}>
                  <span>{String(n).padStart(2, "0")}</span>
                </div>
              );
            })}
          </div>

          {/* Headline + lede + CTAs */}
          <div className="dsc-headline-col">
            <div className="dsc-eyebrow-line">
              Est. 2006 · By appointment
            </div>
            <h1 className="dsc-mega-headline">
              <span className="dsc-mega-line-1 dsc-reveal" style={{animationDelay: "60ms"}}>
                Dental excellence
              </span>
              <span className="dsc-mega-line-2 dsc-reveal" style={{animationDelay: "260ms"}}>
                with a view<span className="dsc-mega-period">.</span>
              </span>
            </h1>
            <p className="dsc-mega-sub dsc-reveal" style={{animationDelay: "560ms"}}>
              Twenty years of trusted, higher-ticket dentistry — practised on Dubai's <em>twenty-first floor</em>, by an internationally trained team that explains everything before they begin.
            </p>
            <div className="dsc-hero-cta dsc-reveal" style={{animationDelay: "760ms"}}>
              <a className="dsc-btn dsc-btn-primary" href="#/book"
                 onClick={(e) => { e.preventDefault(); navigate("book"); }}>
                Book a consultation <span aria-hidden="true">→</span>
              </a>
              <a className="dsc-btn dsc-btn-ghost" href={d.clinic.whatsapp} target="_blank" rel="noreferrer">
                <span style={{display: "inline-block", width: 8, height: 8, borderRadius: 999, background: "oklch(0.62 0.16 145)"}}></span>
                WhatsApp
              </a>
              <span className="dsc-hero-cta-meta">
                <strong>4.99</strong>/5 Doctify · <strong>40</strong> verified
              </span>
            </div>
          </div>

          {/* The Window — actual clinic interior with overlays */}
          <div className="dsc-window" aria-hidden="true">
            <div className="dsc-window-sky"></div>
            <div className="dsc-window-photo">
              <img src="media/images/clinic-interior-01.webp" alt="" />
            </div>
            <div className="dsc-window-vignette"></div>

            <div className="dsc-window-meta">View · East &nbsp; <span style={{opacity: 0.7}}>/</span> &nbsp; 21F</div>
            <div className="dsc-window-floor">
              <span style={{display: "block", fontSize: "0.62rem", letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7}}>Floor</span>
              <span className="num">{String(floor).padStart(2, "0")} <span style={{opacity: 0.5, fontSize: "1rem"}}>/ 21</span></span>
            </div>

            <div className="dsc-window-direction">
              <span className="dsc-window-direction-arrow">↗</span>
              <span>Burjuman · interior</span>
            </div>

            <div className="dsc-window-foot">
              <span>clinic-interior-01.webp · Trio</span>
              <span>{dubaiTime}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Marquee */}
      <div className="dsc-marquee">
        <div className="dsc-marquee-track">
          <DSCMarqueeBlock />
          <DSCMarqueeBlock />
        </div>
      </div>
    </section>
  );
}

function DSCMarqueeBlock() {
  const items = [
    { kind: "num", num: "4.99", text: "on Doctify · 40 verified reviews" },
    { kind: "text", text: "DHA-regulated" },
    { kind: "num", num: "~4.8", text: "on Google · 392 reviews" },
    { kind: "text", text: <>German-Swedish founders <em>· est. 2006</em></> },
    { kind: "text", text: "3D CBCT · digital scanning · laser" },
    { kind: "num", num: "20+", text: "years in Dubai" },
    { kind: "text", text: <>WIN lingual braces · <em>Smile Design</em></> },
    { kind: "text", text: "EN · DE · AR · FR" },
    { kind: "num", num: "21F", text: "Burjuman Business Tower" },
    { kind: "text", text: <>Tabby · pay in four</> },
  ];
  return (
    <>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span className="dsc-marquee-item">
            {it.kind === "num" ? <span className="dsc-marquee-num">{it.num}</span> : null}
            <span>{it.text}</span>
          </span>
          <span className="dsc-marquee-dot"></span>
        </React.Fragment>
      ))}
    </>
  );
}

/* ---------- WhatsApp FAB ---------- */
function DSCWhatsAppFab() {
  return (
    <a className="dsc-wa" href={window.DSC_DATA.clinic.whatsapp} target="_blank" rel="noreferrer" aria-label="Chat on WhatsApp">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.5 14.4c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.6 0-.3-.2-1.2-.4-2.3-1.4-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.6.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.6-1.6-.9-2.2-.2-.5-.5-.5-.6-.5h-.6c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.4 0 1.4 1 2.7 1.2 2.9.1.2 2 3.1 4.8 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.2-.2-.5-.4z"/>
        <path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3C8.7 21.5 10.3 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.1l-.3-.2-3.2.8.9-3.1-.2-.3C4.2 15 3.7 13.5 3.7 12c0-4.6 3.7-8.3 8.3-8.3S20.3 7.4 20.3 12s-3.7 8.3-8.3 8.3z"/>
      </svg>
    </a>
  );
}

/* ---------- Mobile sticky CTA ---------- */
function DSCMobileCTA({ navigate }) {
  return (
    <div className="dsc-mobile-cta">
      <a className="dsc-btn dsc-btn-ghost" href={window.DSC_DATA.clinic.whatsapp} target="_blank" rel="noreferrer">WhatsApp</a>
      <a className="dsc-btn dsc-btn-primary" href="#/book" onClick={(e) => { e.preventDefault(); navigate("book"); }}>Book</a>
    </div>
  );
}

/* ---------- Footer ---------- */
function DSCFooter({ navigate }) {
  const d = window.DSC_DATA;
  return (
    <footer className="dsc-footer" data-screen-label="footer">
      <div className="dsc-container">
        <div className="dsc-footer-grid">
          <div>
            <div className="dsc-logo">
              <span className="dsc-logo-mark" style={{color: "var(--bg)"}}>Dubai Sky Clinic</span>
            </div>
            <p style={{marginTop: "1rem", color: "color-mix(in oklab, var(--bg) 70%, transparent)", fontSize: "0.92rem", maxWidth: "32ch"}}>
              <em>by Trio Dental Center.</em> Higher-ticket multi-specialty dentistry on Dubai's 21st floor since 2006.
            </p>
            <p style={{marginTop: "1.25rem", fontSize: "0.78rem", color: "color-mix(in oklab, var(--bg) 50%, transparent)"}}>
              {d.clinic.dhaNote}
            </p>
          </div>
          <div>
            <h4>Treatments</h4>
            {d.treatments.slice(0, 6).map((t) => (
              <a key={t.slug} href={`#/treatments/${t.slug}`}
                 onClick={(e) => { e.preventDefault(); navigate("treatments", { slug: t.slug }); }}>
                {t.name}
              </a>
            ))}
            <a href="#/treatments" onClick={(e) => { e.preventDefault(); navigate("treatments"); }} style={{marginTop: "0.5rem", opacity: 0.7}}>All →</a>
          </div>
          <div>
            <h4>Visit</h4>
            {d.branches.map((b) => (
              <div key={b.id} style={{marginBottom: "1rem"}}>
                <div style={{color: "var(--bg)", fontSize: "0.92rem", marginBottom: 4}}>{b.label}</div>
                <div style={{color: "color-mix(in oklab, var(--bg) 60%, transparent)", fontSize: "0.85rem", lineHeight: 1.4}}>
                  {b.address1}, {b.address3}
                </div>
                <a href={b.phoneTel} style={{color: "color-mix(in oklab, var(--bg) 75%, transparent)", fontSize: "0.85rem"}}>{b.phone}</a>
              </div>
            ))}
          </div>
          <div>
            <h4>Connect</h4>
            <a href={d.clinic.whatsapp} target="_blank" rel="noreferrer">WhatsApp {d.clinic.whatsappLabel}</a>
            <a href="https://www.doctify.com/en-ae/practice/dubai-sky-clinic-by-trio-dental" target="_blank" rel="noreferrer">Doctify · 4.99/5</a>
            <a href="https://www.instagram.com/dubaiskyclinic/" target="_blank" rel="noreferrer">Instagram</a>
            <a href="mailto:info@triodentaluae.com">info@triodentaluae.com</a>
          </div>
        </div>
        <div className="dsc-footer-bottom">
          <span>© 2026 Trio Dental Center LLC. Dubai Sky Clinic is a brand of Trio Dental Center LLC.</span>
          <span className="dsc-mono">v1.0 — prototype</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Section header helper ---------- */
function DSCSectionHead({ eyebrow, title, link }) {
  return (
    <div className="dsc-section-head">
      <div>
        <div className="dsc-eyebrow" style={{marginBottom: "1rem"}}>{eyebrow}</div>
        <h2 className="dsc-h2 dsc-section-title" style={{textWrap: "balance"}}>{title}</h2>
      </div>
      {link && (
        <a className="dsc-btn-link" href={link.href} onClick={link.onClick}>{link.label} <span style={{marginLeft: 4}}>→</span></a>
      )}
    </div>
  );
}

/* ---------- Treatment card ---------- */
function DSCTreatmentCard({ t, onClick }) {
  return (
    <a className="dsc-treat-card" href={`#/treatments/${t.slug}`} onClick={onClick}>
      <div className="dsc-treat-card-icon"><img src={t.icon} alt="" /></div>
      <div className="dsc-treat-card-name">{t.name}</div>
      <div className="dsc-treat-card-blurb">{t.blurb}</div>
      <div className="dsc-treat-card-cta">{t.category} <span aria-hidden="true">→</span></div>
    </a>
  );
}

/* ---------- Dentist card ---------- */
function DSCDentistCard({ d, onClick }) {
  return (
    <a className="dsc-dent-card" href={`#/dentists/${d.slug}`} onClick={onClick}>
      <div className="dsc-dent-photo">
        <img src={d.photo} alt={d.name} />
        {d.verified && <span className="dsc-dent-verified-badge">Verified credentials</span>}
      </div>
      <div className="dsc-dent-name">{d.name}</div>
      <div className="dsc-dent-role">{d.role}</div>
      <div className="dsc-dent-langs">{(d.languages || []).join(" · ")}</div>
    </a>
  );
}

/* ---------- Tabby strip ---------- */
function DSCTabbyStrip() {
  return (
    <div className="dsc-tabby">
      <img src="media/logos/tabby-payment-logo.webp" alt="Tabby" />
      <div className="dsc-tabby-text">Pay in 4 with <strong>Tabby</strong>. Implants, smile makeovers and aligners are eligible. Subject to Tabby's approval.</div>
    </div>
  );
}

Object.assign(window, {
  DSCNavbar, DSCTrustStrip, DSCHero, DSCMarqueeBlock, DSCWhatsAppFab, DSCMobileCTA,
  DSCFooter, DSCSectionHead, DSCTreatmentCard, DSCDentistCard, DSCTabbyStrip,
});