// Small shared primitives: Eyebrow, GlassCard, WordReveal, GradientText, SecLabel, PalmMark

function Eyebrow({ children, micro, className = "" }) {
  const sz = micro ? "text-[10px] tracking-[0.4em]" : "text-[11px] tracking-[0.3em]";
  return <p className={`${sz} uppercase text-[rgba(232,160,160,0.6)] ${className}`}>{children}</p>;
}

function GradientText({ children, variant = "default", className = "" }) {
  const cls = variant === "pink" ? "gradient-text-pink" : "gradient-text";
  return <span className={`${cls} ${className}`}>{children}</span>;
}

function SecLabel({ children, num, className = "" }) {
  return (
    <div className={`flex items-center gap-4 ${className}`}>
      <span className="font-display text-[11px] tracking-[0.3em] text-[rgba(232,160,160,0.6)]">{num}</span>
      <span className="h-px w-8 bg-[rgba(232,160,160,0.4)]"></span>
      <span className="text-[11px] tracking-[0.3em] uppercase text-[#7a7a7a]">{children}</span>
    </div>
  );
}

// Splits children text into words and wraps in mask-reveal; each word triggers by observer
function WordReveal({ text, className = "", delayStep = 40 }) {
  const words = text.split(" ");
  return (
    <span className={className}>
      {words.map((w, i) => (
        <React.Fragment key={i}>
          <span className="word-mask" style={{ transitionDelay: `${i*delayStep}ms` }}>
            <span style={{ transitionDelay: `${i*delayStep}ms` }}>{w}</span>
          </span>
          {i < words.length - 1 && " "}
        </React.Fragment>
      ))}
    </span>
  );
}

function PalmMark({ className = "" }) {
  return (
    <span className={`font-display font-semibold tracking-tight ${className}`}>
      <span className="gradient-text">Palm</span>
    </span>
  );
}

// Button w/ arrow
function BtnArrow({ children, variant = "primary", href = "#", onClick }) {
  const cls = variant === "primary" ? "btn-primary" : "btn-ghost";
  return (
    <a href={href} onClick={onClick} className={cls} data-cursor="lg">
      <span>{children}</span>
      <span className="arr">→</span>
    </a>
  );
}

Object.assign(window, { Eyebrow, GradientText, SecLabel, WordReveal, PalmMark, BtnArrow });