/* Brand Detail page — every phone from a single brand, chronologically.
   Routed via 'brand.<slug>' (e.g. 'brand.apple'). */

/* ---- Brand metadata ---- */
const BRAND_META = {
  apple: {
    name: 'Apple', region: 'United States, Cupertino', founded: 1976,
    share: 23.4, count: 38,
    tagline: 'The most-shipped premium smartphone brand of the modern era — defined by vertical integration and a six-year support floor.',
    series: ['iPhone Pro Max', 'iPhone Pro', 'iPhone Plus', 'iPhone', 'iPhone mini', 'iPhone SE'],
    flagship: 'iPhone 16 Pro Max',
    color: '#0A0A0A',
  },
  samsung: {
    name: 'Samsung', region: 'South Korea, Suwon', founded: 1969,
    share: 19.8, count: 412,
    tagline: 'The largest Android maker in the world — and the only brand still shipping flagships at every price tier from $200 to $2,000.',
    series: ['Galaxy S Ultra', 'Galaxy S+', 'Galaxy S', 'Galaxy Z Fold', 'Galaxy Z Flip', 'Galaxy A'],
    flagship: 'Galaxy S25 Ultra',
    color: '#1428A0',
  },
  xiaomi: {
    name: 'Xiaomi', region: 'China, Beijing', founded: 2010,
    share: 13.6, count: 287,
    tagline: 'The fastest-rising premium player. The Ultra line has earned a place in the camera-flagship conversation; the Mi/Poco line still defines value.',
    series: ['Xiaomi Ultra', 'Xiaomi Pro', 'Xiaomi', 'Mix', 'Redmi Note', 'Poco'],
    flagship: 'Xiaomi 15 Ultra',
    color: '#FF6900',
  },
  oppo: {
    name: 'OPPO', region: 'China, Dongguan', founded: 2004,
    share: 8.9, count: 246,
    tagline: 'BBK\'s style-led brand. The Find X line carries the flagship banner; the Reno line owns the upper mid-range.',
    series: ['Find X Pro', 'Find X', 'Find N', 'Reno', 'A-series'],
    flagship: 'Find X8 Pro',
    color: '#2D8C3C',
  },
  vivo: {
    name: 'Vivo', region: 'China, Dongguan', founded: 2009,
    share: 8.2, count: 218,
    tagline: 'Camera-first flagships co-engineered with Zeiss. The X Pro line\'s telephoto reach is the benchmark for any periscope discussion.',
    series: ['X Pro', 'X', 'V', 'Y'],
    flagship: 'X200 Pro',
    color: '#415FFF',
  },
  oneplus: {
    name: 'OnePlus', region: 'China, Shenzhen', founded: 2013,
    share: 3.4, count: 64,
    tagline: 'Started as a flagship-killer, became one. The 13 is the best argument for the brand\'s thesis in five years.',
    series: ['OnePlus flagship', 'Nord', 'OnePlus R'],
    flagship: 'OnePlus 13',
    color: '#EB0028',
  },
  google: {
    name: 'Google', region: 'United States, Mountain View', founded: 2016,
    share: 1.2, count: 18,
    tagline: 'Lowest market share of the featured brands, highest software ambition. Pixel cameras and 7-year update commitments are the rest of the industry\'s benchmark.',
    series: ['Pixel Pro XL', 'Pixel Pro', 'Pixel', 'Pixel a', 'Pixel Fold'],
    flagship: 'Pixel 9 Pro XL',
    color: '#4285F4',
  },
  honor: {
    name: 'Honor', region: 'China, Shenzhen', founded: 2013,
    share: 2.7, count: 96,
    tagline: 'Spun out of Huawei in 2020. Silicon-carbon batteries and book-style foldables are its current competitive weapons.',
    series: ['Magic Pro', 'Magic V', 'Magic'],
    flagship: 'Magic 7 Pro',
    color: '#E60012',
  },
  realme: {
    name: 'Realme', region: 'China, Shenzhen', founded: 2018,
    share: 3.2, count: 142,
    tagline: 'Born as an Oppo sub-brand, now independent. The GT line punches into the lower flagship tier with aggressive pricing.',
    series: ['GT Pro', 'GT', 'Number series'],
    flagship: 'GT7 Pro',
    color: '#FFD200',
  },
  sony: {
    name: 'Sony', region: 'Japan, Tokyo', founded: 2001,
    share: 0.6, count: 47,
    tagline: 'The "by professionals, for professionals" line. Manual camera controls, true 21:9 cinema displays, and the smallest user base of any tier-1 brand.',
    series: ['Xperia 1', 'Xperia 5', 'Xperia 10'],
    flagship: 'Xperia 1 VI',
    color: '#000000',
  },
  nothing: {
    name: 'Nothing', region: 'United Kingdom, London', founded: 2020,
    share: 0.4, count: 8,
    tagline: 'Five years old, eight phones shipped, and a louder voice than the share suggests. The Glyph interface remains the only post-iPhone design metaphor that landed.',
    series: ['Phone', 'Phone a'],
    flagship: 'Phone 3',
    color: '#FF3B30',
  },
  motorola: {
    name: 'Motorola', region: 'United States, Chicago', founded: 1928,
    share: 2.1, count: 184,
    tagline: 'The oldest brand on the list — older than the cellular industry. The Edge line carries the flagship banner; the Razr keeps the legacy clamshell alive.',
    series: ['Edge Ultra', 'Edge Pro', 'Edge', 'Razr', 'Moto G'],
    flagship: 'Edge 50 Ultra',
    color: '#0E1E2D',
  },
};

/* ---- Phone rosters (release date desc within each brand) ---- */
const BRAND_PHONES = {
  apple: [
    { model: 'iPhone 16 Pro Max', year: 2025, series: 'Pro Max', price: '$1,199', spec: '6.9" · A18 Pro · 8 GB · 4685 mAh', score: 91, status: 'current' },
    { model: 'iPhone 16 Pro',     year: 2025, series: 'Pro',     price: '$999',   spec: '6.3" · A18 Pro · 8 GB · 3582 mAh', score: 90, status: 'current' },
    { model: 'iPhone 16 Plus',    year: 2025, series: 'Plus',    price: '$899',   spec: '6.7" · A18 · 8 GB · 4674 mAh',     score: 85, status: 'current' },
    { model: 'iPhone 16',         year: 2025, series: 'Standard',price: '$799',   spec: '6.1" · A18 · 8 GB · 3561 mAh',     score: 84, status: 'current' },
    { model: 'iPhone 15 Pro Max', year: 2024, series: 'Pro Max', price: '$899',   spec: '6.7" · A17 Pro · 8 GB · 4422 mAh', score: 87, status: 'available' },
    { model: 'iPhone 15 Pro',     year: 2024, series: 'Pro',     price: '$799',   spec: '6.1" · A17 Pro · 8 GB · 3274 mAh', score: 85, status: 'available' },
    { model: 'iPhone 15 Plus',    year: 2023, series: 'Plus',    price: '$699',   spec: '6.7" · A16 · 6 GB · 4383 mAh',     score: 82, status: 'available' },
    { model: 'iPhone 15',         year: 2023, series: 'Standard',price: '$599',   spec: '6.1" · A16 · 6 GB · 3349 mAh',     score: 79, status: 'available' },
    { model: 'iPhone 14 Pro Max', year: 2022, series: 'Pro Max', price: '—',      spec: '6.7" · A16 · 6 GB · 4323 mAh',     score: 84, status: 'eol' },
    { model: 'iPhone 14 Pro',     year: 2022, series: 'Pro',     price: '—',      spec: '6.1" · A16 · 6 GB · 3200 mAh',     score: 82, status: 'eol' },
    { model: 'iPhone 13 Pro Max', year: 2021, series: 'Pro Max', price: '—',      spec: '6.7" · A15 · 6 GB · 4352 mAh',     score: 80, status: 'eol' },
    { model: 'iPhone 13 mini',    year: 2021, series: 'mini',    price: '—',      spec: '5.4" · A15 · 4 GB · 2406 mAh',     score: 78, status: 'eol' },
    { model: 'iPhone SE (3rd gen)', year: 2022, series: 'SE',    price: '$429',   spec: '4.7" · A15 · 4 GB · 2018 mAh',     score: 70, status: 'available' },
    { model: 'iPhone 12 Pro Max', year: 2020, series: 'Pro Max', price: '—',      spec: '6.7" · A14 · 6 GB · 3687 mAh',     score: 76, status: 'eol' },
    { model: 'iPhone 12 mini',    year: 2020, series: 'mini',    price: '—',      spec: '5.4" · A14 · 4 GB · 2227 mAh',     score: 73, status: 'eol' },
  ],
  samsung: [
    { model: 'Galaxy S25 Ultra',   year: 2025, series: 'S Ultra',  price: '$1,299', spec: '6.9" · SD 8 Elite · 12 GB · 5000 mAh',  score: 90, status: 'current' },
    { model: 'Galaxy S25+',        year: 2025, series: 'S+',       price: '$999',   spec: '6.7" · SD 8 Elite · 12 GB · 4900 mAh',  score: 86, status: 'current' },
    { model: 'Galaxy S25',         year: 2025, series: 'S',        price: '$799',   spec: '6.2" · SD 8 Elite · 12 GB · 4000 mAh',  score: 84, status: 'current' },
    { model: 'Galaxy S25 Edge',    year: 2025, series: 'S Edge',   price: '$1,099', spec: '6.7" · SD 8 Elite · 12 GB · 3900 mAh',  score: 83, status: 'current' },
    { model: 'Galaxy Z Fold6',     year: 2024, series: 'Z Fold',   price: '$1,899', spec: '7.6" · SD 8 Gen 3 · 12 GB · 4400 mAh',  score: 88, status: 'current' },
    { model: 'Galaxy Z Flip6',     year: 2024, series: 'Z Flip',   price: '$1,099', spec: '6.7" · SD 8 Gen 3 · 12 GB · 4000 mAh',  score: 82, status: 'current' },
    { model: 'Galaxy S24 Ultra',   year: 2024, series: 'S Ultra',  price: '$899',   spec: '6.8" · SD 8 Gen 3 · 12 GB · 5000 mAh',  score: 87, status: 'available' },
    { model: 'Galaxy S24 FE',      year: 2024, series: 'S FE',     price: '$549',   spec: '6.7" · Exynos 2400e · 8 GB · 4700 mAh', score: 75, status: 'available' },
    { model: 'Galaxy A55',         year: 2024, series: 'A',        price: '$399',   spec: '6.6" · Exynos 1480 · 8 GB · 5000 mAh',  score: 70, status: 'current' },
    { model: 'Galaxy A35',         year: 2024, series: 'A',        price: '$329',   spec: '6.6" · Exynos 1380 · 6 GB · 5000 mAh',  score: 65, status: 'current' },
    { model: 'Galaxy S23 Ultra',   year: 2023, series: 'S Ultra',  price: '—',      spec: '6.8" · SD 8 Gen 2 · 12 GB · 5000 mAh',  score: 83, status: 'eol' },
    { model: 'Galaxy Z Fold5',     year: 2023, series: 'Z Fold',   price: '—',      spec: '7.6" · SD 8 Gen 2 · 12 GB · 4400 mAh',  score: 81, status: 'eol' },
    { model: 'Galaxy Note 20 Ultra', year: 2020, series: 'Note',   price: '—',      spec: '6.9" · SD 865+ · 12 GB · 4500 mAh',     score: 75, status: 'eol' },
  ],
  xiaomi: [
    { model: 'Xiaomi 15 Ultra',    year: 2025, series: 'Ultra', price: '$1,499', spec: '6.73" · SD 8 Elite · 16 GB · 6000 mAh', score: 87, status: 'current' },
    { model: 'Xiaomi 15 Pro',      year: 2025, series: 'Pro',   price: '$1,199', spec: '6.73" · SD 8 Elite · 16 GB · 6100 mAh', score: 85, status: 'current' },
    { model: 'Xiaomi 15',          year: 2025, series: 'Standard', price: '$899', spec: '6.36" · SD 8 Elite · 12 GB · 5240 mAh', score: 83, status: 'current' },
    { model: 'Xiaomi Mix Fold 4',  year: 2024, series: 'Mix',   price: '$1,799', spec: '7.98" · SD 8 Gen 3 · 16 GB · 5100 mAh', score: 84, status: 'current' },
    { model: 'Redmi Note 14 Pro+', year: 2024, series: 'Redmi Note', price: '$449', spec: '6.67" · SD 7s Gen 3 · 12 GB · 6200 mAh', score: 76, status: 'current' },
    { model: 'Poco F7 Pro',        year: 2025, series: 'Poco',  price: '$499',   spec: '6.67" · SD 8 Gen 3 · 12 GB · 5500 mAh', score: 83, status: 'current' },
    { model: 'Poco X7 Pro',        year: 2025, series: 'Poco',  price: '$329',   spec: '6.67" · Dimensity 8400 · 8 GB · 6000 mAh', score: 74, status: 'current' },
    { model: 'Xiaomi 14 Ultra',    year: 2024, series: 'Ultra', price: '—',      spec: '6.73" · SD 8 Gen 3 · 16 GB · 5300 mAh', score: 84, status: 'available' },
    { model: 'Xiaomi 13 Pro',      year: 2023, series: 'Pro',   price: '—',      spec: '6.73" · SD 8 Gen 2 · 12 GB · 4820 mAh', score: 80, status: 'eol' },
    { model: 'Mi 11 Ultra',        year: 2021, series: 'Mi Ultra', price: '—',   spec: '6.81" · SD 888 · 12 GB · 5000 mAh',     score: 75, status: 'eol' },
  ],
  google: [
    { model: 'Pixel 9 Pro XL',     year: 2025, series: 'Pro XL', price: '$1,099', spec: '6.8" · Tensor G4 · 16 GB · 5060 mAh', score: 88, status: 'current' },
    { model: 'Pixel 9 Pro',        year: 2025, series: 'Pro',   price: '$999',   spec: '6.3" · Tensor G4 · 16 GB · 4700 mAh', score: 86, status: 'current' },
    { model: 'Pixel 9',            year: 2025, series: 'Standard', price: '$799', spec: '6.3" · Tensor G4 · 12 GB · 4700 mAh', score: 81, status: 'current' },
    { model: 'Pixel 9 Pro Fold',   year: 2025, series: 'Pro Fold', price: '$1,799', spec: '8.0" · Tensor G4 · 16 GB · 4650 mAh', score: 86, status: 'current' },
    { model: 'Pixel 9a',           year: 2025, series: 'a',     price: '$499',   spec: '6.3" · Tensor G4 · 8 GB · 5100 mAh',  score: 82, status: 'current' },
    { model: 'Pixel 8 Pro',        year: 2023, series: 'Pro',   price: '—',      spec: '6.7" · Tensor G3 · 12 GB · 5050 mAh', score: 84, status: 'available' },
    { model: 'Pixel 8a',           year: 2024, series: 'a',     price: '$399',   spec: '6.1" · Tensor G3 · 8 GB · 4492 mAh',  score: 78, status: 'available' },
    { model: 'Pixel 7 Pro',        year: 2022, series: 'Pro',   price: '—',      spec: '6.7" · Tensor G2 · 12 GB · 5000 mAh', score: 80, status: 'eol' },
    { model: 'Pixel 6 Pro',        year: 2021, series: 'Pro',   price: '—',      spec: '6.7" · Tensor G1 · 12 GB · 5003 mAh', score: 77, status: 'eol' },
  ],
  oneplus: [
    { model: 'OnePlus 13',         year: 2025, series: 'Flagship', price: '$899', spec: '6.82" · SD 8 Elite · 16 GB · 6000 mAh', score: 87, status: 'current' },
    { model: 'OnePlus 13R',        year: 2025, series: 'R',      price: '$599',   spec: '6.78" · SD 8 Gen 3 · 12 GB · 6000 mAh', score: 84, status: 'current' },
    { model: 'OnePlus Open',       year: 2023, series: 'Open',   price: '$1,699', spec: '7.82" · SD 8 Gen 2 · 16 GB · 4805 mAh', score: 85, status: 'available' },
    { model: 'OnePlus 12',         year: 2024, series: 'Flagship', price: '—',    spec: '6.82" · SD 8 Gen 3 · 16 GB · 5400 mAh', score: 85, status: 'available' },
    { model: 'OnePlus Nord 4',     year: 2024, series: 'Nord',   price: '$449',   spec: '6.74" · SD 7+ Gen 3 · 12 GB · 5500 mAh', score: 76, status: 'current' },
    { model: 'OnePlus 11',         year: 2023, series: 'Flagship', price: '—',    spec: '6.7" · SD 8 Gen 2 · 16 GB · 5000 mAh', score: 81, status: 'eol' },
    { model: 'OnePlus 7T',         year: 2019, series: 'T',      price: '—',      spec: '6.55" · SD 855+ · 8 GB · 3800 mAh',      score: 70, status: 'eol' },
  ],
  oppo: [
    { model: 'Find X8 Pro',        year: 2024, series: 'Find X Pro', price: '$999', spec: '6.78" · D 9400 · 16 GB · 5910 mAh', score: 84, status: 'current' },
    { model: 'Find X8',            year: 2024, series: 'Find X',   price: '$849',   spec: '6.59" · D 9400 · 16 GB · 5630 mAh', score: 82, status: 'current' },
    { model: 'Find N3',            year: 2023, series: 'Find N',   price: '$1,599', spec: '7.82" · SD 8 Gen 2 · 16 GB · 4805 mAh', score: 82, status: 'available' },
    { model: 'Find X7 Ultra',      year: 2024, series: 'Find X Ultra', price: '—',  spec: '6.82" · SD 8 Gen 3 · 16 GB · 5000 mAh', score: 83, status: 'eol' },
    { model: 'Reno 12 Pro',        year: 2024, series: 'Reno',     price: '$549',   spec: '6.7" · D 7300 · 12 GB · 5000 mAh',  score: 74, status: 'current' },
    { model: 'A60',                year: 2024, series: 'A',        price: '$199',   spec: '6.67" · SD 680 · 8 GB · 5000 mAh',  score: 60, status: 'current' },
  ],
  vivo: [
    { model: 'X200 Pro',           year: 2024, series: 'X Pro', price: '$1,099', spec: '6.78" · D 9400 · 16 GB · 6000 mAh', score: 85, status: 'current' },
    { model: 'X200',               year: 2024, series: 'X',     price: '$799',   spec: '6.67" · D 9400 · 12 GB · 5800 mAh', score: 82, status: 'current' },
    { model: 'X Fold3 Pro',        year: 2024, series: 'X Fold',price: '$1,799', spec: '8.03" · SD 8 Gen 3 · 16 GB · 5700 mAh', score: 84, status: 'current' },
    { model: 'V40 Pro',            year: 2024, series: 'V',     price: '$549',   spec: '6.78" · D 9200+ · 12 GB · 5500 mAh', score: 76, status: 'current' },
    { model: 'X100 Pro',           year: 2023, series: 'X Pro', price: '—',      spec: '6.78" · D 9300 · 16 GB · 5400 mAh', score: 83, status: 'available' },
    { model: 'Y100',               year: 2024, series: 'Y',     price: '$229',   spec: '6.67" · D 6020 · 8 GB · 5000 mAh',  score: 58, status: 'current' },
  ],
  honor: [
    { model: 'Magic 7 Pro',        year: 2025, series: 'Magic Pro', price: '$1,099', spec: '6.8" · SD 8 Elite · 16 GB · 5850 mAh', score: 85, status: 'current' },
    { model: 'Magic 7',            year: 2025, series: 'Magic',     price: '$799',   spec: '6.78" · SD 8 Elite · 12 GB · 5850 mAh', score: 82, status: 'current' },
    { model: 'Magic V3',           year: 2024, series: 'Magic V',   price: '$1,799', spec: '7.92" · SD 8 Gen 3 · 16 GB · 5150 mAh', score: 84, status: 'current' },
    { model: 'Magic V Flip',       year: 2024, series: 'Magic V',   price: '$1,099', spec: '6.82" · SD 8 Gen 3 · 12 GB · 4000 mAh', score: 78, status: 'current' },
    { model: 'Magic 6 Pro',        year: 2024, series: 'Magic Pro', price: '—',      spec: '6.8" · SD 8 Gen 3 · 16 GB · 5600 mAh', score: 82, status: 'available' },
    { model: '200 Pro',            year: 2024, series: 'Number',    price: '$649',   spec: '6.78" · SD 8s Gen 3 · 12 GB · 5200 mAh', score: 76, status: 'current' },
  ],
  realme: [
    { model: 'GT7 Pro',            year: 2024, series: 'GT Pro', price: '$649', spec: '6.78" · SD 8 Elite · 16 GB · 6500 mAh', score: 82, status: 'current' },
    { model: 'GT6',                year: 2024, series: 'GT',     price: '$549', spec: '6.78" · SD 8s Gen 3 · 16 GB · 5800 mAh', score: 78, status: 'current' },
    { model: '13 Pro+',            year: 2024, series: 'Number', price: '$449', spec: '6.7" · SD 7s Gen 3 · 12 GB · 5200 mAh', score: 75, status: 'current' },
    { model: 'GT5 Pro',            year: 2023, series: 'GT Pro', price: '—',    spec: '6.78" · SD 8 Gen 3 · 16 GB · 5400 mAh', score: 80, status: 'available' },
    { model: 'Narzo 70 Pro',       year: 2024, series: 'Narzo',  price: '$229', spec: '6.67" · D 7050 · 8 GB · 5000 mAh',  score: 62, status: 'current' },
  ],
  sony: [
    { model: 'Xperia 1 VI',        year: 2024, series: 'Xperia 1', price: '$1,399', spec: '6.5" · SD 8 Gen 3 · 12 GB · 5000 mAh', score: 80, status: 'current' },
    { model: 'Xperia 5 V',         year: 2023, series: 'Xperia 5', price: '$999',   spec: '6.1" · SD 8 Gen 2 · 8 GB · 5000 mAh', score: 76, status: 'available' },
    { model: 'Xperia 10 VI',       year: 2024, series: 'Xperia 10', price: '$499',  spec: '6.1" · SD 6 Gen 1 · 6 GB · 5000 mAh', score: 68, status: 'current' },
    { model: 'Xperia 1 V',         year: 2023, series: 'Xperia 1', price: '—',     spec: '6.5" · SD 8 Gen 2 · 12 GB · 5000 mAh', score: 79, status: 'eol' },
    { model: 'Xperia 1 III',       year: 2021, series: 'Xperia 1', price: '—',     spec: '6.5" · SD 888 · 12 GB · 4500 mAh', score: 73, status: 'eol' },
  ],
  nothing: [
    { model: 'Phone 3',            year: 2025, series: 'Phone', price: '$799', spec: '6.7" · SD 8s Gen 3 · 12 GB · 5150 mAh', score: 81, status: 'current' },
    { model: 'Phone 3a Pro',       year: 2025, series: 'Phone a', price: '$459', spec: '6.77" · SD 7s Gen 3 · 12 GB · 5000 mAh', score: 80, status: 'current' },
    { model: 'Phone 3a',           year: 2025, series: 'Phone a', price: '$379', spec: '6.77" · SD 7s Gen 3 · 8 GB · 5000 mAh', score: 76, status: 'current' },
    { model: 'Phone 2',            year: 2023, series: 'Phone', price: '—',    spec: '6.7" · SD 8+ Gen 1 · 12 GB · 4700 mAh', score: 76, status: 'available' },
    { model: 'Phone 2a',           year: 2024, series: 'Phone a', price: '$349', spec: '6.7" · D 7200 Pro · 8 GB · 5000 mAh', score: 73, status: 'available' },
    { model: 'Phone 1',            year: 2022, series: 'Phone', price: '—',    spec: '6.55" · SD 778G+ · 8 GB · 4500 mAh', score: 68, status: 'eol' },
  ],
  motorola: [
    { model: 'Edge 50 Ultra',      year: 2024, series: 'Edge Ultra', price: '$999', spec: '6.7" · SD 8s Gen 3 · 16 GB · 4500 mAh', score: 80, status: 'current' },
    { model: 'Edge 50 Pro',        year: 2024, series: 'Edge Pro',   price: '$699', spec: '6.7" · SD 7 Gen 3 · 12 GB · 4500 mAh', score: 76, status: 'current' },
    { model: 'Razr 50 Ultra',      year: 2024, series: 'Razr',       price: '$999', spec: '6.9" · SD 8s Gen 3 · 12 GB · 4000 mAh', score: 79, status: 'current' },
    { model: 'Razr 50',            year: 2024, series: 'Razr',       price: '$699', spec: '6.9" · D 7300X · 8 GB · 4200 mAh',  score: 73, status: 'current' },
    { model: 'Moto G75',           year: 2024, series: 'Moto G',     price: '$329', spec: '6.78" · SD 6 Gen 3 · 8 GB · 5000 mAh', score: 65, status: 'current' },
    { model: 'Edge+ (2023)',       year: 2023, series: 'Edge Pro',   price: '—',    spec: '6.67" · SD 8 Gen 2 · 8 GB · 5100 mAh', score: 77, status: 'eol' },
    { model: 'Razr (2019)',        year: 2019, series: 'Razr',       price: '—',    spec: '6.2" · SD 710 · 6 GB · 2510 mAh',   score: 60, status: 'eol' },
  ],
};

/* ---- Brand slugs lookup by display name ---- */
const BRAND_SLUG = (name) => name.toLowerCase().replace(/\s+/g, '');

/* ---- Page ---- */
const BrandDetail = ({ slug = 'apple', setPage }) => {
  const [sort, setSort] = useState('newest'); // newest | oldest | score | price
  const [series, setSeries] = useState('all');
  const [status, setStatus] = useState('all');

  const meta = BRAND_META[slug];
  const phones = BRAND_PHONES[slug] || [];

  if (!meta) {
    return (
      <main className="pb-32 mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 pt-16">
        <SectionEyebrow>Brand · {slug}</SectionEyebrow>
        <SectionTitle className="mt-3">Brand page in progress</SectionTitle>
        <p className="mt-5 text-[15px] text-ink-soft dark:text-d-muted max-w-prose">
          We're still ingesting the full historical roster for this brand. The active lineup is browsable from the all-phones index. <button onClick={() => setPage('brands')} className="text-amber-brand dark:text-amber-warm font-medium underline underline-offset-2">Back to all brands</button>.
        </p>
      </main>
    );
  }

  let list = phones.slice();
  if (series !== 'all') list = list.filter((p) => p.series === series);
  if (status !== 'all') list = list.filter((p) => p.status === status);
  list.sort((a, b) => {
    if (sort === 'newest') return b.year - a.year;
    if (sort === 'oldest') return a.year - b.year;
    if (sort === 'score')  return (b.score || 0) - (a.score || 0);
    return 0;
  });

  /* Stats */
  const current = phones.filter((p) => p.status === 'current').length;
  const eol = phones.filter((p) => p.status === 'eol').length;
  const yearRange = phones.length ? `${Math.min(...phones.map((p) => p.year))} – ${Math.max(...phones.map((p) => p.year))}` : '—';

  const seriesList = ['all', ...new Set(phones.map((p) => p.series))];

  const statusBadge = (s) => ({
    current:   { label: 'In production',  classes: 'bg-win/10 text-win border-win/20' },
    available: { label: 'Available',      classes: 'bg-amber-brand/10 dark:bg-amber-warm/10 text-amber-brand dark:text-amber-warm border-amber-brand/20 dark:border-amber-warm/20' },
    eol:       { label: 'Discontinued',   classes: 'bg-paper-soft dark:bg-d-bg text-ink-soft dark:text-d-muted border-line dark:border-d-border' },
  }[s] || { label: s, classes: 'bg-paper-soft dark:bg-d-bg text-ink-soft dark:text-d-muted border-line dark:border-d-border' });

  /* Group by year for timeline view */
  const yearGroups = {};
  list.forEach((p) => {
    if (!yearGroups[p.year]) yearGroups[p.year] = [];
    yearGroups[p.year].push(p);
  });
  const yearsSorted = Object.keys(yearGroups).map(Number).sort((a, b) => sort === 'oldest' ? a - b : b - a);

  return (
    <main className="pb-32">
      {/* Breadcrumb */}
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-6 flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-[0.14em] text-ink-soft dark:text-d-muted">
        <button onClick={() => setPage('home')} className="hover:text-ink dark:hover:text-white">Home</button>
        <IconChevronRight size={10} />
        <button onClick={() => setPage('brands')} className="hover:text-ink dark:hover:text-white">Brands</button>
        <IconChevronRight size={10} />
        <span className="text-ink dark:text-white">{meta.name}</span>
      </div>

      {/* Hero */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-6">
        <div className="rounded-3xl border border-line dark:border-d-border bg-paper dark:bg-d-surface overflow-hidden relative">
          <div className="pointer-events-none absolute -top-8 -right-6 opacity-[0.04] dark:opacity-[0.07] text-ink dark:text-white">
            <EagleMark size={300} />
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0 relative">
            <div className="lg:col-span-7 p-8 sm:p-12">
              <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm mb-3">
                Brand · {meta.region}
              </div>
              <h1 className="font-display font-bold tracking-tightest text-ink dark:text-white text-[56px] sm:text-[88px] lg:text-[108px] leading-[0.9]">
                {meta.name}
              </h1>
              <p className="mt-6 text-[15px] sm:text-[17px] leading-relaxed text-ink-soft dark:text-d-muted max-w-2xl text-wrap-pretty">
                {meta.tagline}
              </p>

              <div className="mt-7 flex flex-wrap gap-2">
                <button onClick={() => setPage('phones')} className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-ink text-white dark:bg-white dark:text-ink text-[13px] font-medium">
                  View flagship: {meta.flagship} <IconArrowRight size={13} />
                </button>
                <button onClick={() => setPage('compare')} className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl border border-line dark:border-d-border text-ink dark:text-white text-[13px] font-medium">
                  <IconScale size={13} /> Compare a {meta.name} phone
                </button>
              </div>
            </div>

            <div className="lg:col-span-5 p-8 sm:p-12 lg:border-l border-t lg:border-t-0 border-line dark:border-d-border bg-paper-soft dark:bg-d-bg/40">
              <div className="grid grid-cols-2 gap-x-6 gap-y-5">
                <div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Founded</div>
                  <div className="num text-[20px] font-semibold text-ink dark:text-white mt-1">{meta.founded}</div>
                </div>
                <div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Market share</div>
                  <div className="num text-[20px] font-semibold text-ink dark:text-white mt-1">{meta.share}%</div>
                </div>
                <div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Phones in DB</div>
                  <div className="num text-[20px] font-semibold text-ink dark:text-white mt-1">{meta.count}</div>
                </div>
                <div>
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Tracked years</div>
                  <div className="num text-[20px] font-semibold text-ink dark:text-white mt-1">{yearRange}</div>
                </div>
                <div className="col-span-2 pt-3 border-t border-line dark:border-d-border">
                  <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted mb-2">Series tracked</div>
                  <div className="flex flex-wrap gap-1.5">
                    {meta.series.map((s) => (
                      <span key={s} className="text-[10px] font-mono uppercase tracking-wider text-ink dark:text-white bg-paper dark:bg-d-surface border border-line dark:border-d-border rounded-sm px-1.5 py-0.5">{s}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quick stats strip */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-6">
        <div className="grid grid-cols-3 md:grid-cols-4 gap-px bg-line dark:bg-d-border rounded-2xl border border-line dark:border-d-border overflow-hidden">
          <div className="bg-paper dark:bg-d-surface p-4">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Tracked</div>
            <div className="num text-[24px] font-bold text-ink dark:text-white mt-1">{phones.length}</div>
            <div className="text-[11px] text-ink-soft dark:text-d-muted">visible models</div>
          </div>
          <div className="bg-paper dark:bg-d-surface p-4">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">In production</div>
            <div className="num text-[24px] font-bold text-win mt-1">{current}</div>
            <div className="text-[11px] text-ink-soft dark:text-d-muted">shipping now</div>
          </div>
          <div className="bg-paper dark:bg-d-surface p-4">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Discontinued</div>
            <div className="num text-[24px] font-bold text-ink-soft dark:text-d-muted mt-1">{eol}</div>
            <div className="text-[11px] text-ink-soft dark:text-d-muted">EOL</div>
          </div>
          <div className="bg-paper dark:bg-d-surface p-4 hidden md:block">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">Avg score</div>
            <div className="num text-[24px] font-bold text-amber-brand dark:text-amber-warm mt-1">
              {Math.round(phones.filter((p) => p.score).reduce((s, p) => s + p.score, 0) / phones.filter((p) => p.score).length)}
            </div>
            <div className="text-[11px] text-ink-soft dark:text-d-muted">across roster</div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-10">
        <div className="flex items-end justify-between mb-5 gap-4 flex-wrap">
          <SectionTitle size="lg">All {meta.name} phones</SectionTitle>
          <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
            <span>Sort</span>
            <div className="flex items-center rounded-md border border-line dark:border-d-border bg-paper dark:bg-d-surface p-0.5">
              {[
                { k: 'newest', label: 'Newest' },
                { k: 'oldest', label: 'Oldest' },
                { k: 'score',  label: 'Score' },
              ].map((s) => (
                <button
                  key={s.k}
                  onClick={() => setSort(s.k)}
                  className={`px-2.5 py-1 rounded ${sort === s.k ? 'bg-ink text-white dark:bg-white dark:text-ink' : 'text-ink-soft dark:text-d-muted'}`}
                >
                  {s.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="space-y-3 mb-5">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted w-12 shrink-0">Series</span>
            {seriesList.map((s) => (
              <button
                key={s}
                onClick={() => setSeries(s)}
                className={`px-2.5 py-1 rounded-full text-[11px] font-medium border ${
                  series === s
                    ? 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white'
                    : 'border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
                }`}
              >
                {s === 'all' ? `All series` : s}
              </button>
            ))}
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted w-12 shrink-0">Status</span>
            {[
              { k: 'all',       label: 'All' },
              { k: 'current',   label: 'In production' },
              { k: 'available', label: 'Available' },
              { k: 'eol',       label: 'Discontinued' },
            ].map((s) => (
              <button
                key={s.k}
                onClick={() => setStatus(s.k)}
                className={`px-2.5 py-1 rounded-full text-[11px] font-medium border ${
                  status === s.k
                    ? 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white'
                    : 'border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
                }`}
              >
                {s.label}
              </button>
            ))}
          </div>
        </div>

        {/* Timeline grouped by year */}
        <div className="space-y-8">
          {yearsSorted.length === 0 && (
            <div className="text-center py-16 text-[13px] text-ink-soft dark:text-d-muted border border-dashed border-line dark:border-d-border rounded-2xl">
              No phones match this filter — reset to see all.
            </div>
          )}
          {yearsSorted.map((year) => (
            <div key={year}>
              <div className="flex items-center gap-3 mb-3">
                <div className="num font-display font-bold tracking-tightest text-[32px] text-amber-brand dark:text-amber-warm leading-none">{year}</div>
                <div className="flex-1 h-px bg-line dark:bg-d-border" />
                <div className="num text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{yearGroups[year].length} phone{yearGroups[year].length > 1 ? 's' : ''}</div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                {yearGroups[year].map((p, i) => {
                  const sb = statusBadge(p.status);
                  return (
                    <button
                      key={p.model + i}
                      onClick={() => setPage('phones')}
                      className="group text-left rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-4 hover:border-amber-brand/40 dark:hover:border-amber-warm/40 transition relative"
                    >
                      <div className="flex items-start justify-between gap-2 mb-2">
                        <div>
                          <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{p.series}</div>
                          <div className="font-display font-semibold tracking-tighter2 text-[16px] text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm leading-snug">{p.model}</div>
                        </div>
                        {p.score && <ScorePill value={p.score} label="" tone={p.score >= 90 ? 'amber' : 'outline'} />}
                      </div>
                      <div className="flex items-center justify-center py-2">
                        <PhoneRender size="sm" tint={p.status === 'current' ? 'amber' : p.status === 'eol' ? 'neutral' : 'navy'} />
                      </div>
                      <div className="mt-2 num text-[11px] text-ink-soft dark:text-d-muted">{p.spec}</div>
                      <div className="mt-3 pt-3 border-t border-line dark:border-d-border flex items-center justify-between">
                        <span className={`inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[9px] font-mono uppercase tracking-wider ${sb.classes}`}>
                          {sb.label}
                        </span>
                        <span className="num text-[13px] font-semibold text-ink dark:text-white">{p.price}</span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Cross-link to other brands */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="text-[11px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted mb-3">Browse another brand</div>
        <div className="flex flex-wrap gap-2">
          {Object.keys(BRAND_META).filter((k) => k !== slug).slice(0, 11).map((k) => (
            <button
              key={k}
              onClick={() => setPage(`brand.${k}`)}
              className="px-3.5 py-1.5 rounded-full text-[12px] font-medium border border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink dark:text-white hover:border-amber-brand/40 dark:hover:border-amber-warm/40"
            >
              {BRAND_META[k].name}
            </button>
          ))}
          <button onClick={() => setPage('brands')} className="px-3.5 py-1.5 rounded-full text-[12px] font-medium bg-ink text-white dark:bg-white dark:text-ink inline-flex items-center gap-1">
            All 124 brands <IconArrowRight size={11} />
          </button>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { BRAND_META, BRAND_PHONES, BRAND_SLUG, BrandDetail });