// Shared UI primitives

const Eyebrow = ({ children, color = "text-gpx-700", className = "" }) => (
  <div className={`label-eyebrow flex items-center gap-2 ${color} ${className}`}>
    <span className="inline-block w-6 h-px bg-current opacity-60" />
    <span>{children}</span>
  </div>
);

const Btn = ({ children, variant = "primary", size = "md", className = "", as = "button", ...rest }) => {
  const Tag = as;
  const sizes = {
    sm: "px-3 py-1.5 text-[13px]",
    md: "px-4 py-2.5 text-sm",
    lg: "px-5 py-3 text-[15px]",
  };
  const variants = {
    primary: "bg-ink-900 text-gpx-lime hover:bg-gpx-900",
    lime:    "bg-gpx-lime text-ink-900 hover:bg-gpx-citron",
    ghost:   "bg-transparent text-ink-900 hover:bg-ink-900/5 border border-ink-900/15",
    white:   "bg-white text-ink-900 hover:bg-paper-soft border border-ink-900/10",
    outline: "border border-ink-900 text-ink-900 hover:bg-ink-900 hover:text-gpx-lime",
  };
  return (
    <Tag {...rest} className={`inline-flex items-center justify-center gap-2 rounded-full font-medium tracking-tight transition-colors focus-ring ${sizes[size]} ${variants[variant]} ${className}`}>
      {children}
    </Tag>
  );
};

const Pill = ({ children, tone = "ink", className = "" }) => {
  const tones = {
    ink: "bg-ink-900 text-paper",
    lime: "bg-gpx-lime text-ink-900",
    white: "bg-white/90 text-ink-900 border border-ink-900/10",
    forest: "bg-gpx-100 text-gpx-800 border border-gpx-200",
    amber: "bg-signal-amber/15 text-signal-amber",
  };
  return <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-mono uppercase tracking-wider ${tones[tone]} ${className}`}>{children}</span>;
};

const Card = ({ children, className = "" }) => (
  <div className={`bg-white border border-ink-900/10 rounded-2xl ${className}`}>{children}</div>
);

const SectionHead = ({ eyebrow, title, lede, align = "left", color = "text-gpx-700" }) => (
  <div className={align === "center" ? "text-center max-w-3xl mx-auto" : "max-w-3xl"}>
    <Eyebrow color={color}>{eyebrow}</Eyebrow>
    <h2 className="font-display mt-4 text-[40px] leading-[1.05] md:text-[56px] md:leading-[1.02] tracking-tight text-ink-900">{title}</h2>
    {lede && <p className="mt-5 text-ink-500 text-[17px] leading-relaxed max-w-2xl">{lede}</p>}
  </div>
);

// Brand logomark — uses provided artwork
const Logo = ({ size = 36, withWord = true, light = false }) => (
  <a href="#top" className="inline-flex items-center gap-3 text-ink-900">
    <img src="assets/logo.jpg" alt="Green Parcel Express" width={size} height={size}
      style={{ width: size, height: size, objectFit: "contain", mixBlendMode: light ? "screen" : "multiply" }} />
    {withWord && (
      <div className="leading-none">
        <div className={`font-display text-[18px] tracking-tight ${light ? "text-paper" : ""}`}>Green Parcel Express</div>
        <div className={`label-eyebrow mt-1 ${light ? "text-paper/50" : "text-ink-400"}`}>Since 2021 · West Hollywood, CA</div>
      </div>
    )}
  </a>
);

Object.assign(window, { Eyebrow, Btn, Pill, Card, SectionHead, Logo });