// Brand logo: radar-style ping mark with concentric ripples.
const PingMark = ({ size = 24, dotColor = "var(--ping)", strokeColor = "currentColor" }) => (
  <svg
    className="ping-mark"
    width={size}
    height={size}
    viewBox="0 0 32 32"
    aria-hidden="true"
    focusable="false"
  >
    <path className="ping-ripple ping-ripple-outer" d="M5 20 A 11 11 0 0 1 27 20"
      stroke={strokeColor} strokeWidth="1.6" fill="none"
      strokeLinecap="round" opacity=".35" />
    <path className="ping-ripple ping-ripple-middle" d="M9 20 A 7 7 0 0 1 23 20"
      stroke={strokeColor} strokeWidth="1.7" fill="none"
      strokeLinecap="round" opacity=".7" />
    <path className="ping-ripple ping-ripple-inner" d="M12.5 20 A 3.5 3.5 0 0 1 19.5 20"
      stroke={strokeColor} strokeWidth="1.8" fill="none"
      strokeLinecap="round" />
    <circle cx="16" cy="20" r="2.4" fill={dotColor} />
    <circle cx="16" cy="20" r="4.2" fill={dotColor} opacity=".18" />
  </svg>
);

const Wordmark = ({ size = 18, mono = false }) => (
  <span className="wordmark" style={{ fontSize: size }}>
    <span>Refurb</span>
    <span className={mono ? "wordmark-ping mono" : "wordmark-ping"}>Ping</span>
  </span>
);

const Logo = ({ size = 24, gap = 8 }) => (
  <span className="brand-logo" style={{ gap }}>
    <PingMark size={size + 6} />
    <Wordmark size={size * 0.82} />
  </span>
);

const Apple = ({ size = 12, color = "#86868b" }) => (
  <svg width={size} height={size * 1.18} viewBox="0 0 100 118" aria-hidden="true">
    <path fill={color}
      d="M73.5 62c-.1-13.3 10.9-19.7 11.4-20-6.2-9.1-15.9-10.4-19.3-10.5-8.2-.8-16 4.8-20.2 4.8-4.2 0-10.7-4.7-17.6-4.6-9 .1-17.3 5.3-22 13.3-9.4 16.4-2.4 40.7 6.8 54 4.5 6.5 9.8 13.8 16.7 13.5 6.7-.3 9.3-4.3 17.4-4.3 8.1 0 10.4 4.3 17.5 4.2 7.2-.1 11.8-6.6 16.2-13.1 5.1-7.5 7.2-14.8 7.3-15.2-.2-.1-14.1-5.4-14.2-21.4zM60.3 22.7c3.7-4.5 6.2-10.7 5.5-16.9-5.3.2-11.8 3.6-15.6 8-3.4 4-6.4 10.4-5.6 16.4 5.9.5 12-3 15.7-7.5z"/>
  </svg>
);

const ProductPhoto = ({ src, alt }) => (
  <img className="product-photo" src={src} alt={alt} loading="lazy" decoding="async" />
);

const MacMiniArt = () => (
  <ProductPhoto src="assets/mac-mini-product.jpg" alt="Mac mini front view" />
);

const MacStudioArt = () => (
  <ProductPhoto src="assets/mac-studio-product.jpg" alt="Mac Studio front view" />
);

const MacBookProArt = () => (
  <svg viewBox="0 0 220 220" width="160" height="160" aria-label="MacBook Pro">
    <defs>
      <linearGradient id="mbp-lid" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#2c2c2e"/>
        <stop offset="1" stopColor="#1d1d1f"/>
      </linearGradient>
      <linearGradient id="mbp-base" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#404044"/>
        <stop offset="1" stopColor="#28282b"/>
      </linearGradient>
    </defs>
    <ellipse cx="110" cy="180" rx="90" ry="6" fill="#000" opacity=".10"/>
    {/* base */}
    <path d="M20 168 L200 168 L210 178 L10 178 Z" fill="url(#mbp-base)"/>
    {/* lid */}
    <rect x="32" y="40" width="156" height="128" rx="6" fill="url(#mbp-lid)"/>
    <rect x="38" y="46" width="144" height="116" rx="3" fill="#0a0a0c"/>
    {/* notch */}
    <rect x="100" y="46" width="20" height="5" rx="2.5" fill="#1d1d1f"/>
    {/* keyboard sliver hint */}
    <rect x="36" y="170" width="148" height="2" fill="#1d1d1f" opacity=".6"/>
  </svg>
);

const IPadProArt = () => (
  <svg viewBox="0 0 220 220" width="150" height="150" aria-label="iPad Pro">
    <defs>
      <linearGradient id="ip-body" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#3a3a3c"/>
        <stop offset="1" stopColor="#1d1d1f"/>
      </linearGradient>
    </defs>
    <ellipse cx="110" cy="200" rx="60" ry="5" fill="#000" opacity=".10"/>
    <rect x="58" y="22" width="104" height="176" rx="14" fill="url(#ip-body)"/>
    <rect x="64" y="28" width="92" height="164" rx="6" fill="#0a0a0c"/>
    {/* camera */}
    <circle cx="74" cy="38" r="3.5" fill="#1d1d1f"/>
  </svg>
);

const MoreDevicesArt = () => (
  // Generic "more coming" — three abstract device silhouettes
  <svg viewBox="0 0 220 220" width="200" height="180" aria-label="More devices">
    <defs>
      <linearGradient id="md-a" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#c8c8cf"/>
        <stop offset="1" stopColor="#9a9aa1"/>
      </linearGradient>
    </defs>
    <ellipse cx="110" cy="190" rx="92" ry="6" fill="#000" opacity=".08"/>
    {/* phone-ish */}
    <rect x="28" y="78" width="44" height="92" rx="8" fill="url(#md-a)" opacity=".7"/>
    {/* tablet-ish */}
    <rect x="84" y="56" width="56" height="116" rx="9" fill="url(#md-a)"/>
    {/* console-ish */}
    <rect x="152" y="96" width="48" height="60" rx="7" fill="url(#md-a)" opacity=".75"/>
    {/* plus mark on top */}
    <g transform="translate(110 38)" opacity=".85">
      <circle r="14" fill="#1d1d1f"/>
      <path d="M -6 0 L 6 0 M 0 -6 L 0 6" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
    </g>
  </svg>
);

const SteamDeckArt = () => (
  <ProductPhoto src="assets/steam-deck-product.png?v=20260602-user" alt="Steam Deck front view" />
);


// Small inline icon used in alert rows
const ProductIcon = ({ kind, size = 28 }) => {
  if (kind === "mac-mini") {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
        <rect x="6" y="14" width="28" height="14" rx="3" fill="#c8c8cf"/>
        <rect x="6" y="13" width="28" height="14" rx="3" fill="#dadade"/>
        <circle cx="20" cy="20" r="1.6" fill="#fff"/>
      </svg>
    );
  }
  if (kind === "mac-studio") {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
        <rect x="7" y="10" width="26" height="20" rx="3" fill="#a8a8af"/>
        <rect x="7" y="9" width="26" height="20" rx="3" fill="#d8d8de"/>
        <circle cx="20" cy="19" r="1.6" fill="#fff"/>
      </svg>
    );
  }
  if (kind === "steam-deck") {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
        <path d="M5 16 C5 11 8 9 13 9 L27 9 C32 9 35 11 35 16 L35 24 C35 29 32 31 27 31 L13 31 C8 31 5 29 5 24 Z" fill="#2d2d31"/>
        <rect x="13" y="13" width="14" height="14" rx="2" fill="#121214"/>
        <circle cx="9.5" cy="19" r="2.5" fill="#111"/>
        <circle cx="30.5" cy="19" r="2.5" fill="#111"/>
        <circle cx="9.5" cy="25" r="1.1" fill="#8a8a93"/>
        <circle cx="30.5" cy="25" r="1.1" fill="#8a8a93"/>
      </svg>
    );
  }
  return null;
};

Object.assign(window, { PingMark, Wordmark, Logo, Apple, MacMiniArt, MacStudioArt, MacBookProArt, IPadProArt, MoreDevicesArt, SteamDeckArt, ProductIcon });
