/* ===== Shared tiny UI bits ===== */

const Lamb = ({ size = 48, color = "var(--pink)" }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
    <ellipse cx="42" cy="55" rx="28" ry="22" fill={color}/>
    <circle cx="26" cy="50" r="7" fill={color}/>
    <circle cx="32" cy="42" r="7" fill={color}/>
    <circle cx="42" cy="38" r="7" fill={color}/>
    <circle cx="54" cy="40" r="7" fill={color}/>
    <circle cx="58" cy="50" r="7" fill={color}/>
    <circle cx="52" cy="68" r="7" fill={color}/>
    <circle cx="36" cy="70" r="7" fill={color}/>
    <ellipse cx="68" cy="46" rx="10" ry="8" fill={color}/>
    <circle cx="72" cy="44" r="1.2" fill="white"/>
    <path d="M73 36 Q78 30 74 26" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
    <rect x="38" y="72" width="3.5" height="12" fill={color} rx="1"/>
    <rect x="52" y="72" width="3.5" height="12" fill={color} rx="1"/>
  </svg>
);

const HandArrow = ({ className = "", style = {} }) => (
  <svg className={className} style={style} viewBox="0 0 120 40" fill="none">
    <path d="M4 20 Q 40 8, 80 22 T 112 24" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
    <path d="M104 16 L 114 24 L 102 30" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
  </svg>
);

const Stars = ({ count = 5, filled = 5, size = 14 }) => (
  <span style={{display: "inline-flex", gap: 2, color: "var(--pink-deep)"}}>
    {Array.from({length: count}).map((_, i) => (
      <svg key={i} width={size} height={size} viewBox="0 0 16 16">
        <path d="M8 1 L10 6 L15 6.5 L11 10 L12.5 15 L8 12.5 L3.5 15 L5 10 L1 6.5 L6 6 Z"
          fill={i < filled ? "currentColor" : "transparent"} stroke="currentColor" strokeWidth="1"/>
      </svg>
    ))}
  </span>
);

const Signature = ({ name, role, color }) => (
  <div style={{display: "flex", alignItems: "center", gap: 14}}>
    <div style={{width: 40, height: 40, borderRadius: "50%", background: color || "var(--pink-soft)", display: "grid", placeItems: "center", fontFamily: "var(--f-display)", color: "var(--navy)", fontSize: 18}}>{name[0]}</div>
    <div>
      <div className="script" style={{fontSize: 22, color: "var(--navy)", lineHeight: 1}}>{name}</div>
      <div className="allcaps" style={{color: "var(--ink-muted)", marginTop: 2}}>{role}</div>
    </div>
  </div>
);

const Badge = ({ children, variant = "pink" }) => {
  const styles = {
    pink: {background: "var(--pink)", color: "var(--navy)"},
    navy: {background: "var(--navy)", color: "var(--cream)"},
    butter: {background: "var(--butter)", color: "var(--navy)"},
    outline: {background: "transparent", color: "var(--navy)", border: "1px solid var(--navy)"},
  }[variant];
  return <span className="allcaps" style={{...styles, padding: "6px 12px", borderRadius: 999, fontSize: 10}}>{children}</span>;
};

/* ===== Product Card ===== */
const ProductCard = ({ product, featured, compact }) => {
  const rot = React.useMemo(() => (Math.random() * 2 - 1) * 1.2, []);
  return (
    <div className="product-card" style={{
      display: "flex", flexDirection: "column", gap: 12,
      transform: featured ? "none" : `rotate(${rot}deg)`,
      transition: "transform .3s ease",
      cursor: "pointer",
    }}
    onMouseEnter={e => e.currentTarget.style.transform = "rotate(0deg) translateY(-4px)"}
    onMouseLeave={e => e.currentTarget.style.transform = featured ? "none" : `rotate(${rot}deg)`}>
      <div className={"ph " + (product.tone || "")} style={{
        aspectRatio: featured ? "4/5" : "1/1", borderRadius: 4,
        position: "relative",
      }}>
        {product.badge && (
          <div style={{position: "absolute", top: 12, left: 12}}>
            <Badge variant={product.badgeVariant || "pink"}>{product.badge}</Badge>
          </div>
        )}
        <div style={{position: "absolute", top: 12, right: 12, width: 32, height: 32, borderRadius: "50%", background: "rgba(255,255,255,0.9)", display: "grid", placeItems: "center", color: "var(--navy)"}}>
          <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M10 17 L 2 9 Q 2 3, 6 3 T 10 6 Q 10 3, 14 3 T 18 9 Z" stroke="currentColor" strokeWidth="1.5"/></svg>
        </div>
        <div className="ph-label">{product.shot || "product shot"}</div>
      </div>
      <div>
        <div className="allcaps" style={{color: "var(--ink-muted)", marginBottom: 4}}>{product.brand}</div>
        <div className="display" style={{fontSize: featured ? 32 : 22, color: "var(--navy)", marginBottom: 6, lineHeight: 1.1}}>{product.name}</div>
        <div style={{display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--f-ui)", fontSize: 13, color: "var(--ink-soft)"}}>
          <span style={{fontWeight: 600, color: "var(--navy)"}}>${product.price}</span>
          <span>·</span>
          <Stars filled={product.rating || 5} size={12}/>
        </div>
        {!compact && product.blurb && (
          <p style={{fontFamily: "var(--f-body)", fontSize: 15, color: "var(--ink-soft)", marginTop: 10, lineHeight: 1.5}}>
            {product.blurb}
          </p>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Lamb, HandArrow, Stars, Signature, Badge, ProductCard });