// ui.jsx — shared components for Version Française Pour Elle
// Logo, buttons, placeholders, trust chip, header, footer, FABs.

const { useState, useEffect, useRef } = React;

// ── Tiny helpers ────────────────────────────────────────────────

function cx(...xs) { return xs.filter(Boolean).join(" "); }

// Pulls localised string from {en, fr} object OR returns string as-is.
function L(value, lang) {
  if (value == null) return "";
  if (typeof value === "string") return value;
  return value[lang] ?? value.en ?? "";
}

// Intersection-observer reveal — class flips on first sight, no flicker.
// Synchronously checks position on mount so above-the-fold content paints
// immediately (the observer alone won't fire until a scroll event nudges it,
// which left every landing view blank under the header).
function Reveal({ children, as: As = "div", className = "", delay = 0, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh * 0.9 && r.bottom > 0) { setSeen(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      className={cx("reveal", seen && "in", className)}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </As>
  );
}

// ── Logo wordmark ───────────────────────────────────────────────

function Logo({ onClick }) {
  return (
    <a
      href="#/"
      className="nav-logo"
      onClick={(e) => { e.preventDefault(); onClick?.(); }}
      aria-label="Version Française Pour Elle — Home"
    >
      <span style={{ display: "inline-flex", alignItems: "baseline", gap: 8 }}>
        <span style={{ fontStyle: "italic", letterSpacing: "-0.005em" }}>Version</span>
        <span style={{ fontWeight: 500, letterSpacing: "-0.005em" }}>Française</span>
      </span>
      <small>· Pour Elle ·</small>
    </a>
  );
}

// ── Eyebrow with gold dot ───────────────────────────────────────

function Eyebrow({ children, align = "left" }) {
  return (
    <div className="eyebrow" style={{ textAlign: align }}>
      <span className="dot" />
      {children}
    </div>
  );
}

// ── Image placeholder ───────────────────────────────────────────

function Placeholder({ caption, tag, tone = "blush", aspect = "4 / 5", style = {}, children }) {
  const toneClass = ({
    blush:  "",
    cream:  "ph-tone-cream",
    rose:   "ph-tone-rose",
    taupe:  "ph-tone-taupe",
    noir:   "ph-tone-noir",
  })[tone] || "";
  return (
    <div className={cx("ph", toneClass)} style={{ aspectRatio: aspect, ...style }}>
      {tag && <div className="ph-tag">{tag}</div>}
      {children}
      {caption && <div className="ph-caption">{caption}</div>}
    </div>
  );
}

// ── Trust chip (5.0 ★ Fresha · 330+) ────────────────────────────

function TrustChip({ lang }) {
  const t = window.VFPE_DATA.t[lang];
  return (
    <span className="chip">
      <span className="stars">★★★★★</span>
      <span className="tabular" style={{ fontWeight: 500 }}>{lang === "fr" ? "5,0" : "5.0"}</span>
      <span className="sep">·</span>
      <span style={{ color: "var(--ink-70)" }}>{lang === "fr" ? "330+ avis · Fresha" : "330+ reviews · Fresha"}</span>
    </span>
  );
}

// ── Buttons ─────────────────────────────────────────────────────

function BookButton({ lang, variant = "primary", size = "md", className = "" }) {
  const t = window.VFPE_DATA.t[lang];
  const cls = cx("btn", `btn-${variant}`, size === "sm" && "btn-sm", className);
  return (
    <a className={cls} href={window.VFPE_DATA.links.fresha} target="_blank" rel="noopener">
      {t.booknow} <span className="arrow">→</span>
    </a>
  );
}

function WhatsAppButton({ lang, variant = "ghost", size = "md" }) {
  const t = window.VFPE_DATA.t[lang];
  return (
    <a className={cx("btn", `btn-${variant}`, size === "sm" && "btn-sm")}
       href={window.VFPE_DATA.links.whatsapp} target="_blank" rel="noopener">
      <WAIcon /> {t.whatsapp}
    </a>
  );
}

function WAIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.2-1.4c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm5.5 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.7-3-1.3-4.9-4.4-5.1-4.6-.1-.2-1.2-1.6-1.2-3.1 0-1.5.8-2.3 1.1-2.5.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5.3.6.9 2.1.9 2.3 0 .1.1.3 0 .5l-.4.6c-.1.2-.3.4-.1.6.1.3.7 1.1 1.4 1.8.9.9 1.7 1.1 1.9 1.2.2.1.4.1.5-.1.2-.2.6-.7.7-1 .1-.3.3-.2.5-.1l1.8.9c.3.1.4.2.5.3.1.2.1.8-.1 1.5z"/>
    </svg>
  );
}

// ── Header / nav ────────────────────────────────────────────────

function Header({ lang, setLang, route, setRoute, accent }) {
  const t = window.VFPE_DATA.t[lang];
  const items = [
    { key: "home",     label: t.home },
    { key: "services", label: t.services },
    { key: "about",    label: t.about },
    { key: "gallery",  label: t.gallery },
    { key: "reviews",  label: t.reviews },
    { key: "contact",  label: t.contact },
  ];
  return (
    <header className="nav">
      <div className="container nav-inner">
        <div style={{ display: "flex", alignItems: "center" }}>
          <Logo onClick={() => setRoute("home")} />
        </div>
        <nav className="nav-links" aria-label="Primary">
          {items.map(it => (
            <a key={it.key}
               href={`#/${it.key}`}
               className={route === it.key ? "active" : ""}
               onClick={(e) => { e.preventDefault(); setRoute(it.key); }}>
              {it.label}
            </a>
          ))}
        </nav>
        <div className="nav-right">
          <LangToggle lang={lang} setLang={setLang} />
          <BookButton lang={lang} variant={accent ? "gold" : "primary"} size="sm" />
        </div>
      </div>
    </header>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
      <button className={lang === "fr" ? "on" : ""} onClick={() => setLang("fr")}>FR</button>
    </div>
  );
}

// ── Footer ──────────────────────────────────────────────────────

function Footer({ lang, setRoute }) {
  const t = window.VFPE_DATA.t[lang];
  const links = window.VFPE_DATA.links;
  return (
    <footer style={{ background: "var(--noir)", color: "var(--cream)", paddingTop: 96, paddingBottom: 32, marginTop: 96 }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 32, rowGap: 56 }}>
        <div style={{ gridColumn: "span 4" }}>
          <div className="display" style={{ fontSize: 30, lineHeight: 1.1 }}>
            <span style={{ fontStyle: "italic" }}>Version</span> Française
          </div>
          <div style={{ fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
                        color: "var(--champagne-gold)", marginTop: 6, marginBottom: 22 }}>
            · Pour Elle ·
          </div>
          <p style={{ color: "rgba(251,248,243,0.65)", fontSize: 14, maxWidth: 38 + "ch", marginTop: 0 }}>
            {lang === "fr"
              ? "Salon de beauté français, exclusivement pour les femmes. Villa privée sur Al Wasl Road, ouverte depuis 2023."
              : "A French beauty salon, exclusively for ladies. Private villa on Al Wasl Road, open since 2023."}
          </p>
        </div>

        <div style={{ gridColumn: "span 3" }}>
          <h5 className="micro" style={{ margin: 0, marginBottom: 16, color: "rgba(251,248,243,0.5)" }}>
            {lang === "fr" ? "Nous trouver" : "Find us"}
          </h5>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: "rgba(251,248,243,0.85)" }}>
            {t.address}
          </p>
          <div style={{ marginTop: 16, height: 1, background: "rgba(194,162,74,0.35)", width: 32 }} />
          <div style={{ marginTop: 16, fontSize: 13, color: "rgba(251,248,243,0.65)" }}>
            {window.VFPE_DATA.hours.map((h, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", gap: 12 }}>
                <span>{L(h.label, lang)}</span>
                <span className="tabular">{h.time}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ gridColumn: "span 3" }}>
          <h5 className="micro" style={{ margin: 0, marginBottom: 16, color: "rgba(251,248,243,0.5)" }}>Contact</h5>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 14, lineHeight: 2 }}>
            <li><a href={links.tel} style={{ color: "var(--cream)" }}>{t.phone}</a></li>
            <li><a href={links.whatsapp} target="_blank" rel="noopener" style={{ color: "rgba(251,248,243,0.75)" }}>WhatsApp · {t.whatsappN}</a></li>
            <li><a href={links.email} style={{ color: "rgba(251,248,243,0.75)" }}>{t.email}</a></li>
            <li><a href={links.ig} target="_blank" rel="noopener" style={{ color: "rgba(251,248,243,0.75)" }}>Instagram</a></li>
            <li><a href={links.fb} target="_blank" rel="noopener" style={{ color: "rgba(251,248,243,0.75)" }}>Facebook</a></li>
          </ul>
        </div>

        <div style={{ gridColumn: "span 2" }}>
          <h5 className="micro" style={{ margin: 0, marginBottom: 16, color: "rgba(251,248,243,0.5)" }}>
            {lang === "fr" ? "Explorer" : "Explore"}
          </h5>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 14, lineHeight: 2 }}>
            {["services","about","gallery","reviews","contact"].map(k => (
              <li key={k}>
                <a href={`#/${k}`} onClick={(e) => { e.preventDefault(); setRoute(k); }}
                   style={{ color: "rgba(251,248,243,0.75)" }}>
                  {t[k]}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div style={{ gridColumn: "span 12", borderTop: "1px solid rgba(194,162,74,0.25)", paddingTop: 24,
                       display: "flex", justifyContent: "space-between", alignItems: "center",
                       color: "rgba(251,248,243,0.45)", fontSize: 12, letterSpacing: "0.08em" }}>
          <span>© 2026 Version Française Pour Elle · Al Wasl Road, Dubai</span>
          <span style={{ letterSpacing: "0.2em", textTransform: "uppercase" }}>{t.ladiesonly}</span>
        </div>
      </div>
    </footer>
  );
}

// ── Mobile bottom bar + FAB ─────────────────────────────────────

function MobileBar({ lang }) {
  const t = window.VFPE_DATA.t[lang];
  const links = window.VFPE_DATA.links;
  return (
    <div className="mbar" role="navigation" aria-label="Quick actions">
      <a href={links.tel}><PhoneIcon /> {t.call}</a>
      <a href={links.whatsapp} target="_blank" rel="noopener"><WAIcon /> WA</a>
      <a className="primary" href={links.fresha} target="_blank" rel="noopener">{t.booknow}</a>
    </div>
  );
}
function PhoneIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}

function WhatsAppFAB() {
  return (
    <a className="wfab" href={window.VFPE_DATA.links.whatsapp} target="_blank" rel="noopener" aria-label="WhatsApp">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
        <path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.2-1.4c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm5.5 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.7-3-1.3-4.9-4.4-5.1-4.6-.1-.2-1.2-1.6-1.2-3.1 0-1.5.8-2.3 1.1-2.5.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5.3.6.9 2.1.9 2.3 0 .1.1.3 0 .5l-.4.6c-.1.2-.3.4-.1.6.1.3.7 1.1 1.4 1.8.9.9 1.7 1.1 1.9 1.2.2.1.4.1.5-.1.2-.2.6-.7.7-1 .1-.3.3-.2.5-.1l1.8.9c.3.1.4.2.5.3.1.2.1.8-.1 1.5z"/>
      </svg>
    </a>
  );
}

Object.assign(window, {
  cx, L, Reveal, Logo, Eyebrow, Placeholder, TrustChip,
  BookButton, WhatsAppButton, Header, Footer, MobileBar, WhatsAppFAB,
});