/* JAM — shared components: Nav, Footer, Logo, Lotus, ConsentNote, etc. */

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

// Logo — small isometric heart mark + wordmark, redrawn original (per brief: brand redraw OK,
// client to replace with true vector). Not copying the actual company logo file directly into nav;
// using a tasteful interpretation.
function JamLogo({ size = 30, tag = true, light = false }) {
  const ink = light ? "#FBF6F2" : "var(--text)";
  const muted = light ? "rgba(251,246,242,0.6)" : "var(--muted)";
  const accent = "var(--primary)";
  return (
    <a href="#/" className="logo" style={{ color: ink, fontSize: size }}>
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ display: "inline-flex", alignItems: "baseline" }}>
          {/* tiny lotus mark before wordmark */}
          <svg width={size * 0.86} height={size * 0.86} viewBox="0 0 32 32" style={{ marginRight: 6, transform: "translateY(2px)" }}>
            <g fill="none" stroke={accent} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M16 6 C 12 12, 12 18, 16 26 C 20 18, 20 12, 16 6 Z" />
              <path d="M6 16 C 11 14, 14 18, 16 26 C 12 22, 8 21, 6 16 Z" />
              <path d="M26 16 C 21 14, 18 18, 16 26 C 20 22, 24 21, 26 16 Z" />
            </g>
          </svg>
          <span>Jam<span className="dot">.</span></span>
        </span>
        {tag && (
          <span className="logo-tag" style={{ color: muted }}>Weddings · Events · Entertainment</span>
        )}
      </span>
    </a>
  );
}

function Lotus({ size = 22, color = "var(--accent)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32">
      <g fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M16 6 C 12 12, 12 18, 16 26 C 20 18, 20 12, 16 6 Z" />
        <path d="M6 16 C 11 14, 14 18, 16 26 C 12 22, 8 21, 6 16 Z" />
        <path d="M26 16 C 21 14, 18 18, 16 26 C 20 22, 24 21, 26 16 Z" />
        <path d="M2 19 C 8 17, 12 19, 16 26 C 12 24, 6 24, 2 19 Z" />
        <path d="M30 19 C 24 17, 20 19, 16 26 C 20 24, 26 24, 30 19 Z" />
      </g>
    </svg>
  );
}

function LotusDivider({ width = "100%" }) {
  return (
    <div className="lotus-div" style={{ width }}>
      <span className="line"></span>
      <Lotus size={20} />
      <span className="line"></span>
    </div>
  );
}

function ConsentNote({ text = "Consent + photographer credit gated — demo imagery" }) {
  return <span className="consent-note">{text}</span>;
}

function Nav({ route, setRoute, locale, setLocale }) {
  const links = [
    { id: "real-weddings", label: "Real Weddings" },
    { id: "services",      label: "Services" },
    { id: "venues",        label: "Venues" },
    { id: "about",         label: "About" },
    { id: "testimonials",  label: "Stories" },
    { id: "contact",       label: "Contact" }
  ];
  const locales = ["EN", "AR", "DE", "RU", "ZH"];
  return (
    <header className="nav">
      <div className="nav-inner">
        <JamLogo />
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <a key={l.id}
               href={`#/${l.id}`}
               className={`nav-link ${route.startsWith(l.id) ? "active" : ""}`}
               onClick={() => setRoute(l.id)}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-right">
          <div className="locale-toggle" role="group" aria-label="Language">
            {locales.map(l => (
              <button key={l} className={l === locale ? "on" : ""} onClick={() => setLocale(l)}>
                {l}
              </button>
            ))}
          </div>
          <a href="#/contact"
             className="nav-cta"
             onClick={() => setRoute("contact")}>Book a consultation</a>
        </div>
      </div>
    </header>
  );
}

function Footer({ setRoute }) {
  const b = window.JAM.brand;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <JamLogo size={32} light={true} />
            <p className="smol" style={{ marginTop: 24, maxWidth: "44ch" }}>
              Luxury wedding planning, production and design — under German creative direction, multicultural by default, based in Dubai and serving destinations worldwide.
            </p>
            <p className="smol meta" style={{ marginTop: 18 }}>{b.sinceCompany} · Dubai, UAE</p>
          </div>
          <div>
            <h4>Visit</h4>
            <p className="smol">
              {b.addressLine1}<br/>
              {b.addressLine2}<br/>
              {b.addressPO}
            </p>
          </div>
          <div>
            <h4>Reach us</h4>
            <p className="smol">
              <a href={b.whatsapp}>WhatsApp · {b.phoneMobile}</a><br/>
              <a href={`tel:${b.phoneOffice.replace(/\s/g,'')}`}>Office · {b.phoneOffice}</a><br/>
              <a href={`mailto:${b.email}`}>{b.email}</a>
            </p>
          </div>
          <div>
            <h4>Follow</h4>
            <p className="smol">
              <a href="#">Instagram · @jam_weddingplanner</a><br/>
              <a href="#">Facebook · jamuaedubai</a><br/>
              <a href="#">YouTube</a><br/>
              <a href="#">Vimeo · jamwedding</a>
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Jam Wedding Planner</span>
          <span>Privacy · Imprint · Sitemap</span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFAB() {
  const b = window.JAM.brand;
  return (
    <a className="fab" href={b.whatsapp} aria-label="Chat on WhatsApp" target="_blank" rel="noopener">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12.04 2C6.55 2 2.13 6.41 2.13 11.9c0 2.1.66 4.03 1.78 5.62L2 22l4.65-1.22a9.86 9.86 0 0 0 5.39 1.6h.01c5.48 0 9.91-4.4 9.91-9.9 0-2.64-1.03-5.13-2.9-7.01A9.84 9.84 0 0 0 12.04 2zm0 18.06h-.01a8.16 8.16 0 0 1-4.16-1.14l-.3-.18-2.76.72.74-2.7-.2-.31a8.16 8.16 0 1 1 15.13-4.43c0 4.5-3.66 8.04-8.44 8.04zm4.65-5.99c-.25-.13-1.5-.74-1.74-.82-.23-.09-.4-.13-.57.13-.17.25-.65.82-.79.99-.15.17-.29.19-.54.06-.25-.13-1.07-.39-2.04-1.25-.75-.67-1.26-1.49-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.08-.17.04-.32-.02-.45-.06-.13-.57-1.37-.78-1.88-.21-.5-.41-.43-.57-.44h-.49c-.17 0-.45.06-.69.32-.23.25-.9.88-.9 2.15s.92 2.49 1.05 2.66c.13.17 1.82 2.77 4.41 3.89.62.27 1.1.43 1.47.55.62.2 1.18.17 1.62.1.5-.08 1.5-.61 1.71-1.2.21-.59.21-1.09.15-1.2-.06-.11-.23-.17-.48-.3z" />
      </svg>
    </a>
  );
}

function Lightbox({ images, index, onClose, onPrev, onNext }) {
  useEffect(() => {
    const k = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNext();
      if (e.key === "ArrowLeft") onPrev();
    };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [onClose, onPrev, onNext]);

  if (index == null) return null;
  const img = images[index];
  return (
    <div className="lb-back" onClick={onClose}>
      <button className="lb-nav lb-prev" onClick={(e)=>{e.stopPropagation(); onPrev();}}>←</button>
      <img className="lb-img" src={img.src} alt="" onClick={(e)=>e.stopPropagation()} />
      <button className="lb-nav lb-next" onClick={(e)=>{e.stopPropagation(); onNext();}}>→</button>
      <button className="lb-close" onClick={onClose}>Close · Esc</button>
      <div className="lb-credit">{index+1} / {images.length} &nbsp;·&nbsp; Photography credit gated — client to confirm</div>
    </div>
  );
}

Object.assign(window, { JamLogo, Lotus, LotusDivider, ConsentNote, Nav, Footer, WhatsAppFAB, Lightbox });