// Shared chrome — Nav, Footer, language toggle, mobile menu

// ─── SITE CONFIG ───────────────────────────────────────────────────────────────────
// Edit these three values to change every CTA / contact link on the site.
// `whatsapp` = country code + number, no '+' and no spaces (e.g. "33612345678" for FR +33 6 12 34 56 78).
const SITE = {
  calendly: "https://calendly.com/isekaibrand/30-minute-meeting-clone",
  whatsapp: "33611287763", // ← REPLACE with your real number (digits only, country code first)
  email:    "onerebirth5@gmail.com",
};
// ─────────────────────────────────────────────────────────────────────────────────────────────
window.SITE = SITE;

const { useState, useEffect, useCallback } = React;

// localStorage-backed language state, shared via custom event
function useLang() {
  const [lang, setLang] = useState(() => {
    try {
      const saved = localStorage.getItem("resminos.lang");
      if (saved) return saved;
      const nav = navigator.language || "en";
      return nav.startsWith("fr") ? "fr" : "en";
    } catch (e) { return "en"; }
  });
  useEffect(() => {
    try { localStorage.setItem("resminos.lang", lang); } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);
  const t = window.I18N[lang];
  return [lang, setLang, t];
}

// SVG icons
const I = {
  check: () => (
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <circle cx="10" cy="10" r="9" fill="currentColor" opacity=".14"/>
      <path d="M6 10.5l2.6 2.6L14 7.6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  spark: () => (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M8 1.5l1.6 4.4 4.4 1.6-4.4 1.6L8 13.5 6.4 9.1 2 7.5l4.4-1.6L8 1.5z" fill="currentColor"/>
    </svg>
  ),
  arrow: () => (
    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  chat: () => (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2C6.5 2 2 5.9 2 10.7c0 2.4 1.2 4.6 3.1 6.2L4 22l5.4-2.5c.8.2 1.7.3 2.6.3 5.5 0 10-3.9 10-8.6S17.5 2 12 2z"/>
    </svg>
  ),
  whatsapp: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.3 0-.5-.1-.1-.6-1.5-.9-2-.2-.5-.5-.4-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.6-.4z M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.1-1.4c1.5.8 3.2 1.3 4.9 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  ),
  telegram: () => null,
  email: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="m3 7 9 6 9-6"/>
    </svg>
  ),
  menu: () => (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <path d="M3 6h14M3 10h14M3 14h14"/>
    </svg>
  ),
  close: () => (
    <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <path d="M5 5l10 10M15 5L5 15"/>
    </svg>
  ),
  zap: () => (
    <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18" aria-hidden="true">
      <path d="M11 1 3 12h6l-1 7 8-11h-6l1-7z"/>
    </svg>
  ),
};

// ─── Nav ───────────────────────────────────────────────────────────────
function Nav({ lang, setLang, t, page = "home" }) {
  const [menu, setMenu] = useState(false);
  // Close mobile menu on resize up
  useEffect(() => {
    const onR = () => { if (window.innerWidth > 1020) setMenu(false); };
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);

  return (
    <>
      <div className="nav-wrap">
        <nav className="nav glass-strong">
          <a href="index.html" className="nav-logo">
            <span className="nav-logo-mark">
              <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path fill="white" fillRule="evenodd" d="M8 7h14c4.4 0 8 3.5 8 7.8 0 3.3-2 6.1-5 7.2L31 33h-6.5l-5.8-9.6H14V33H8V7zm6 5v6.5h7.5c1.7 0 3-1.5 3-3.3 0-1.8-1.3-3.2-3-3.2H14z" />
              </svg>
            </span>
            <span className="nav-logo-text">Resminos</span>
          </a>

          {page === "home" && (
            <div className="nav-links">
              <a className="nav-link" href="#how">{t.nav.how}</a>
              <a className="nav-link" href="#pricing">{t.nav.pricing}</a>
              <a className="nav-link" href="#work">{t.nav.work}</a>
              <a className="nav-link" href="#faq">{t.nav.faq}</a>
            </div>
          )}
          {page === "creators" && (
            <div className="nav-links">
              <a className="nav-link" href="index.html">{lang === "fr" ? "Accueil" : "Home"}</a>
              <a className="nav-link" href="#cr-how">{t.nav.how}</a>
              <a className="nav-link" href="#cr-pricing">{t.nav.pricing}</a>
            </div>
          )}

          <div className="nav-spacer"></div>

          <LangToggle lang={lang} setLang={setLang} />

          {/* For Creators — placed after the EN/FR toggle per spec.
              label-full / label-short are CSS-toggled at <=1020px (see styles.css). */}
          <a className="nav-creators" href={page === "creators" ? "#" : "creators.html"}>
            <span className="dot"></span>
            <span className="label-full">{t.nav.creators}</span>
            <span className="label-short">{lang === "fr" ? "Créateurs" : "Creators"}</span>
          </a>

          <a className="nav-cta" href={SITE.calendly} target="_blank" rel="noreferrer">
            <I.zap />
            {t.nav.cta}
          </a>

          <button className="nav-burger" onClick={() => setMenu(!menu)} aria-label="Toggle menu">
            {menu ? <I.close /> : <I.menu />}
          </button>
        </nav>
      </div>

      {menu && (
        <div className="mobile-menu glass-strong">
          {page === "home" ? (
            <>
              <a href="#how" onClick={() => setMenu(false)}>{t.nav.how}</a>
              <a href="#pricing" onClick={() => setMenu(false)}>{t.nav.pricing}</a>
              <a href="#work" onClick={() => setMenu(false)}>{t.nav.work}</a>
              <a href="#faq" onClick={() => setMenu(false)}>{t.nav.faq}</a>
              <a href="creators.html">{t.nav.creators}</a>
            </>
          ) : (
            <>
              <a href="index.html">{lang === "fr" ? "Accueil" : "Home"}</a>
              <a href="#cr-how" onClick={() => setMenu(false)}>{t.nav.how}</a>
              <a href="#cr-pricing" onClick={() => setMenu(false)}>{t.nav.pricing}</a>
            </>
          )}
          <a className="cta" href={SITE.calendly} target="_blank" rel="noreferrer" onClick={() => setMenu(false)}>{t.nav.cta}</a>
        </div>
      )}
    </>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-pill" role="tablist" aria-label="Language">
      <button data-active={lang === "en"} onClick={() => setLang("en")}>EN</button>
      <button data-active={lang === "fr"} onClick={() => setLang("fr")}>FR</button>
    </div>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-row">
          <span>{t.footer.copy}</span>
          <div className="footer-links">
            {t.footer.links.map((l, i) => <a key={i} href="#">{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

// Reusable contact block
function ContactBlock({ t }) {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="contact-card">
          <span className="kicker" style={{color: "rgba(255,255,255,.7)"}}>{t.contact.kicker}</span>
          <h2 className="h2">
            {t.contact.title[0]}<em>{t.contact.title[1]}</em>{t.contact.title[2]}
          </h2>
          <p className="lead">{t.contact.lead}</p>
          <div className="contact-channels">
            <a className="calendly" href={SITE.calendly} target="_blank" rel="noreferrer">
              <I.zap /> {t.contact.calendly}
            </a>
            <a className="whatsapp" href={`https://wa.me/${SITE.whatsapp}`} target="_blank" rel="noreferrer">
              <I.whatsapp /> {t.contact.whatsapp}
            </a>
            <a className="email" href={`mailto:${SITE.email}`}>
              <I.email /> {t.contact.email}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Background layer driver
function BackgroundLayer({ kind }) {
  const cls = `bg-layer bg-${kind}`;
  return <div className={cls} aria-hidden="true"></div>;
}

// Scroll-reveal wrapper. Adds .in once visible, disconnects observer.
// Pass stagger to fade children one by one.
function Reveal({ children, className = "", stagger = false, as = "div", threshold = 0.15, ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === "undefined") {
      // No observer support — reveal immediately
      el && el.classList.add("in");
      return;
    }
    // If already in view at mount, reveal without waiting.
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      el.classList.add("in");
      return;
    }
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      }),
      { threshold, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  const Tag = as;
  const base = stagger ? "reveal-stagger" : "reveal";
  return <Tag ref={ref} className={`${base} ${className}`.trim()} {...rest}>{children}</Tag>;
}

// Apply theme/glass tweaks to :root
function applyTheme(t) {
  const r = document.documentElement;
  document.body.dataset.theme = t.theme;
  if (t.display) document.body.dataset.display = t.display;
  // Accent
  r.style.setProperty("--accent", t.accent);
  // Derive a glow / soft using accent
  const hex = t.accent.replace("#", "");
  const rr = parseInt(hex.slice(0,2),16), gg = parseInt(hex.slice(2,4),16), bb = parseInt(hex.slice(4,6),16);
  r.style.setProperty("--accent-soft", `rgba(${rr},${gg},${bb},.08)`);
  r.style.setProperty("--accent-glow", `rgba(${rr},${gg},${bb},.35)`);
  // CTA shadow
  r.style.setProperty("--shadow-cta", `0 8px 24px rgba(${rr},${gg},${bb},.32), 0 1px 0 rgba(255,255,255,.4) inset`);
  // Glass intensity
  const intensity = t.glass; // 1-3
  const blur = ({1:10, 2:18, 3:30}[intensity] || 18);
  const sat = ({1:140, 2:160, 3:180}[intensity] || 160);
  const bg = ({1:.42, 2:.55, 3:.72}[intensity] || .55);
  const bgStrong = ({1:.62, 2:.72, 3:.88}[intensity] || .72);
  r.style.setProperty("--glass-blur", blur + "px");
  r.style.setProperty("--glass-sat", sat + "%");
  if (t.theme === "light") {
    r.style.setProperty("--glass-bg", `rgba(255,255,255,${bg})`);
    r.style.setProperty("--glass-bg-strong", `rgba(255,255,255,${bgStrong})`);
  } else {
    r.style.setProperty("--glass-bg", `rgba(255,255,255,${0.03 + intensity*0.02})`);
    r.style.setProperty("--glass-bg-strong", `rgba(255,255,255,${0.06 + intensity*0.03})`);
  }
}

// Sticky floating WhatsApp button — bottom-right, expandable
function StickyContact({ lang, t, phone }) {
  const num = phone || SITE.whatsapp;
  const msg = encodeURIComponent(t.contact.sticky_msg);
  const href = `https://wa.me/${num}?text=${msg}`;
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      className="sticky-contact"
      aria-label={t.contact.sticky_label}
    >
      <span className="sticky-contact-icon"><I.chat /></span>
      <span className="sticky-contact-label">{t.contact.sticky_label}</span>
    </a>
  );
}

Object.assign(window, { useLang, Nav, Footer, ContactBlock, BackgroundLayer, applyTheme, Reveal, StickyContact, I });