// components.jsx — shared UI components: Logo, Icons, Wordmark, Pill, etc.

const Wordmark = ({ height = 16, className = "", style = {} }) => (
  <svg
    className={className}
    aria-label="Paddock Rent A Car"
    height={height}
    viewBox="0 0 276 20"
    fill="currentColor"
    style={style}
  >
    <path d="M0 0.278053H29.8129C31.0622 0.278053 32.179 0.500022 33.1633 0.944547C34.1476 1.38907 34.9805 1.98176 35.6619 2.72264C36.3433 3.44461 36.8639 4.26904 37.2235 5.19468C37.5832 6.12092 37.763 7.0746 37.763 8.05573C37.763 9.01856 37.5832 9.97226 37.2235 10.9168C36.8639 11.843 36.3433 12.676 35.6619 13.4169C34.9805 14.1395 34.1476 14.7224 33.1633 15.1669C32.179 15.6115 31.0622 15.8334 29.8129 15.8334H8.97225V19.7225H0V0.278053ZM8.97225 6.94473V9.16675H27.5414C28.3743 9.16675 28.7907 8.79661 28.7907 8.05573C28.7907 7.31485 28.3743 6.94473 27.5414 6.94473H8.97225ZM75.524 19.7225H65.4156L63.1157 16.945H45.6257L43.3259 19.7225H33.2179L49.3168 0.278053H59.4248L75.524 19.7225ZM58.5162 11.3894L54.3708 6.38921L50.2254 11.3894H58.5162ZM76.6671 19.7225V0.278053H105.345C106.707 0.278053 107.995 0.537208 109.206 1.05613C110.417 1.55614 111.468 2.25007 112.358 3.13913C113.266 4.00927 113.976 5.03736 114.487 6.22276C115.017 7.40755 115.282 8.66672 115.282 10.0003C115.282 11.3339 115.017 12.5931 114.487 13.7779C113.976 14.9633 113.266 16.0005 112.358 16.8889C111.468 17.7597 110.417 18.4542 109.206 18.9725C107.995 19.4725 106.707 19.7225 105.345 19.7225H76.6671ZM85.6113 12.7778H103.357C104.246 12.7778 104.966 12.5187 105.515 12.0004C106.064 11.482 106.338 10.815 106.338 10.0003C106.338 9.18564 106.064 8.51855 105.515 8.00024C104.966 7.48193 104.246 7.22278 103.357 7.22278H85.6113V12.7778ZM117.011 19.7225V0.278053H145.689C147.051 0.278053 148.338 0.537208 149.55 1.05613C150.761 1.55614 151.812 2.25007 152.702 3.13913C153.61 4.00927 154.32 5.03736 154.831 6.22276C155.361 7.40755 155.626 8.66672 155.626 10.0003C155.626 11.3339 155.361 12.5931 154.831 13.7779C154.32 14.9633 153.61 16.0005 152.702 16.8889C151.812 17.7597 150.761 18.4542 149.55 18.9725C148.338 19.4725 147.051 19.7225 145.689 19.7225H117.011ZM125.955 12.7778H143.701C144.59 12.7778 145.31 12.5187 145.859 12.0004C146.408 11.482 146.682 10.815 146.682 10.0003C146.682 9.18564 146.408 8.51855 145.859 8.00024C145.31 7.48193 144.59 7.22278 143.701 7.22278H125.955V12.7778ZM187.715 0C189.078 0 190.365 0.268924 191.576 0.806135C192.788 1.34274 193.838 2.07446 194.728 3.0001C195.637 3.90744 196.346 4.97271 196.857 6.1947C197.388 7.39839 197.652 8.66672 197.652 10.0003C197.652 11.3339 197.388 12.6114 196.857 13.8333C196.346 15.037 195.637 16.1023 194.728 17.028C193.838 17.9353 192.788 18.6579 191.576 19.1945C190.365 19.7317 189.078 20 187.715 20H166.987C165.625 20 164.338 19.7317 163.126 19.1945C161.914 18.6579 160.855 17.9353 159.946 17.028C159.057 16.1023 158.347 15.037 157.816 13.8333C157.305 12.6114 157.05 11.3339 157.05 10.0003C157.05 8.66672 157.305 7.39839 157.816 6.1947C158.347 4.97271 159.057 3.90744 159.946 3.0001C160.855 2.07446 161.914 1.34274 163.126 0.806135C164.338 0.268924 165.625 0 166.987 0H187.715ZM185.869 7.22278H168.833C168.038 7.22278 167.366 7.49109 166.817 8.0283C166.268 8.5649 165.994 9.22223 165.994 10.0003C165.994 10.7778 166.268 11.4357 166.817 11.9723C167.366 12.5095 168.038 12.7778 168.833 12.7778H185.869C186.664 12.7778 187.336 12.5095 187.885 11.9723C188.434 11.4357 188.708 10.7778 188.708 10.0003C188.708 9.22223 188.434 8.5649 187.885 8.0283C187.336 7.49109 186.664 7.22278 185.869 7.22278ZM235.969 19.7225H208.995C207.632 19.7225 206.345 19.4725 205.134 18.9725C203.922 18.4542 202.862 17.7597 201.954 16.8889C201.064 16.0005 200.354 14.9633 199.824 13.7779C199.313 12.5931 199.057 11.3339 199.057 10.0003C199.057 8.66672 199.313 7.40755 199.824 6.22276C200.354 5.03736 201.064 4.00927 201.954 3.13913C202.862 2.25007 203.922 1.55614 205.134 1.05613C206.345 0.537208 207.632 0.278053 208.995 0.278053H235.969V7.50024H210.841C210.046 7.50024 209.374 7.7228 208.825 8.16671C208.276 8.61124 208.001 9.22223 208.001 10.0003C208.001 10.7778 208.276 11.3894 208.825 11.8339C209.374 12.2778 210.046 12.5004 210.841 12.5004H235.969V19.7225ZM238.237 0.278053H247.209V10.9448L262.996 0.278053H276L261.605 10.0003L276 19.7225H262.996L255.103 14.3895L247.209 19.7225H238.237V0.278053Z" />
  </svg>
);

// Tiny circular paddock mark — accent dot inside ring. Used favicon-style.
const PaddockMark = ({ size = 22, className = "" }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none">
    <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="0.8" opacity="0.55" />
    <circle cx="11" cy="11" r="2.6" fill="currentColor" />
  </svg>
);

// --- Icons (stroke, currentColor, hairline) ---
const Icon = {
  Whatsapp: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 21l1.6-4.6A8.5 8.5 0 1 1 7.6 19.4L3 21z" strokeLinejoin="round" />
      <path d="M8.5 9c.2 1.3.9 2.6 2 3.6 1.1 1.1 2.4 1.8 3.6 2 .4.1.8-.1 1-.4l.5-.7c.2-.3.6-.4.9-.2l1.6.9c.4.2.5.7.3 1.1-.6 1-1.7 1.7-2.9 1.6-2.7-.1-5.6-1.8-7.4-3.7C6.4 11.4 4.7 8.5 4.6 5.8c0-1.2.6-2.3 1.6-2.9.4-.2.9-.1 1.1.3l.9 1.6c.2.3.1.7-.2.9l-.7.5c-.3.2-.5.6-.4 1z" strokeLinejoin="round" />
    </svg>
  ),
  Phone: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M5 4h3l2 5-2 1a10 10 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" strokeLinejoin="round" />
    </svg>
  ),
  Telegram: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 11l17-6-3 15-5-3-3 3v-4l9-8-11 6-4-2z" strokeLinejoin="round" />
    </svg>
  ),
  Arrow: ({ size = 14, dir = "right" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"
      style={{ transform: dir === "left" ? "scaleX(-1)" : dir === "down" ? "rotate(90deg)" : "none" }}>
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  ),
  Plus: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M12 5v14M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  Check: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M5 12.5l4 4L19 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Close: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
    </svg>
  ),
  Pin: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M12 22s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12z" strokeLinejoin="round" />
      <circle cx="12" cy="10" r="2.5" />
    </svg>
  ),
  Clock: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" strokeLinecap="round" />
    </svg>
  ),
  ChevDown: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
};

// A thin label/tab with leading dot. Used everywhere as section kickers.
const Kicker = ({ children, dotted = true }) => (
  <span className="kicker">
    {dotted && <span className="kicker-dot" />}
    {children}
  </span>
);

// Outlined-pill button + filled-accent variant
const Btn = ({ variant = "ghost", as: Tag = "button", children, icon, iconRight, className = "", ...rest }) => (
  <Tag className={`btn btn-${variant} ${className}`} {...rest}>
    {icon && <span className="btn-i">{icon}</span>}
    <span>{children}</span>
    {iconRight && <span className="btn-i">{iconRight}</span>}
  </Tag>
);

Object.assign(window, { Wordmark, PaddockMark, Icon, Kicker, Btn });
