/* Atoms: buttons, tags, inputs, badges */

const Button = ({ variant = "primary", size = "default", iconLeft, iconRight = "arrow-right", children, onClick, style = {}, ...rest }) => {
  const sizes = {
    default: { padding: "12px 20px", fontSize: 16, gap: 10, height: 48, radius: 9999 },
    large: { padding: "16px 24px", fontSize: 18, gap: 12, height: 56, radius: 9999 },
    small: { padding: "8px 14px", fontSize: 14, gap: 8, height: 36, radius: 9999 },
  };
  const sz = sizes[size];
  const variants = {
    primary: { bg: "var(--sage-deep)", color: "#fff", border: "1px solid var(--sage-deep)", hoverBg: "#1a6a4f" },
    secondary: { bg: "transparent", color: "var(--navy)", border: "1px solid var(--navy)", hoverBg: "var(--navy)" },
    tertiary: { bg: "transparent", color: "var(--sage-deep)", border: "none", hoverBg: "transparent" },
    dark: { bg: "var(--navy)", color: "#fff", border: "1px solid var(--navy)", hoverBg: "#2a2c42" },
    terracotta: { bg: "var(--terracotta)", color: "#fff", border: "1px solid var(--terracotta)", hoverBg: "var(--terracotta-deep)" },
    ghostWhite: { bg: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.5)", hoverBg: "rgba(255,255,255,0.1)" },
  };
  const v = variants[variant];
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: sz.gap,
        padding: variant === "tertiary" ? 0 : sz.padding,
        fontSize: sz.fontSize,
        fontFamily: "Jost, sans-serif",
        fontWeight: 500,
        lineHeight: 1,
        height: variant === "tertiary" ? "auto" : sz.height,
        borderRadius: variant === "tertiary" ? 0 : sz.radius,
        background: variant === "tertiary" ? "transparent" : (hover && variant === "secondary" ? v.hoverBg : (hover ? v.hoverBg : v.bg)),
        color: hover && variant === "secondary" ? "#fff" : v.color,
        border: v.border,
        transition: "all 180ms ease",
        whiteSpace: "nowrap",
        cursor: "pointer",
        ...style,
      }}
      {...rest}
    >
      {iconLeft && <Icon name={iconLeft} size={18} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={18} style={{ transition: "transform 200ms", transform: hover ? "translateX(3px)" : "none" }} />}
    </button>
  );
};

const Tag = ({ children, color = "var(--sage-deep)", bg = "rgba(34,125,93,0.08)" }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 6,
    padding: "6px 12px", fontSize: 12, fontFamily: "DM Sans, sans-serif", fontWeight: 500,
    letterSpacing: "0.08em", textTransform: "uppercase",
    color, background: bg, borderRadius: 9999,
  }}>{children}</span>
);

const SectionLabel = ({ children, color = "var(--terracotta)" }) => (
  <span className="mono-label" style={{
    display: "inline-flex", alignItems: "center", gap: 10, color,
  }}>
    <span style={{ width: 24, height: 1, background: color, display: "inline-block" }} />
    {children}
  </span>
);

const Rating = ({ score, label, max = 5 }) => {
  const full = Math.floor(score);
  const half = score - full >= 0.3 && score - full < 0.8;
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
      <div className="display" style={{ fontSize: 64, lineHeight: 1, color: "var(--navy)" }}>{score.toString().replace(".", ",")}</div>
      <div style={{ display: "flex", gap: 3 }}>
        {Array.from({ length: max }).map((_, i) => (
          <Icon key={i} name={i < full ? "star" : (i === full && half ? "star-half" : "star")} size={16} stroke={i < full || (i === full && half) ? "var(--navy)" : "#D5D2CA"} />
        ))}
      </div>
      <div style={{ fontSize: 13, color: "var(--muted)", textAlign: "center" }}>{label}</div>
    </div>
  );
};

window.Button = Button;
window.Tag = Tag;
window.SectionLabel = SectionLabel;
window.Rating = Rating;