// Gedeelde Showroom-stijl, layout-shell en helpers voor alle pagina's
// Hergebruikt door home, catalogus, product detail, merk-vergelijking.

const { Stud } = window;

const SR = {
  bg: '#f5f3ee',
  paper: '#ffffff',
  ink: '#1a1815',
  ink2: '#5a544c',
  ink3: '#8a8378',
  line: '#d8d2c4',
  lineSoft: '#e8e3d6',
  copper: '#b87333',
  copperSoft: '#d89a6a',
  gold: '#c9a35b',
};

// 6 silhouet-mappen waar de hele site uit vist
const CARS = {
  Supercar: () => Supercar,
  F1: () => F1Car,
  Classic: () => ClassicCar,
  Truck: () => Truck,
  Rally: () => RallyCar,
};

// Productdatabank gedeeld door alle pagina's
const PRODUCTS = [
  { id: 'gtx', shape: 'Supercar', name: 'Bugatti Chiron 42083', tagline: 'De Franse hyperauto in steen',
    image: 'bugatti-chiron.webp',
    tag: 'GRAIL', cat: 'Supercar', price: 549, oldPrice: 599, parts: 3599, scale: '1:8',
    brand: 'LEGO', rare: 5, stock: 3, plate: '42083', year: 2018, hours: 12,
    color: 'Bugatti Blue', ages: '16+',
    specs: { lengte: '56 cm', breedte: '25 cm', hoogte: '14 cm', gewicht: '4.0 kg', onderdelen: 3599, motor: 'W16 (functioneel)', wielen: 'Performance rubber' } },
  { id: 'f24', shape: 'F1Car', name: 'Pole Position F-24', tagline: 'Telemetrie in steen',
    tag: 'NEW', cat: 'F1 / Race', price: 189, parts: 1642, scale: '1:18',
    brand: 'Mattel Bricks', rare: 4, stock: 18, plate: 'F1-2024', year: 2026, hours: 6,
    color: 'Carbon / Gold', ages: '12+',
    specs: { lengte: '32 cm', breedte: '15 cm', hoogte: '8 cm', gewicht: '1.4 kg', onderdelen: 1642, motor: 'V6 Hybrid', wielen: 'Slick rubber' } },
  { id: 'riv', shape: 'ClassicCar', name: 'Riviera 500 Coupé', tagline: 'Een zomer uit 1962',
    tag: 'CLASSIC', cat: 'Klassieker', price: 279, parts: 2341, scale: '1:14',
    brand: 'LEGO', rare: 4, stock: 11, plate: '60S-CPE', year: 2023, hours: 9,
    color: 'Cream / Walnut', ages: '14+',
    specs: { lengte: '36 cm', breedte: '15 cm', hoogte: '11 cm', gewicht: '1.9 kg', onderdelen: 2341, motor: 'Inline 6', wielen: 'Whitewall' } },
  { id: 'xr', shape: 'Truck', name: 'Trailblazer XR', tagline: 'Off-road epos',
    tag: 'POPULAIR', cat: 'Pickup 4×4', price: 159, parts: 1488, scale: '1:18',
    brand: 'Mattel Bricks', rare: 3, stock: 47, plate: 'XR-4×4', year: 2026, hours: 5,
    color: 'Sand / Black', ages: '10+',
    specs: { lengte: '34 cm', breedte: '14 cm', hoogte: '15 cm', gewicht: '1.5 kg', onderdelen: 1488, motor: 'V8 Off-road', wielen: 'All-terrain' } },
  { id: 'phm', shape: 'RallyCar', name: 'Group B Phantom', tagline: 'Verboden hoofdstuk',
    tag: 'LIMITED', cat: 'Rally · 90s', price: 329, parts: 2108, scale: '1:14',
    brand: 'LEGO', rare: 5, stock: 2, plate: 'GR-B-88', year: 2024, hours: 8,
    color: 'Martini Stripes', ages: '14+',
    specs: { lengte: '34 cm', breedte: '16 cm', hoogte: '13 cm', gewicht: '1.8 kg', onderdelen: 2108, motor: 'Turbo 4', wielen: 'Gravel' } },
  { id: 'sa2', shape: 'Supercar', name: 'Silver Arrow Mk II', tagline: 'De volgende generatie',
    tag: 'PRE-ORDER', cat: 'Hypercar', price: 519, parts: 3992, scale: '1:8',
    brand: 'Mattel Bricks', rare: 4, stock: 0, plate: 'SA-MK2', year: 2026, hours: 15,
    color: 'Liquid Silver', ages: '18+',
    specs: { lengte: '56 cm', breedte: '24 cm', hoogte: '12 cm', gewicht: '4.4 kg', onderdelen: 3992, motor: 'Electric Quad', wielen: 'Performance' } },
  { id: 'mns', shape: 'ClassicCar', name: 'Monaco Speedster', tagline: 'Riviera elegantie',
    tag: 'NIEUW', cat: 'Klassieker', price: 219, parts: 1822, scale: '1:18',
    brand: 'LEGO', rare: 3, stock: 22, plate: 'MNC-001', year: 2026, hours: 7,
    color: 'Riviera Blue', ages: '12+',
    specs: { lengte: '28 cm', breedte: '12 cm', hoogte: '9 cm', gewicht: '1.1 kg', onderdelen: 1822, motor: 'Inline 4', wielen: 'Wire spoke' } },
  { id: 'des', shape: 'Truck', name: 'Defender 88', tagline: 'Klimt door alles heen',
    tag: 'CLASSIC', cat: 'Off-road', price: 199, parts: 1955, scale: '1:14',
    brand: 'Mattel Bricks', rare: 3, stock: 14, plate: 'DEF-088', year: 2024, hours: 7,
    color: 'Olive Drab', ages: '12+',
    specs: { lengte: '32 cm', breedte: '14 cm', hoogte: '14 cm', gewicht: '1.6 kg', onderdelen: 1955, motor: 'Diesel V8', wielen: 'Mud-terrain' } },
  { id: 'mns2', shape: 'F1Car', name: 'Heritage GP-72', tagline: 'Vintage formule',
    tag: 'CLASSIC', cat: 'F1 / Race', price: 249, parts: 1421, scale: '1:14',
    brand: 'LEGO', rare: 4, stock: 8, plate: 'GP-72', year: 2024, hours: 6,
    color: 'British Racing', ages: '14+',
    specs: { lengte: '32 cm', breedte: '14 cm', hoogte: '8 cm', gewicht: '1.2 kg', onderdelen: 1421, motor: 'Cosworth V8', wielen: 'Cross-ply' } },
];

const findProduct = (id) => PRODUCTS.find(p => p.id === id) || PRODUCTS[0];

// PRODUCT IMAGE — gebruikt foto als product.image gezet is, anders fallback naar SVG silhouet
const ProductImage = ({ product, color, accent, style }) => {
  if (product && product.image) {
    return (
      <img src={product.image} alt={product.name} style={{
        width: '100%', height: '100%', objectFit: 'contain', display: 'block', ...style,
      }} />
    );
  }
  const Shape = window[product ? product.shape : 'Supercar'];
  return Shape ? <Shape color={color} accent={accent} style={style} /> : null;
};
window.ProductImage = ProductImage;

// SHARED HEADER
const ShowroomHeader = ({ active = 'home', go = () => {} }) => {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', position: 'sticky', top: 0, zIndex: 50,
      background: SR.bg, borderBottom: `1px solid ${SR.line}`,
    }}>
      <div onClick={() => go('home')} style={{ display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }}>
        <Stud size={42} color={SR.ink} label="CB" />
        <div>
          <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 22, letterSpacing: '0.04em' }}>
            BRICKCARS<span style={{ color: SR.copper }}>.</span>NL
          </div>
          <div style={{ fontSize: 10, letterSpacing: '0.3em', color: SR.ink2, marginTop: -2 }}>
            COLLECTOR · GRADE · BRICKS
          </div>
        </div>
      </div>

      <div style={{
        flex: 1, maxWidth: 460, margin: '0 48px',
        display: 'flex', alignItems: 'center',
        background: '#fff', border: `2px solid ${SR.ink}`,
        borderRadius: 6, height: 44, overflow: 'hidden',
      }}>
        <div style={{
          background: '#1a4ba8', color: '#ffd400',
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 9, fontWeight: 700, padding: '0 6px', height: '100%',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
        }}>
          <div style={{ fontSize: 14 }}>★</div><div>NL</div>
        </div>
        <input
          placeholder="ZOEK · 42083 · F1-2024 · DEFENDR"
          style={{
            flex: 1, border: 'none', outline: 'none', background: '#ffd400',
            height: '100%', padding: '0 16px', fontFamily: '"JetBrains Mono", monospace',
            fontSize: 16, fontWeight: 700, letterSpacing: '0.15em', color: '#1a1815',
          }}
        />
        <button style={{
          border: 'none', background: SR.ink, color: '#fff', padding: '0 18px', height: '100%',
          fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, letterSpacing: '0.1em',
          cursor: 'pointer', fontSize: 12,
        }}>ZOEK →</button>
      </div>

      <nav style={{ display: 'flex', gap: 24, alignItems: 'center', fontSize: 13, fontWeight: 500 }}>
        {[
          ['home', 'Showroom'],
          ['catalog', 'Catalogus'],
          ['compare', 'Merken'],
        ].map(([k, l]) => (
          <a key={k} onClick={() => go(k)} style={{
            color: active === k ? SR.copper : SR.ink, textDecoration: 'none',
            cursor: 'pointer', fontWeight: active === k ? 700 : 500,
            paddingBottom: 4, borderBottom: active === k ? `2px solid ${SR.copper}` : '2px solid transparent',
          }}>{l}</a>
        ))}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px',
          border: `1px solid ${SR.ink}`, borderRadius: 99, cursor: 'pointer',
        }}>
          <span style={{ fontSize: 14 }}>🅖</span>
          <span style={{ fontSize: 12, fontWeight: 600 }}>Mijn Garage · 4</span>
        </div>
      </nav>
    </header>
  );
};

// SHARED FOOTER
const ShowroomFooter = () => (
  <footer style={{
    padding: '40px 56px', borderTop: `1px solid ${SR.line}`,
    display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40,
    fontSize: 13, color: SR.ink2,
  }}>
    <div>
      <Stud size={36} color={SR.ink} label="CB" style={{ marginBottom: 12 }}/>
      <div style={{ color: SR.ink, fontWeight: 600 }}>brickcars.nl</div>
      <p style={{ marginTop: 8, lineHeight: 1.5 }}>
      Verzamelaars-platform voor auto bouwsets sinds 2019. KvK 78421334.
      </p>
    </div>
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.25em', fontWeight: 700, color: SR.ink, marginBottom: 14 }}>SHOWROOM</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span>Alle sets</span><span>Limited Edition</span><span>Pre-orders</span><span>Ex-display</span>
      </div>
    </div>
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.25em', fontWeight: 700, color: SR.ink, marginBottom: 14 }}>SERVICE</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span>Verzending NL & EU</span><span>Retour 30 dagen</span><span>Ontbrekende stenen</span><span>Verzekerde levering</span>
      </div>
    </div>
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.25em', fontWeight: 700, color: SR.ink, marginBottom: 14 }}>NIEUWSBRIEF</div>
      <p style={{ margin: 0, marginBottom: 10 }}>Eerste in de rij voor drops & restocks.</p>
      <div style={{ display: 'flex', border: `1px solid ${SR.line}` }}>
        <input placeholder="je@e-mail.nl" style={{ flex: 1, padding: '10px 12px', border: 'none', outline: 'none', background: '#fff', fontSize: 12 }}/>
        <button style={{ background: SR.ink, color: '#fff', border: 'none', padding: '0 14px', fontSize: 11, letterSpacing: '0.15em', fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, cursor: 'pointer' }}>OK</button>
      </div>
    </div>
  </footer>
);

// Reusable: License plate component
const Plate = ({ children, style }) => (
  <div style={{
    background: '#ffd400', border: `2px solid ${SR.ink}`,
    fontFamily: '"JetBrains Mono", monospace', fontWeight: 700,
    fontSize: 11, padding: '3px 8px', borderRadius: 3, letterSpacing: '0.1em',
    color: SR.ink, display: 'inline-block',
    ...style,
  }}>{children}</div>
);

// Reusable: rare stars
const Stars = ({ n = 5, color = SR.copper }) => (
  <span style={{ color, letterSpacing: '0.15em' }}>
    {'★'.repeat(n)}<span style={{ color: SR.ink3 }}>{'★'.repeat(5 - n)}</span>
  </span>
);

Object.assign(window, { SR, CARS, PRODUCTS, findProduct, ShowroomHeader, ShowroomFooter, Plate, Stars });