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

// ---- Lucide icon (renders via the UMD global after mount) ----
function Icon({ name, size = 18, stroke = 1.5, 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({
        attrs: { width: size, height: size, "stroke-width": stroke },
        nameAttr: "data-lucide",
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", ...style }} />;
}

// ---- Reveal wrapper — pure CSS entrance (never leaves content hidden) ----
function Reveal({ children, delay = 0, className = "", as = "div" }) {
  const Tag = as;
  return (
    <Tag className={`vl-reveal ${className}`} style={{ animationDelay: `${delay}ms` }}>
      {children}
    </Tag>
  );
}

// ---- Eyebrow label ----
function Eyebrow({ children, withRule = false }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      {withRule && <span style={{ height: 1, width: 40, background: "var(--steel)" }} />}
      <span className="vl-eyebrow">{children}</span>
    </span>
  );
}

// ---- Pill button ----
function Pill({ children, variant = "primary", icon, href = "#", onClick, target, rel }) {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    padding: "15px 30px", borderRadius: 9999, fontSize: 14, letterSpacing: ".01em",
    fontFamily: "var(--font-sans)", textDecoration: "none", cursor: "pointer",
    border: "1px solid transparent", transition: "all .4s var(--ease-smooth)", whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: "var(--graphite)", color: "var(--champagne)" },
    accent: { background: "var(--steel)", color: "#fff" },
    outline: { background: "transparent", color: "var(--graphite)", borderColor: "rgba(44,44,42,.3)" },
  };
  const [hover, setHover] = useState(false);
  const hoverStyle = hover
    ? variant === "outline"
      ? { background: "rgba(44,44,42,.05)" }
      : variant === "accent"
        ? { background: "var(--steel-deep)", boxShadow: "var(--shadow-gold)" }
        : { boxShadow: "var(--shadow-elegant)" }
    : {};
  return (
    <a href={href} onClick={onClick} target={target} rel={rel} style={{ ...base, ...variants[variant], ...hoverStyle }}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      {children}
      {icon && <Icon name={icon} size={16} style={{ transform: hover ? "translateX(4px)" : "none", transition: "transform .3s var(--ease-smooth)" }} />}
    </a>
  );
}

// ---- Section shell ----
function Section({ id, children, style = {}, pad = true }) {
  return (
    <section id={id} style={{ padding: pad ? "clamp(80px,12vw,150px) 0" : 0, position: "relative", ...style }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 clamp(24px,5vw,40px)" }}>{children}</div>
    </section>
  );
}

Object.assign(window, { Icon, Reveal, Eyebrow, Pill, Section });