// ============================================================
// DANZAR Decks — Color & Photo Data  |  v3.0  |  Июнь 2026
// ============================================================

const COLOR_DATA = {
  pine: {
    id: 'pine', label: 'Natural Wood — Pressure Treated', tag: 'Budget-Friendly', hex: '#C4A265', colorStep: false,
    mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg',
    swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg',
    photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342ec3f7d604e22df64525_10-Carrboro-Deck.jpg'],
    description: 'Classic pressure-treated lumber — strong, affordable, and ready for staining or painting in any color you choose.',
    descriptionShort: 'Strong, affordable, customizable'
  },
  cedar: {
    id: 'cedar', label: 'Natural Wood — Western Red Cedar', tag: 'Natural Beauty', hex: '#A0522D', colorStep: false,
    mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png',
    swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png',
    photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342e4c089b812547a36d3f_image%202.png'],
    description: 'Naturally beautiful Western Red Cedar with warm reddish tones. Naturally resistant to rot and insects — a Pacific Northwest classic.',
    descriptionShort: 'Natural warmth & rot resistance'
  },
  timbertech_prime: {
    id: 'timbertech_prime', label: 'Composite Decking — TimberTech Prime+®', tag: 'Most Popular · Low Maintenance', warranty: '25-Year Warranty', colorStep: true,
    colors: [
      { id: 'sea_salt_gray', name: 'Sea Salt Gray', hex: '#8FA89B', description: 'A versatile weathered gray with cool and warm undertones — pairs beautifully with any home style.', descriptionShort: 'Versatile weathered gray', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3431370f90869eed663245_timbertech-composite-prime-sea-salt-gray-decking-beauty-1.jpg'] },
      { id: 'dark_cocoa', name: 'Dark Cocoa', hex: '#4A2E1A', description: 'Rich dark brown with deep chocolatey undertones — a timeless classic that adds warmth and elegance.', descriptionShort: 'Rich dark chocolate brown', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343107e4a9eb105f74f12e_TimberTech-Dark-Cocoa-Prime-Plus-Collection-EDGE-Decking-Swatch.jpg'] },
      { id: 'coconut_husk', name: 'Coconut Husk', hex: '#C4A265', description: 'Bright sunny tan with golden tones — light, inviting, and perfect for Pacific Northwest summers.', descriptionShort: 'Warm golden tan', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a3430dc0bc8f3856e84007f_timbertech-edge-coconuthusk-displayswatch-500x500-4.jpg'] }
    ]
  },
  timbertech_landmark: {
    id: 'timbertech_landmark', label: 'Premium PVC Decking — TimberTech Landmark®', tag: 'Premium · 50-Year Warranty', warranty: '50-Year Warranty', colorStep: true,
    colors: [
      { id: 'american_walnut', name: 'American Walnut', hex: '#3D2314', description: 'Deep, rich brown ranging from chocolate to ashy black — captures the bold character of premium walnut hardwood.', descriptionShort: 'Deep premium walnut', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342fa95e934d4b43ed0e44_TimberTech-American-Walnut-Landmark-Collection-.jpg'] },
      { id: 'castle_gate', name: 'Castle Gate', hex: '#6B7070', description: 'Stormy gray with cool undertones — a modern weathered look inspired by reclaimed wood.', descriptionShort: 'Modern weathered gray', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343036d68ef6da8eb6f11d_TimberTech-Avanced-PVC-Landmark-Castle-Gate-pdp-beauty-2.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343036d68ef6da8eb6f11d_TimberTech-Avanced-PVC-Landmark-Castle-Gate-pdp-beauty-2.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343036d68ef6da8eb6f11d_TimberTech-Avanced-PVC-Landmark-Castle-Gate-pdp-beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343036d68ef6da8eb6f11d_TimberTech-Avanced-PVC-Landmark-Castle-Gate-pdp-beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343036d68ef6da8eb6f11d_TimberTech-Avanced-PVC-Landmark-Castle-Gate-pdp-beauty-2.jpg'] },
      { id: 'french_white_oak', name: 'French White Oak', hex: '#B8A89A', description: 'Light organic hue with warm gray and oak tones — brings a sophisticated European craftsman feel.', descriptionShort: 'Light sophisticated oak', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343085f74aaef6d01a93ab_TimberTech-French-White-Oak-Landmark-Decking-Beauty-2.jpg'] },
      { id: 'boardwalk', name: 'Boardwalk', hex: '#C5B8A8', description: 'Light warm gray inspired by weathered coastal boardwalks — bright, airy, and timeless.', descriptionShort: 'Coastal light gray', mainPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg', swatchPhoto: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg', photos: ['https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg','https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a343011884a18c683b490f8_TimberTech-Boardwalk-Landmark-APVC-Decking-Beauty-1%20(1).jpg'] }
    ]
  }
};

const RAILING_DATA = [
  { id: 'none', label: 'No Railing', description: 'Clean open look — available for low decks only.', descriptionShort: 'Low decks only', photo: null, subOptions: null, availableFor: ['low'] },
  { id: 'wood', label: 'Wood Railing', tag: '⭐ Most Popular', description: 'Classic wood railing — choose your baluster style. Same price for both options.', descriptionShort: 'Classic & timeless', photo: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342de51451854f90d49995_All-Wood%20Railing.jpeg',
    subOptions: [
      { id: 'wood_balusters',  label: 'Wood Balusters',  description: 'Traditional all-wood look — warm, natural, classic Pacific Northwest style.', photo: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342de51451854f90d49995_All-Wood%20Railing.jpeg' },
      { id: 'metal_balusters', label: 'Metal Balusters', description: 'Wood posts and rails with sleek metal balusters — modern twist on a classic.', photo: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342de6410c53f6f0ebe64f_Wood%20and%20Metal%20Railing.jpeg' }
    ], availableFor: ['low', 'medium', 'high'] },
  { id: 'aluminum', label: 'Aluminum Railing', tag: '', description: 'Low-maintenance aluminum panels — durable, clean lines, no painting required.', descriptionShort: 'Low maintenance & durable', photo: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342de56bb9f55816ea70d1_Aluminum%20Railing.jpeg', subOptions: null, availableFor: ['low', 'medium', 'high'] },
  { id: 'cable',    label: 'Cable Railing',    tag: '', description: 'Stainless steel cable railing — maximum views, modern look, extremely durable.',  descriptionShort: 'Modern & open views',      photo: 'https://cdn.prod.website-files.com/6a278a92c4ed169da58ece4e/6a342de6bf3fcb5d9d360d46_Cable%20Railing.jpeg', subOptions: null, availableFor: ['low', 'medium', 'high'] }
];

function getPreviewColor(materialId, colorId) {
  const darken = (hex, amt) => {
    const n = parseInt(hex.slice(1), 16);
    const r = Math.max(0, (n >> 16) - Math.round(255 * amt));
    const g = Math.max(0, ((n >> 8) & 0xff) - Math.round(255 * amt));
    const b = Math.max(0, (n & 0xff) - Math.round(255 * amt));
    return '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('');
  };
  let hex = '#C4A265';
  if (materialId === 'pine')  hex = COLOR_DATA.pine.hex;
  if (materialId === 'cedar') hex = COLOR_DATA.cedar.hex;
  if (materialId === 'timbertech_prime' || materialId === 'timbertech_landmark') {
    const colors = COLOR_DATA[materialId]?.colors || [];
    const found = colors.find(c => c.id === colorId);
    hex = found ? found.hex : (colors[0]?.hex || hex);
  }
  return { fill: hex, board: darken(hex, 0.06), stroke: darken(hex, 0.14), sideL: darken(hex, 0.20), sideF: darken(hex, 0.16) };
}

function getColorById(materialId, colorId) {
  if (!COLOR_DATA[materialId]?.colors) return null;
  return COLOR_DATA[materialId].colors.find(c => c.id === colorId) || null;
}