/* global React, lucide */

// Lucide icon wrapper.
// Pass name (kebab-case Lucide name), size (default 20), strokeWidth (default 1.5).
function Icon({ name, size = 20, strokeWidth = 1.5, className = "", style = {} }) {
  const ref = React.useRef(null);
  React.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({
        attrs: { width: size, height: size, "stroke-width": strokeWidth }
      });
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", lineHeight: 0, ...style }} />;
}

// The signature gold hairline + diamond rule.
function DiamondRule({ light = false, short = false, leftOnly = false }) {
  const lineW = short ? 24 : 48;
  const color = light ? "var(--ws-gold)" : "var(--ws-gold)";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color }}>
      {!leftOnly && <span style={{ width: lineW, height: 1, background: "currentColor", opacity: 0.85 }} />}
      <span style={{ width: 6, height: 6, background: "currentColor", transform: "rotate(45deg)" }} />
      <span style={{ width: lineW, height: 1, background: "currentColor", opacity: 0.85 }} />
    </span>
  );
}

// Bare 59/WS monogram lockup. Used in nav + footer.
// Uses the supplied raster logo files.
function Monogram({ size = "md", variant }) {
  // Footer passes size="lg" → use the full lockup (which already has the label).
  // Nav passes size="md" (default) → use the mark only.
  const useFull = variant === "full" || size === "lg";
  if (useFull) {
    const w = size === "lg" ? 220 : 180;
    return (
      <img
        src="/assets/logo-full-transparent.png"
        alt="59 William Street, Listowel, Luxury Townhouse Stays"
        style={{ width: w, height: "auto", display: "block" }}
      />
    );
  }
  const h = size === "sm" ? 40 : 56;
  return (
    <img
      src="/assets/logo-mark-transparent.png"
      alt="59 William Street"
      style={{ height: h, width: "auto", display: "block" }}
    />
  );
}

// Section opener: small all-caps eyebrow, gold diamond rule, serif headline,
// optional supporting paragraph below.
function SectionOpener({ eyebrow, title, sub, align = "center", light = false }) {
  const cls = "ws-opener" + (align === "left" ? " is-left" : "");
  return (
    <div className={cls}>
      {eyebrow && <div className="ws-opener__eyebrow">{eyebrow}</div>}
      <span className="ws-opener__rule"><span className="d" /></span>
      <h2 className="ws-opener__title" style={light ? { color: "var(--ws-white-text)" } : null}>{title}</h2>
      {sub && <p className="ws-opener__sub">{sub}</p>}
    </div>
  );
}

window.Icon = Icon;
window.DiamondRule = DiamondRule;
window.Monogram = Monogram;
window.SectionOpener = SectionOpener;