// Shared design tokens: palette derived from "coin on crystal" hero photo:
// kyanite-blue crystals, frosty quartz whites, raspberry tourmaline, and pure gold buffalo coin
const PCB_TOKENS = {
  navy: '#1a3a6e',         // kyanite blue (deep)
  navyDeep: '#0f2348',     // shadow blue from crystal cracks
  navySoft: '#2c5394',     // mid kyanite
  gold: '#d4a64a',         // buffalo coin gold
  goldBright: '#e8c977',   // coin highlight
  goldDeep: '#a87a2e',     // coin shadow
  cream: '#f2ecdf',        // frosty quartz
  paper: '#faf6ec',        // off-white quartz highlight
  ink: '#1a1a1a',
  raspberry: '#8b3a4e',    // tourmaline accent
  rule: 'rgba(212, 166, 74, 0.35)',
  ruleSoft: 'rgba(212, 166, 74, 0.18)',
};

// Inline SVG: shop building (Victorian): placeholder silhouette
const ShopBuilding = ({ style, tone = 'gold' }) => {
  const c = tone === 'gold' ? PCB_TOKENS.gold : '#fff';
  return (
    <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg" style={style} aria-hidden="true">
      <defs>
        <linearGradient id="bldgSky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0e1b2c"/>
          <stop offset="1" stopColor="#1a3050"/>
        </linearGradient>
      </defs>
      <rect width="400" height="500" fill="url(#bldgSky)"/>
      {/* mountains */}
      <path d="M0 380 L70 300 L130 340 L200 260 L270 320 L340 280 L400 340 L400 500 L0 500Z" fill="#0a1422" opacity="0.7"/>
      {/* main building body */}
      <rect x="100" y="180" width="200" height="240" fill={c} opacity="0.92"/>
      {/* roof tiers */}
      <polygon points="100,180 200,120 300,180" fill={c}/>
      <rect x="170" y="80" width="60" height="60" fill={c}/>
      <polygon points="170,80 200,40 230,80" fill={c}/>
      {/* clock */}
      <circle cx="200" cy="105" r="14" fill={PCB_TOKENS.navy} stroke={c} strokeWidth="2"/>
      <line x1="200" y1="105" x2="200" y2="96" stroke={c} strokeWidth="1.5"/>
      <line x1="200" y1="105" x2="207" y2="105" stroke={c} strokeWidth="1.5"/>
      {/* windows */}
      <g fill={PCB_TOKENS.navy} opacity="0.85">
        <rect x="120" y="200" width="30" height="50"/>
        <rect x="170" y="200" width="30" height="50"/>
        <rect x="220" y="200" width="30" height="50"/>
        <rect x="270" y="200" width="20" height="50"/>
        <rect x="120" y="270" width="30" height="50"/>
        <rect x="170" y="270" width="30" height="50"/>
        <rect x="220" y="270" width="30" height="50"/>
        <rect x="270" y="270" width="20" height="50"/>
      </g>
      {/* awning stripe */}
      <rect x="100" y="340" width="200" height="14" fill={PCB_TOKENS.navy}/>
      <rect x="100" y="354" width="200" height="6" fill={c}/>
      {/* door */}
      <rect x="180" y="360" width="40" height="60" fill={PCB_TOKENS.navy}/>
      <rect x="180" y="360" width="40" height="60" fill="none" stroke={c} strokeWidth="1"/>
    </svg>
  );
};

// Coin SVG: used as decorative element
const Coin = ({ size = 60, label = '50', style }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={style} aria-hidden="true">
    <defs>
      <radialGradient id={`coinGrad-${label}`} cx="0.4" cy="0.35">
        <stop offset="0" stopColor="#f4d98a"/>
        <stop offset="0.5" stopColor="#c9a35c"/>
        <stop offset="1" stopColor="#7a5a2a"/>
      </radialGradient>
    </defs>
    <circle cx="50" cy="50" r="48" fill={`url(#coinGrad-${label})`} stroke="#7a5a2a" strokeWidth="1"/>
    <circle cx="50" cy="50" r="42" fill="none" stroke="#7a5a2a" strokeWidth="0.5" strokeDasharray="2 2" opacity="0.6"/>
    <circle cx="50" cy="50" r="36" fill="none" stroke="#a37e3a" strokeWidth="0.8"/>
    <text x="50" y="56" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="22" fontWeight="700" fill="#5a3f18">{label}</text>
  </svg>
);

// Mountain ridge SVG
const MountainRidge = ({ style, color = '#0a1422' }) => (
  <svg viewBox="0 0 1600 400" xmlns="http://www.w3.org/2000/svg" style={style} preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <linearGradient id="mrSky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1a2e4a"/>
        <stop offset="0.6" stopColor="#0e1b2c"/>
        <stop offset="1" stopColor="#08111d"/>
      </linearGradient>
    </defs>
    <rect width="1600" height="400" fill="url(#mrSky)"/>
    {/* far ridge */}
    <path d="M0 280 L150 200 L320 240 L500 170 L680 220 L860 160 L1040 210 L1220 175 L1400 230 L1600 195 L1600 400 L0 400Z" fill="#152a44" opacity="0.7"/>
    {/* mid ridge */}
    <path d="M0 320 L120 260 L260 300 L420 230 L580 280 L760 220 L920 270 L1100 240 L1280 290 L1460 250 L1600 280 L1600 400 L0 400Z" fill="#0e1b2c"/>
    {/* near ridge */}
    <path d="M0 360 L100 320 L240 350 L400 300 L560 340 L740 290 L920 330 L1100 305 L1280 345 L1460 315 L1600 340 L1600 400 L0 400Z" fill={color}/>
    {/* tree silhouettes */}
    <g fill="#050a13">
      {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map(i => (
        <polygon key={i} points={`${i*100+20},370 ${i*100+30},345 ${i*100+40},370`}/>
      ))}
    </g>
  </svg>
);

// Stack imagery placeholders
const VaultInterior = ({ style }) => (
  <svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" style={style} aria-hidden="true">
    <defs>
      <linearGradient id="vaultBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#2a2018"/>
        <stop offset="1" stopColor="#0f0a06"/>
      </linearGradient>
    </defs>
    <rect width="600" height="400" fill="url(#vaultBg)"/>
    {/* shelving */}
    <g stroke="#3a2d1d" strokeWidth="1.5">
      <line x1="0" y1="120" x2="600" y2="120"/>
      <line x1="0" y1="200" x2="600" y2="200"/>
      <line x1="0" y1="280" x2="600" y2="280"/>
    </g>
    {/* coins on shelves */}
    {[40,90,140,190,240,290,340,390,440,490,540].map((x, i) => (
      <g key={i}>
        <ellipse cx={x} cy="115" rx="18" ry="5" fill="#c9a35c" opacity="0.85"/>
        <ellipse cx={x} cy="195" rx="18" ry="5" fill="#c9a35c" opacity="0.7"/>
        <ellipse cx={x} cy="275" rx="18" ry="5" fill="#d9d6d0" opacity="0.7"/>
      </g>
    ))}
    {/* counter top */}
    <rect x="0" y="320" width="600" height="80" fill="#1a1208"/>
    {/* coin stacks on counter */}
    <g>
      <rect x="80" y="290" width="40" height="30" fill="#c9a35c"/>
      <rect x="80" y="285" width="40" height="5" fill="#e0bd75"/>
      <rect x="200" y="295" width="50" height="25" fill="#d9d6d0"/>
      <rect x="200" y="290" width="50" height="5" fill="#fff"/>
      <rect x="380" y="280" width="35" height="40" fill="#c9a35c"/>
      <rect x="450" y="300" width="60" height="20" fill="#d9d6d0"/>
    </g>
  </svg>
);

const CoinDisplay = ({ style }) => (
  <svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" style={style} aria-hidden="true">
    <rect width="600" height="500" fill="#0a1422"/>
    {/* velvet pad */}
    <rect x="40" y="40" width="520" height="420" fill="#1a0e1a" rx="4"/>
    <rect x="50" y="50" width="500" height="400" fill="#2a1418" rx="2"/>
    {/* coins arranged */}
    <g>
      {[
        [120, 130, 50, 'gold'], [220, 130, 50, 'silver'], [320, 130, 50, 'gold'],
        [420, 130, 50, 'silver'], [120, 230, 50, 'silver'], [220, 230, 50, 'gold'],
        [320, 230, 50, 'silver'], [420, 230, 50, 'gold'], [170, 330, 50, 'gold'],
        [270, 330, 50, 'silver'], [370, 330, 50, 'gold'],
      ].map(([cx, cy, r, kind], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy+3} r={r} fill="#000" opacity="0.5"/>
          <circle cx={cx} cy={cy} r={r} fill={kind === 'gold' ? '#c9a35c' : '#c8c4be'} stroke={kind === 'gold' ? '#7a5a2a' : '#6a6863'} strokeWidth="1.5"/>
          <circle cx={cx} cy={cy} r={r-6} fill="none" stroke={kind === 'gold' ? '#9c7a3c' : '#8a8780'} strokeWidth="0.6"/>
        </g>
      ))}
    </g>
    {/* gold bar */}
    <g transform="translate(440, 320) rotate(-8)">
      <rect x="0" y="0" width="100" height="50" fill="#c9a35c" stroke="#7a5a2a" strokeWidth="1"/>
      <rect x="0" y="0" width="100" height="8" fill="#e0bd75"/>
      <text x="50" y="32" textAnchor="middle" fontFamily="serif" fontSize="9" fill="#5a3f18">999.9 FINE</text>
    </g>
  </svg>
);

const RawSpecimen = ({ style }) => (
  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" style={style} aria-hidden="true">
    <defs>
      <radialGradient id="specBg" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#3a4a5a"/>
        <stop offset="1" stopColor="#0a1422"/>
      </radialGradient>
    </defs>
    <rect width="400" height="400" fill="url(#specBg)"/>
    {/* rocky cluster */}
    <g>
      <polygon points="80,200 120,120 200,140 240,200 220,280 140,290 70,260" fill="#5a6a7a" stroke="#2a3a4a" strokeWidth="1"/>
      <polygon points="120,120 200,140 180,180 130,170" fill="#7a8a9a" opacity="0.6"/>
      {/* blue crystal facets */}
      <polygon points="150,150 180,140 200,170 170,200 140,180" fill="#3a5a8a"/>
      <polygon points="180,140 200,170 220,150 210,135" fill="#5a7aaa" opacity="0.8"/>
      <polygon points="100,220 140,210 150,250 120,260" fill="#2a4a7a"/>
      <polygon points="200,240 240,230 230,270 210,275" fill="#3a5a8a" opacity="0.7"/>
      {/* gold coin embedded */}
      <circle cx="170" cy="240" r="35" fill="#c9a35c" stroke="#7a5a2a" strokeWidth="1.5"/>
      <text x="170" y="248" textAnchor="middle" fontFamily="serif" fontSize="18" fontWeight="700" fill="#5a3f18">AU</text>
    </g>
  </svg>
);

// Logo / wordmark: uses the bison mark from uploaded logo
const PCBLogo = ({ color = '#d4a64a', style, size = 'md' }) => {
  const s = size === 'lg' ? { mark: 56, gap: 14, title: 28, sub: 11 } :
            size === 'md' ? { mark: 44, gap: 12, title: 20, sub: 9 } :
            { mark: 32, gap: 8, title: 16, sub: 8 };
  // The PNG has a white background; use mix-blend-mode multiply on light surfaces,
  // and on dark surfaces wrap it in a light circle so the white doesn't clash.
  const isLight = color === '#fff' || color === '#ffffff' || color.toLowerCase().startsWith('#f');
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: s.gap, ...style }}>
      <div style={{
        width: s.mark,
        height: s.mark,
        borderRadius: '50%',
        background: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        flexShrink: 0,
        boxShadow: isLight ? 'none' : '0 0 0 1px rgba(212,166,74,0.4)',
      }}>
        <img src="images/bison-logo.png" width={s.mark} height={s.mark} alt="" style={{
          display: 'block',
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.05 }}>
        <span style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: s.title, fontWeight: 600, color, letterSpacing: '0.02em' }}>Parker Coin</span>
        <span style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: s.sub, color, letterSpacing: '0.32em', textTransform: 'uppercase', opacity: 0.85 }}>& Bullion</span>
      </div>
    </div>
  );
};

// Real photos: local files (uploaded by user)
const PCB_PHOTOS = {
  // Crystal+coin signature image, two tiers: 1280 native (sharpened) and a
  // Lanczos-upscaled+sharpened 2560 for desktop/retina via srcset. The old
  // crystal-coin.png (4.4MB) stays on disk as the master but is not shipped.
  heroMountains: 'images/hero-crystal-1280.jpg',
  heroMountains2x: 'images/hero-crystal-2560.jpg',
  // Photos pulled from the client's live Google Site 2026-07-29 (see
  // parkerbullion/site-images/): storefront w/ clock tower, interior w/ bison
  // skull, graded gold tray, silver rounds tray. colorado-mountains.jpg is
  // staged in images/ but not yet placed anywhere.
  shopBuilding: 'images/storefront.jpg',
  coinCases: 'images/coin-cases.jpg',
  shopInterior: 'images/interior-bison.jpg',
  goldBars: 'images/gold-bars.jpg',
  gradedGold: 'images/graded-gold.jpg',
  silverTray: 'images/silver-tray.jpg',
  bisonLogo: 'images/bison-logo.png',
};

// Photo wrappers: TRY real photos, fall back to SVG placeholders if Google's CDN blocks the request.
// Google Sites' lh3.googleusercontent.com URLs are referrer-locked, so cross-origin loads from this
// preview will fail. We swap to the SVG placeholder on `onError`.
const PhotoWithFallback = ({ src, srcSet, sizes, Fallback, style, alt }) => {
  const [failed, setFailed] = React.useState(false);
  if (failed) return <Fallback style={style}/>;
  return <img src={src} srcSet={srcSet} sizes={sizes} onError={() => setFailed(true)} style={{ width: '100%', display: 'block', objectFit: 'cover', ...style }} alt={alt}/>;
};

const PhotoShop = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.shopBuilding} Fallback={ShopBuilding} style={style} alt="Parker Coin & Bullion storefront"/>
);
const PhotoInterior = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.shopInterior} Fallback={VaultInterior} style={style} alt="Shop interior with display cases"/>
);
const PhotoCases = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.coinCases} Fallback={CoinDisplay} style={style} alt="Coin display cases"/>
);
const PhotoSpread = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.silverTray} Fallback={CoinDisplay} style={style} alt="Trays of silver rounds, coins, and bars"/>
);
const PhotoCrystal = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.gradedGold} Fallback={RawSpecimen} style={style} alt="Tray of graded and slabbed gold coins"/>
);
const PhotoGoldBars = ({ style }) => (
  <PhotoWithFallback src={PCB_PHOTOS.goldBars} Fallback={RawSpecimen} style={style} alt="Gold bars detail"/>
);

// Real-photo mountain hero (uses backgroundImage so it can fill an arbitrary box)
const PhotoMountainBg = ({ style, children }) => (
  <div style={{
    backgroundImage: `linear-gradient(to bottom, rgba(8,17,29,0.45), rgba(8,17,29,0.7)), url(${PCB_PHOTOS.heroMountains2x})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    ...style,
  }}>{children}</div>
);

// Mountain hero with fallback to SVG ridge
const PhotoMountainHero = ({ opacity = 1 }) => {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return (
      <>
        <MountainRidge style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity }}/>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 30%, rgba(201,163,92,0.18), transparent 60%)' }}/>
      </>
    );
  }
  return (
    <>
      <img src={PCB_PHOTOS.heroMountains}
        srcSet={`${PCB_PHOTOS.heroMountains} 1280w, ${PCB_PHOTOS.heroMountains2x} 2560w`}
        sizes="100vw"
        onError={() => setFailed(true)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity }} alt=""/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(8,17,29,0.45), rgba(8,17,29,0.68))' }}/>
    </>
  );
};

Object.assign(window, {
  PCB_TOKENS, PCB_PHOTOS, ShopBuilding, Coin, MountainRidge, VaultInterior, CoinDisplay, RawSpecimen, PCBLogo,
  PhotoShop, PhotoInterior, PhotoCases, PhotoSpread, PhotoCrystal, PhotoGoldBars, PhotoMountainBg, PhotoMountainHero,
});
