// Shared primitives for Alp Web Studio UI kit
// Exports to window for use across Babel scripts.

const MountainMark = ({ size = 28 }) => (
  <svg width={size} height={Math.round(size * 0.875)} viewBox="0 0 32 28" fill="none" aria-hidden>
    <path d="M16 1L31 27H1L16 1Z" fill="#3A8CA8" />
    <path d="M16 9L24 23H8L16 9Z" fill="#1F5E7A" />
    <path d="M10 27L16 17L22 27" fill="#5AAEC8" opacity="0.45" />
  </svg>
);

const ArrowRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7H12M8 3L12 7L8 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const ArrowRightShort = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const ArrowLeft = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M12 7H2M6 3L2 7L6 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const CheckTrend = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 10l4-4 3 3 3-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const PrimaryBtn = ({ children, onClick }) => (
  <button onClick={onClick} className="group inline-flex items-center gap-3 pl-2 pr-6 py-2 rounded-full bg-[#1A2436] text-[#F5F0EB] font-display font-medium text-[0.95rem] hover:bg-[#1F5E7A] transition-colors">
    <span className="w-9 h-9 rounded-full bg-[#B8715A] text-[#F5F0EB] inline-flex items-center justify-center"><ArrowRightShort/></span>
    {children}
  </button>
);

const PillBtn = ({ children, onClick }) => (
  <button onClick={onClick} className="relative inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#1A2436] text-[#F5F0EB] font-display font-semibold text-[0.82rem] hover:bg-[#1F5E7A] transition-colors">
    <span>{children}</span><ArrowRight size={13}/>
  </button>
);

const GhostBtn = ({ children, onClick }) => (
  <button onClick={onClick} className="group inline-flex items-center gap-2.5 px-6 py-3 rounded-full border border-[#1A2436]/30 text-[#1A2436] font-display font-semibold text-sm hover:bg-[#1A2436] hover:text-[#F5F0EB] transition-all">
    {children} <ArrowRight/>
  </button>
);

const MonoLabel = ({ children, className = "" }) => (
  <span className={`font-mono uppercase tracking-[.16em] text-[.68rem] font-medium ${className}`}>{children}</span>
);

Object.assign(window, { MountainMark, ArrowRight, ArrowRightShort, ArrowLeft, CheckTrend, PrimaryBtn, PillBtn, GhostBtn, MonoLabel });
