// ============================================================
// components.jsx — Shared components
// ============================================================

const { useState, useEffect, useRef } = React;

// Original geometric sun motif — not the existing logo, our own interpretation
function SunMark({ size = 36, color = "#B8975A", strokeColor }) {
  const stroke = strokeColor || color;
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none" aria-hidden="true">
      <circle cx="18" cy="18" r="6" stroke={stroke} strokeWidth="1" fill="none" />
      <circle cx="18" cy="18" r="2" fill={color} />
      {/* 16 rays */}
      {Array.from({ length: 16 }).map((_, i) => {
        const a = (i / 16) * Math.PI * 2;
        const x1 = 18 + Math.cos(a) * 9;
        const y1 = 18 + Math.sin(a) * 9;
        const x2 = 18 + Math.cos(a) * (i % 2 === 0 ? 16 : 13);
        const y2 = 18 + Math.sin(a) * (i % 2 === 0 ? 16 : 13);
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={stroke} strokeWidth="0.9" strokeLinecap="round" />;
      })}
    </svg>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ============================================================
// Nav
// ============================================================
function Nav({ route, go, locale, setLocale }) {
  const [mobileOpen, setMobileOpen] = useState(false);

  const links = [
    { id: "treatments", label: "Treatments" },
    { id: "dentists", label: "Our Dentists" },
    { id: "about", label: "About" },
    { id: "gallery", label: "Smile Gallery" },
    { id: "tourism", label: "Dental Tourism" },
    { id: "contact", label: "Contact" }
  ];

  return (
    <React.Fragment>
      <header className="nav">
        <div className="wrap nav-row">
          <a className="nav-logo" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>
            <SunMark size={36} />
            <div className="word">
              <b>Versailles</b>
              <span className="sub">Dental Clinic · Dubai</span>
            </div>
          </a>

          <nav className="nav-links" aria-label="Main">
            {links.map((l) => (
              <a key={l.id} href="#" className={`nav-link ${route.page === l.id ? "active" : ""}`}
                onClick={(e) => { e.preventDefault(); go(l.id); }}>
                {l.label}
              </a>
            ))}
          </nav>

          <div className="nav-cta">
            <div className="nav-locale">
              <button className={locale === "en" ? "on" : ""} onClick={() => setLocale("en")}>EN</button>
              <span className="sep">/</span>
              <button className={locale === "ar" ? "on" : ""} onClick={() => setLocale("ar")}>AR</button>
            </div>
            <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); go("book"); }}>
              Book a Consultation
            </a>
            <button className="nav-burger" aria-label="Menu" onClick={() => setMobileOpen(true)}>
              <span></span>
            </button>
          </div>
        </div>
      </header>

      <div className={`nav-mobile ${mobileOpen ? "open" : ""}`}>
        <div className="nav-mobile-top">
          <div className="nav-logo">
            <SunMark size={32} />
            <div className="word">
              <b>Versailles</b>
              <span className="sub">Dental Clinic · Dubai</span>
            </div>
          </div>
          <button className="nav-burger" aria-label="Close menu" onClick={() => setMobileOpen(false)}>
            <span style={{ transform: "rotate(45deg)" }}></span>
          </button>
        </div>
        <div className="nav-mobile-list">
          <a href="#" onClick={(e) => { e.preventDefault(); go("home"); setMobileOpen(false); }}>Home</a>
          {links.map((l) => (
            <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); go(l.id); setMobileOpen(false); }}>
              {l.label}
            </a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); go("book"); setMobileOpen(false); }}>
            Book a Consultation
          </a>
        </div>
      </div>
    </React.Fragment>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer({ go }) {
  const { TREATMENTS, DENTISTS } = window.__VDC_DATA__;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <SunMark size={40} color="#D9C7A3" strokeColor="#D9C7A3" />
              <div>
                <div className="word">Versailles</div>
                <div className="sub">Dental Clinic · Dubai</div>
              </div>
            </div>
            <p>French-heritage dentistry in Dubai Healthcare City — gentle, precise, ethical care since 2007.</p>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-soft)", marginTop: 24 }}>
              DHA licence [client to supply]
            </p>
          </div>

          <div>
            <h4>Treatments</h4>
            <ul>
              {TREATMENTS.slice(0, 6).map((t) => (
                <li key={t.slug}>
                  <a href="#" onClick={(e) => { e.preventDefault(); go("treatment", { slug: t.slug }); }}>{t.name}</a>
                </li>
              ))}
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("treatments"); }}>All Treatments →</a></li>
            </ul>
          </div>

          <div>
            <h4>Practice</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("about"); }}>About & Founder</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("dentists"); }}>Our Dentists</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("gallery"); }}>Smile Gallery</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("tourism"); }}>Dental Tourism</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go("contact"); }}>Contact</a></li>
            </ul>
          </div>

          <div>
            <h4>Visit</h4>
            <ul>
              <li>Al Razi Medical Complex 64,<br />Block A, 1st Floor, Suite 1006,<br />Dubai Healthcare City</li>
              <li><a href="tel:+97144298288">+971 4 429 8288</a></li>
              <li><a href="mailto:info@versaillesdentalclinic.com">info@versaillesdentalclinic.com</a></li>
              <li style={{ marginTop: 8 }}>Mon–Sat · 09:00–18:00</li>
            </ul>
          </div>
        </div>

        <div className="footer-legal">
          <span>© 2026 Versailles Dental Clinic FZ-LLC</span>
          <span>Privacy · Cookies · DHA Notice</span>
          <span>Site by [agency]</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// Mobile bottom bar
// ============================================================
function MobileBar({ go }) {
  return (
    <div className="mobile-bar">
      <div className="mobile-bar-row">
        <a href="tel:+97144298288">
          <span>Call</span>
          <span style={{ fontSize: 9, opacity: 0.7 }}>+971 4 429 8288</span>
        </a>
        <a href="#" onClick={(e) => { e.preventDefault(); go("contact"); }}>
          <span>WhatsApp</span>
          <span style={{ fontSize: 9, opacity: 0.7 }}>To be confirmed</span>
        </a>
        <a href="#" className="book" onClick={(e) => { e.preventDefault(); go("book"); }}>
          <span>Book</span>
          <span style={{ fontSize: 9, opacity: 0.8 }}>Consultation</span>
        </a>
      </div>
    </div>
  );
}

// ============================================================
// Section header (numbered, editorial)
// ============================================================
function SectionHead({ num, title, meta }) {
  return (
    <div className="section-head">
      <div className="num">{num}</div>
      <h2 className="title">{title}</h2>
      <div className="meta">{meta}</div>
    </div>
  );
}

// ============================================================
// Trust strip
// ============================================================
function TrustStrip() {
  const items = [
    { k: "Est. 2007", v: "Dubai Healthcare City" },
    { k: "French heritage", v: "Founder-led practice" },
    { k: <span>~<em>4.9</em>★</span>, v: "Google — 300+ reviews · re-verify" },
    { k: "DHA-licensed", v: "Licence [client to supply]" },
    { k: "EN · FR · AR · ZH", v: "Multilingual care" }
  ];
  return (
    <div className="trust">
      <div className="wrap trust-row">
        {items.map((it, i) => (
          <div className="trust-item" key={i}>
            <div className="k">{it.k}</div>
            <div className="v">{it.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// CTA Band
// ============================================================
function CTABand({ go }) {
  return (
    <section className="cta-band">
      <div className="cta-bg" aria-hidden="true">
        <img src="media/home-section-5.webp" alt="" />
      </div>
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div className="eyebrow" style={{ color: "var(--gold-soft)", justifyContent: "center" }}>Bonjour — welcome</div>
        <h2 style={{ marginTop: 20 }}>Begin with a <em>consultation</em>.<br />The rest will follow.</h2>
        <p className="sub">A first visit at Versailles is unhurried — examination, photographs and a written plan, before any treatment is agreed.</p>
        <div className="btns">
          <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); go("book"); }}>
            Book a Consultation
          </a>
          <a className="btn btn-ghost" href="tel:+97144298288">
            Call +971 4 429 8288
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Toast (small confirmation popups)
// ============================================================
function useToast() {
  const [msg, setMsg] = useState(null);
  useEffect(() => {
    if (!msg) return;
    const t = setTimeout(() => setMsg(null), 2400);
    return () => clearTimeout(t);
  }, [msg]);
  return [msg, setMsg];
}

Object.assign(window, {
  SunMark, ArrowRight, Nav, Footer, MobileBar, SectionHead, TrustStrip, CTABand, useToast
});
