/* global React */
const { useState, useEffect, useRef } = React;

// --- Logo lockup -----------------------------------------------------------
function Logo({ variant = "dark", tagline = false, size = 38 }) {
  const src = variant === "light"
    ? "assets/columbus-lingua-mark-white.svg"
    : "assets/columbus-lingua-mark.svg";
  const nameColor = variant === "light" ? "#fff" : "var(--navy-900)";
  const linColor = variant === "light" ? "var(--gold-400)" : "var(--navy-600)";
  return (
    <a href="#top" className="cl-logo" aria-label="Columbus Lingua home">
      <img src={src} alt="" width={size} height={size} />
      <span className="cl-logo-wm">
        <span className="cl-logo-name" style={{ color: nameColor }}>
          Columbus <span style={{ color: linColor }}>Lingua</span>
        </span>
        {tagline && <span className="cl-logo-tag">Certified Translations</span>}
      </span>
    </a>
  );
}

// --- Icon (Lucide) ---------------------------------------------------------
function Icon({ name, size = 18, className = "", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ icons: window.lucide.icons, attrs: {}, nameAttr: "data-lucide" });
      const svg = ref.current.querySelector("svg");
      if (svg) { svg.style.width = size + "px"; svg.style.height = size + "px"; }
    }
  }, [name, size]);
  return <span ref={ref} className={"cl-icon " + className} style={{ display: "inline-flex", ...style }} />;
}

// --- Button ----------------------------------------------------------------
function Button({ children, variant = "primary", size = "md", icon, iconRight, onClick, type = "button" }) {
  return (
    <button type={type} className={`cl-btn cl-btn-${variant} cl-btn-${size}`} onClick={onClick}>
      {icon && <Icon name={icon} size={size === "lg" ? 19 : 17} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={size === "lg" ? 19 : 17} />}
    </button>
  );
}

// --- Eyebrow (with gold rule) ----------------------------------------------
function Eyebrow({ children, center = false, light = false }) {
  return (
    <div className={"cl-eyebrow-row" + (center ? " is-center" : "")}>
      <span className="cl-rule" />
      <span className="cl-eyebrow" style={light ? { color: "var(--gold-400)" } : null}>{children}</span>
    </div>
  );
}

// --- Badge -----------------------------------------------------------------
function Badge({ children, tone = "gold", icon }) {
  return (
    <span className={`cl-badge cl-badge-${tone}`}>
      {icon && <Icon name={icon} size={14} />}
      {children}
    </span>
  );
}

// --- Section wrapper -------------------------------------------------------
function Section({ id, children, bg = "white", className = "" }) {
  return (
    <section id={id} className={`cl-section cl-bg-${bg} ${className}`}>
      <div className="cl-container">{children}</div>
    </section>
  );
}

Object.assign(window, { Logo, Icon, Button, Eyebrow, Badge, Section });