/* Shared site footer — contact line + social, matching ocainteriors.com.
   The editor auth controls (Login/Edit/Done/Logout) are injected by the generic
   editable/editor.js into the [data-edit-auth] slot so they live in the footer row.
   The editor itself was made more generic to support explicit data-edit annotations
   instead of only auto-discovering lucas/eduardo-style bare paragraphs/headings.
*/
function Footer({ onDark = false }) {
  const fg = onDark ? "var(--oca-greige-50)" : "var(--oca-pine-800)";
  const muted = onDark ? "var(--oca-greige-100)" : "var(--text-body)";

  // Small inline styles for the injected auth controls so they sit nicely in the row
  const authSlotStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    fontSize: 14,
  };

  // When this Footer mounts (or re-mounts on route), nudge the generic editor
  // to (re)render its Login/Edit controls into our data-edit-auth slot.
  React.useEffect(() => {
    const nudge = () => {
      try {
        if (window.LLEditable && typeof window.LLEditable.refresh === 'function') {
          window.LLEditable.refresh();
        }
      } catch (e) {}
    };
    // Run a couple times to beat any race with the editor script itself.
    const t1 = setTimeout(nudge, 30);
    const t2 = setTimeout(nudge, 180);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <footer
      style={{
        background: onDark ? "var(--oca-pine-700)" : "var(--surface-page)",
        padding: "40px 40px 48px",
        textAlign: "center",
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 18,
          color: muted,
          display: "flex",
          flexWrap: "wrap",
          gap: 14,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <a href="mailto:info@ocainteriors.com" style={{ color: fg, textDecoration: "underline", textUnderlineOffset: 3 }}>
          info@ocainteriors.com
        </a>
        <span style={{ opacity: 0.5 }}>|</span>
        <span>(512) 975-0252</span>
        <span style={{ opacity: 0.5 }}>|</span>
        <span>1001 Live Oak Ridge Rd., Austin, TX 78746.</span>

        {/* Target for the generic editor's Login / Edit / Done / Logout buttons.
            Use the stronger fg color (same as the email link) so controls are visible
            even inside the muted footer row. */}
        <span style={{ opacity: 0.5 }}>|</span>
        <span
          data-edit-auth
          style={{
            ...authSlotStyle,
            color: fg,
            fontSize: 14,
            opacity: 1,
          }}
        ></span>
      </div>
    </footer>
  );
}
window.Footer = Footer;