// LP UI Kit — shared primitives
// Exposed on window for the other Babel scripts.

const CheckIcon = ({ className = "lp-icon" }) => (
  <svg className={className} viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fillRule="evenodd" d="M 9 18 C 10.182 18 11.352 17.767 12.444 17.315 C 13.536 16.863 14.528 16.2 15.364 15.364 C 16.2 14.528 16.863 13.536 17.315 12.444 C 17.767 11.352 18 10.182 18 9 C 18 7.818 17.767 6.648 17.315 5.556 C 16.863 4.464 16.2 3.472 15.364 2.636 C 14.528 1.8 13.536 1.137 12.444 0.685 C 11.352 0.233 10.182 0 9 0 C 6.613 0 4.324 0.948 2.636 2.636 C 0.948 4.324 0 6.613 0 9 C 0 11.387 0.948 13.676 2.636 15.364 C 4.324 17.052 6.613 18 9 18 Z M 8.768 12.64 L 13.768 6.64 L 12.232 5.36 L 7.932 10.519 L 5.707 8.293 L 4.293 9.707 L 7.293 12.707 L 8.067 13.481 L 8.768 12.64 Z" />
  </svg>
);

const ChevronIcon = () => (
  <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="6 9 12 15 18 9" />
  </svg>
);

const LineGlyph = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 5.69 2 10.23c0 4.06 3.55 7.46 8.36 8.1.32.07.77.21.88.49.1.25.07.64.03.9l-.14.86c-.04.25-.2.99.87.54 1.07-.45 5.76-3.39 7.86-5.81C21.27 13.7 22 12.05 22 10.23 22 5.69 17.52 2 12 2zM8.1 12.86H6.12c-.29 0-.52-.23-.52-.52V8.39c0-.29.23-.52.52-.52s.52.23.52.52v3.43H8.1c.29 0 .52.23.52.52s-.23.52-.52.52zm2.03-.52c0 .29-.23.52-.52.52s-.52-.23-.52-.52V8.39c0-.29.23-.52.52-.52s.52.23.52.52v3.95zm4.77 0c0 .22-.14.42-.35.49-.06.02-.11.03-.17.03-.16 0-.31-.08-.41-.21l-2.03-2.76v2.45c0 .29-.23.52-.52.52s-.52-.23-.52-.52V8.39c0-.22.14-.42.35-.49.05-.02.11-.03.16-.03.16 0 .31.08.41.21l2.03 2.76V8.39c0-.29.23-.52.52-.52s.52.23.52.52v3.95zm3.3-2.5c.29 0 .52.23.52.52s-.23.52-.52.52h-1.46v.94h1.46c.29 0 .52.23.52.52s-.23.52-.52.52h-1.98c-.29 0-.52-.23-.52-.52V8.39c0-.29.23-.52.52-.52h1.98c.29 0 .52.23.52.52s-.23.52-.52.52h-1.46v.94h1.46z" />
  </svg>
);

// Buttons
const Button = ({ variant = "primary", size, block, children, withLine, href = "#", onClick, target }) => {
  const cls = ["btn", `btn--${variant}`, size === "sm" && "btn--sm", block && "btn--block"]
    .filter(Boolean).join(" ");
  const rel = target === "_blank" ? "noopener noreferrer" : undefined;
  return (
    <a className={cls} href={href} onClick={onClick} target={target} rel={rel}>
      {withLine && <LineGlyph />}
      {children}
    </a>
  );
};

// Section header (eyebrow + title + optional sub)
const SectionHead = ({ eyebrow, eyebrowCap, title, sub }) => (
  <div className="sec-head">
    <span className={"eyebrow" + (eyebrowCap ? " eyebrow--cap" : "")}>{eyebrow}</span>
    <h2>{title}</h2>
    {sub && <p>{sub}</p>}
  </div>
);

// Generic placeholder block (stands in for client imagery)
const VisualSlot = ({ className, label }) => (
  <div className={className}>{label}</div>
);

Object.assign(window, { CheckIcon, ChevronIcon, LineGlyph, Button, SectionHead, VisualSlot });
