/* Site chrome + helpers for the Camille Bardiau UI kit. */
(function () {
  const { Button, IconButton } = window.CamilleBardiauDesignSystem_92b58f;
  const D = window.CB_DATA;
  const Icon = (n, props = {}) => React.createElement("i", { "data-lucide": n, ...props });

  /* --- Top navigation --- */
  function Nav({ current, onNavigate }) {
    const [open, setOpen] = React.useState(false);
    return (
      <header style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(251,248,243,.88)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "8px var(--gutter)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
          <button onClick={() => onNavigate("home")} style={{ display: "flex", alignItems: "center", gap: 12, background: "none", border: "none", cursor: "pointer", overflow: "visible", padding: "2px 0" }}>
            <img src="/assets/logo-monogram.png" alt="" style={{ height: 52, width: "auto", display: "block", objectFit: "contain" }} />
            <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.15, textAlign: "left" }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", color: "var(--ink)", fontWeight: 500 }}>Camille Bardiau</span>
              <span style={{ fontFamily: "var(--font-label)", fontSize: "var(--text-eyebrow)", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--clay)" }}>Kinésiologue · Nîmes</span>
            </span>
          </button>

          <nav className="cb-nav-desktop" style={{ display: "flex", alignItems: "center", gap: 32 }}>
            {D.nav.map((n) => (
              <button key={n.id} onClick={() => onNavigate(n.id)} style={{
                background: "none", border: "none", cursor: "pointer", padding: "4px 0",
                fontFamily: "var(--font-label)", textTransform: "uppercase", fontSize: "var(--text-eyebrow)", letterSpacing: ".16em",
                color: current === n.id ? "var(--clay-deep)" : "var(--ink-soft)",
                borderBottom: current === n.id ? "1px solid var(--clay)" : "1px solid transparent",
                transition: "color .24s",
              }}>{n.label}</button>
            ))}
          </nav>

          <div className="cb-nav-desktop" style={{ display: "flex" }}>
            <Button variant="primary" size="sm" as="a" href={D.brand.booking} target="_blank" rel="noopener">Prendre rendez-vous</Button>
          </div>

          <div className="cb-nav-mobile-btn" style={{ display: "none" }}>
            <IconButton variant="outline" label="Menu" onClick={() => setOpen((o) => !o)}>
              {Icon(open ? "x" : "menu")}
            </IconButton>
          </div>
        </div>

        {open && (
          <div style={{ display: "block", borderTop: "1px solid var(--hairline)", padding: "10px var(--gutter) 20px", background: "var(--paper)" }}>
            {D.nav.map((n) => (
              <button key={n.id} onClick={() => { onNavigate(n.id); setOpen(false); }}
                style={{ display: "block", width: "100%", textAlign: "left", background: "none", border: "none", padding: "12px 0", borderBottom: "1px solid var(--hairline-soft)", fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", color: "var(--ink)", cursor: "pointer" }}>
                {n.label}
              </button>
            ))}
            <div style={{ marginTop: 16 }}>
              <Button variant="primary" block as="a" href={D.brand.booking} target="_blank" rel="noopener">Prendre rendez-vous</Button>
            </div>
          </div>
        )}
      </header>
    );
  }

  /* --- Footer --- */
  function Footer({ onNavigate }) {
    return (
      <footer style={{ background: "#76635B", color: "var(--on-dark)" }}>
        <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "var(--space-6) var(--gutter) var(--space-4)", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: "var(--space-6)" }} className="cb-foot-grid">
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h3)", marginBottom: 10 }}>Camille Bardiau</div>
            <p style={{ color: "rgba(246,239,227,.66)", maxWidth: 300, lineHeight: 1.7, margin: "0 0 20px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }}>
              Kinésiologue à {D.brand.city}. Un accompagnement doux pour retrouver clarté, équilibre et sérénité.
            </p>
          <div style={{ display: "flex", gap: 10 }}>
              <a href={D.brand.instagram} target="_blank" rel="noopener" aria-label="Instagram" style={{ width: 46, height: 46, borderRadius: "50%", border: "1px solid rgba(246,239,227,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark)", textDecoration: "none", transition: "border-color .2s" }}>
                {Icon("instagram", { style: { width: 18, height: 18 } })}
              </a>
              <a href={D.brand.facebook} target="_blank" rel="noopener" aria-label="Facebook" style={{ width: 46, height: 46, borderRadius: "50%", border: "1px solid rgba(246,239,227,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark)", textDecoration: "none", transition: "border-color .2s" }}>
                {Icon("facebook", { style: { width: 18, height: 18 } })}
              </a>
              <a href={`mailto:${D.brand.email}`} aria-label="Email" style={{ width: 46, height: 46, borderRadius: "50%", border: "1px solid rgba(246,239,227,.25)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--on-dark)", textDecoration: "none", transition: "border-color .2s" }}>
                {Icon("mail", { style: { width: 18, height: 18 } })}
              </a>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-label)", textTransform: "uppercase", letterSpacing: ".18em", fontSize: "var(--text-eyebrow)", color: "var(--gold-soft)", marginBottom: 16 }}>Navigation</div>
            {D.nav.map((n) => (
              <button key={n.id} onClick={() => onNavigate(n.id)} style={{ display: "block", background: "none", border: "none", color: "rgba(246,239,227,.78)", padding: "7px 0", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }}>{n.label}</button>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-label)", textTransform: "uppercase", letterSpacing: ".18em", fontSize: "var(--text-eyebrow)", color: "var(--gold-soft)", marginBottom: 16 }}>Contact</div>
            <a href={"https://maps.google.com/?q=11+bis+rue+de+Gen%C3%A8ve+N%C3%AEmes+30000"} target="_blank" rel="noopener" style={{ display: "block", color: "rgba(246,239,227,.78)", textDecoration: "none", marginBottom: 4, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}>11 bis rue de Genève, Nîmes</a>
            <a href={`tel:${D.brand.phoneRaw}`} style={{ display: "block", color: "rgba(246,239,227,.78)", textDecoration: "none", marginBottom: 6, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}>{D.brand.phone}</a>
            <a href={`mailto:${D.brand.email}`} style={{ display: "block", color: "rgba(246,239,227,.78)", textDecoration: "none", marginBottom: 6, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }}>{D.brand.email}</a>
            <p style={{ color: "rgba(246,239,227,.55)", margin: "12px 0 0", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1.6 }}>{D.brand.hours}</p>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(180,200,230,.13)", padding: "18px var(--gutter)", textAlign: "center", color: "rgba(246,239,227,.45)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)" }}>
          © 2026 Camille Bardiau · Kinésiologue à Nîmes ·{" "}
          <button onClick={() => onNavigate("legal")} style={{ background: "none", border: "none", color: "rgba(246,239,227,.45)", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", textDecoration: "underline", padding: 0 }}>Mentions légales</button>
        </div>
      </footer>
    );
  }

  window.CBKit = { Nav, Footer, Icon };
})();
