/* eslint-disable */
/* Vivaah Weddings — shared site components.
   Loaded with <script type="text/babel" src="assets/site.jsx"></script>
   Exports to window: Wordmark, Nav, Footer, WhatsAppFab, useScroll, useTweakSync */

const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } = React;

/* ------------------------------------------------------------
   Wordmark — V I V A A H + optional script accent
------------------------------------------------------------ */
function Wordmark({ size = 24, script = true, sub = "Destination Weddings", color }) {
  return (
    <span className="wordmark" style={{ color }}>
      {script ? (
        <span className="mark-script" style={{ fontSize: size * 1.6, color: 'var(--accent)' }}>Vivaah</span>
      ) : (
        <span className="mark" style={{ fontSize: size }}>VIVAAH</span>
      )}
      {sub ? <span className="sub">{sub}</span> : null}
    </span>
  );
}

/* ------------------------------------------------------------
   Nav
------------------------------------------------------------ */
function Nav({ active = "home", variant = "paper", scriptMark = true }) {
  const [scrolled, setScrolled] = useState(false);
  const [lang, setLang] = useState(() => document.documentElement.getAttribute('dir') === 'rtl' ? 'ar' : 'en');

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const toggleLang = () => {
    const next = lang === 'en' ? 'ar' : 'en';
    setLang(next);
    document.documentElement.setAttribute('dir', next === 'ar' ? 'rtl' : 'ltr');
    document.documentElement.setAttribute('lang', next);
  };

  const items = [
    { id: 'home', label: 'Home', href: 'Home.html' },
    { id: 'real-weddings', label: 'Real Weddings', href: 'Real Weddings.html' },
    { id: 'services', label: 'Services', href: 'Home.html#services', secondary: true },
    { id: 'destinations', label: 'Destinations', href: 'Home.html#destinations', secondary: true },
    { id: 'about', label: 'About', href: 'Home.html#about', secondary: true },
    { id: 'contact', label: 'Contact', href: 'Contact.html' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''} ${variant === 'noir' ? 'on-noir on-dark' : ''}`}>
      <a href="Home.html" aria-label="Vivaah Weddings home">
        <Wordmark script={scriptMark} sub="Destination Weddings" />
      </a>
      <div className="nav-links">
        {items.map(it => (
          <a key={it.id} href={it.href} className={active === it.id ? 'active' : ''} data-secondary={it.secondary ? '' : undefined}>{it.label}</a>
        ))}
      </div>
      <div className="nav-right">
        <button className="lang" onClick={toggleLang} aria-label="Toggle language">
          <span className={lang === 'en' ? 'on' : ''}>EN</span>
          <span className="sep">/</span>
          <span className={lang === 'ar' ? 'on' : ''}>AR</span>
        </button>
        <a className="btn btn-primary" href="Contact.html">Enquire <span className="arr">→</span></a>
      </div>
    </nav>
  );
}

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */
function Footer() {
  return (
    <footer className="foot on-dark">
      <div className="container-wide">
        <div className="grid">
          <div>
            <Wordmark sub="Est. Dubai" />
            <p className="body-s" style={{ marginTop: 18, maxWidth: 320, color: 'rgba(255,255,255,0.65)' }}>
              Luxury destination wedding planning &amp; design. Dubai-based, with celebrations crafted across
              26&nbsp;countries.
            </p>
            <div style={{ marginTop: 18, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <a className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 11 }} href="https://wa.me/971501610923">WhatsApp</a>
              <a className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 11 }} href="tel:+97150161 0923">Call</a>
            </div>
          </div>
          <div>
            <h5>Plan</h5>
            <ul>
              <li><a href="Contact.html">Enquire</a></li>
              <li><a href="Contact.html#consultation">Book a consultation</a></li>
              <li><a href="Contact.html#availability">Check date availability</a></li>
              <li><a href="Home.html#services">Services</a></li>
            </ul>
          </div>
          <div>
            <h5>Discover</h5>
            <ul>
              <li><a href="Real Weddings.html">Real weddings</a></li>
              <li><a href="Home.html#destinations">Destinations</a></li>
              <li><a href="Home.html#about">About</a></li>
              <li><a href="Home.html#press">Press &amp; awards</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li>Dubai, UAE</li>
              <li><a href="tel:+971501610923">+971&nbsp;50&nbsp;161&nbsp;0923</a></li>
              <li><a href="tel:+97145141200">+971&nbsp;4&nbsp;51&nbsp;41&nbsp;200</a></li>
              <li><a href="mailto:info@vivaah.ae">info@vivaah.ae</a></li>
            </ul>
            <h5 style={{ marginTop: 24 }}>For</h5>
            <ul>
              <li><a href="mailto:vendors@vivaah.ae">vendors@vivaah.ae</a></li>
              <li><a href="mailto:performers@vivaah.ae">performers@vivaah.ae</a></li>
              <li><a href="mailto:careers@vivaah.ae">careers@vivaah.ae</a></li>
              <li><a href="mailto:pr@vivaah.ae">pr@vivaah.ae</a></li>
            </ul>
          </div>
          <div>
            <h5>Follow</h5>
            <ul>
              <li><a href="#" aria-label="Instagram">Instagram</a> <span className="body-s" style={{ color: 'rgba(255,255,255,0.4)' }}>@weddingsbyvivaah</span></li>
              <li><a href="#" aria-label="Facebook">Facebook</a></li>
              <li><a href="#" aria-label="Pinterest">Pinterest</a></li>
              <li><a href="#" aria-label="Vimeo">Vimeo</a></li>
              <li><a href="#" aria-label="LinkedIn">LinkedIn — Arun Bablani</a></li>
            </ul>
          </div>
        </div>
        <div className="lock">
          <span>© {new Date().getFullYear()} Vivaah Weddings · Dubai</span>
          <span style={{ display: 'inline-flex', gap: 18 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Sitemap</a>
          </span>
          <span>Designed with discretion · Photography by consent</span>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------------------------------------------
   WhatsApp FAB
------------------------------------------------------------ */
function WhatsAppFab() {
  return (
    <a
      className="wa-fab ltr-only"
      href="https://wa.me/971501610923?text=Hi%20Vivaah%20Weddings%2C%20we%27d%20like%20to%20enquire%20about%20planning%20our%20wedding..."
      target="_blank" rel="noopener"
      aria-label="WhatsApp Vivaah Weddings"
    >
      <span className="ic" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="#25D366" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.04 2C6.6 2 2.18 6.42 2.18 11.86c0 1.94.55 3.77 1.51 5.32L2 22l4.96-1.62a9.85 9.85 0 0 0 5.08 1.4h.01c5.44 0 9.86-4.42 9.86-9.86 0-2.63-1.03-5.1-2.89-6.96A9.79 9.79 0 0 0 12.04 2zm0 1.66c2.18 0 4.23.85 5.78 2.39a8.16 8.16 0 0 1 2.4 5.81c0 4.52-3.67 8.2-8.18 8.2-1.48 0-2.92-.39-4.18-1.13l-.3-.18-3.01.99 1-2.95-.2-.31a8.16 8.16 0 0 1-1.25-4.62c0-4.52 3.67-8.2 8.18-8.2zm-3.86 4.4c-.18 0-.48.07-.74.36-.25.29-.97.95-.97 2.32 0 1.37.99 2.69 1.13 2.87.14.18 1.94 3.1 4.81 4.21 2.39.93 2.88.74 3.4.7.52-.05 1.69-.69 1.93-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.53-.32-.28-.14-1.69-.83-1.95-.93-.26-.1-.45-.14-.64.14-.18.29-.74.93-.91 1.12-.17.19-.34.21-.62.07-.28-.14-1.19-.44-2.27-1.4-.84-.75-1.4-1.67-1.57-1.96-.17-.29-.02-.45.12-.59.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.07-.14-.62-1.55-.86-2.12-.22-.55-.46-.48-.62-.49-.16-.01-.34-.01-.53-.01z"/>
        </svg>
      </span>
      WhatsApp
    </a>
  );
}

/* ------------------------------------------------------------
   Stars row (decorative)
------------------------------------------------------------ */
function Stars({ count = 5 }) {
  return (
    <span className="stars" aria-label={`${count} of 5`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} viewBox="0 0 12 12" fill={i < count ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1">
          <path d="M6 1l1.6 3.2 3.4.5-2.5 2.4.6 3.4L6 8.9 2.9 10.5l.6-3.4L1 4.7l3.4-.5L6 1z" />
        </svg>
      ))}
    </span>
  );
}

/* ------------------------------------------------------------
   Tweaks sync helper — applies stored tweak values to CSS vars / DOM
------------------------------------------------------------ */
function applyTweaks(t) {
  const r = document.documentElement;
  const accent = (Array.isArray(t.accent) ? t.accent[0] : t.accent) || '#B08D57';
  const accentInk = (Array.isArray(t.accent) ? t.accent[1] : t.accentInk) || accent;
  r.style.setProperty('--accent', accent);
  r.style.setProperty('--accent-ink', accentInk);
  if (t.display) {
    const map = {
      'Cormorant': "'Cormorant Garamond', serif",
      'Playfair': "'Playfair Display', serif",
      'Italiana': "'Italiana', serif",
    };
    r.style.setProperty('--display', map[t.display] || map.Cormorant);
  }
  if (t.density) r.setAttribute('data-density', t.density);
  if (typeof t.lang === 'string') {
    r.setAttribute('dir', t.lang === 'ar' ? 'rtl' : 'ltr');
    r.setAttribute('lang', t.lang);
  }
  // hero treatment broadcast
  document.querySelectorAll('[data-hero]').forEach(el => {
    if (t.hero) el.setAttribute('data-treatment', t.hero);
  });
}

/* Expose to global */
Object.assign(window, { Wordmark, Nav, Footer, WhatsAppFab, Stars, applyTweaks });