// ============================================================
// PROP FIRMS — list view + detail page
// ============================================================

const PROP_FIRMS_DATA = [
  {
    id: 'tradeify',
    name: 'Tradeify',
    logo: 'TFY',
    logoImg: 'assets/logo-tradeify-icon.png',
    logoBg: '#0A0A0A',
    accent: 'cyan',
    accentLabel: 'BEST VALUE',
    tag: 'STRUCTURĂ ONE-TIME',
    rank: 1,
    favCount: 26769,
    ceo: 'Brett Simberkoff',
    country: 'US',
    countryFlag: '🇺🇸',
    foundedDate: 'Iun 2024',
    yearsInOp: 1,
    trustpilotScore: 4.6,
    totalReviews: 2798,
    reviewBreakdown: { 5: 2182, 4: 336, 3: 84, 2: 56, 1: 140 },
    trustpilotUrl: 'https://www.trustpilot.com/review/tradeify.co',
    pricingMatrix: {
      title: 'Comparație Conturi Tradeify',
      note: 'Prețurile afișate sunt cele cu reducerea activă aplicată.',
      sections: [
        {
          sizes: ['25K', '50K', '100K', '150K'],
          rows: [
            { type: 'Select',           cells: [
              { old: '$109', current: '$65'  },
              { old: '$165', current: '$99'  },
              { old: '$265', current: '$159' },
              { old: '$369', current: '$221' },
            ]},
            { type: 'Lightning Funded', cells: [
              { old: '$345', current: '$207' },
              { old: '$492', current: '$295' },
              { old: '$660', current: '$396' },
              { old: '$796', current: '$478' },
            ]},
            { type: 'Growth',           cells: [
              { old: '$99',  current: '$59'  },
              { old: '$145', current: '$87'  },
              { old: '$255', current: '$153' },
              { old: '$369', current: '$221' },
            ]},
          ],
        },
      ],
    },
    videoRules: {
      title: 'Reguli explicate în video',
      description: 'Tyrone îți explică toate regulile Tradeify (Select, Flex, Daily, Lightning Funded și consistency) într-un singur video.',
      url: 'https://youtu.be/loIEXV1lxxc?si=xpORfl7mxDp1Sj3S',
      videoId: 'loIEXV1lxxc',
    },
    assets: ['Futures'],
    platforms: ['Sierra Chart', 'TradingView', 'Quantower', 'Rithmic', 'Tradovate', 'NinjaTrader'],
    platformCount: 7,
    maxAllocation: '$750K',
    promoCode: 'TYRONE',
    promoDiscount: '40% OFF',
    promoDescription: '40% reducere pe toate conturile (până la 5 utilizări), apoi 30% pe achizițiile ulterioare.',
    promoActionLabel: 'TYRONE',
    affiliateUrl: 'https://tradeify.co/?ref=11889',
    bestFor: 'Începători, cont stabil pe termen lung',
    aiSummary: 'Tradeify este o firmă de prop trading axată pe futures, cu programe de tip 1-Step, Select și Lightning/Instant Funded. Firma oferă conturi fără abonament lunar și fără taxă de activare după trecerea evaluării, ceea ce o face mai simplă pentru traderii care vor costuri clare. Platformele suportate includ Sierra Chart, TradingView, Quantower, Rithmic, Tradovate, WealthCharts, NinjaTrader și Tradesea TradingView.',
    overviewKeyPoints: [
      'Prop firm pentru futures',
      'Fără forex, crypto sau acțiuni',
      'Fără activation fee după trecerea evaluării',
      'Fără abonament lunar pentru conturile cumpărate one-time',
      'Platforme multiple disponibile pentru execuție'
    ],
    instrumentsAndAssets: [
      'Futures pe CME, CBOT, NYMEX și COMEX',
      'Index futures: ES, NQ, RTY, YM',
      'Micro futures disponibile: MES, MNQ, M2K, MYM',
      'Energie și metale: CL, NG, GC, SI',
      'Nu se tranzacționează forex, crypto sau acțiuni'
    ],
    growthEvaluation: {
      description: 'Growth Evaluation este cea mai rapidă variantă pentru traderii care vor să treacă evaluarea cât mai repede. Nu are regulă de consistency în evaluare și poate fi trecută chiar și într-o singură zi, dar are Daily Loss Limit ca regulă de risc.',
      sizes: [
        { size: '25K',  profitTarget: '$1,500', dailyLossLimit: '$600',   trailingDrawdown: '$1,000', maxContracts: '1 mini / 10 micro'   },
        { size: '50K',  profitTarget: '$3,000', dailyLossLimit: '$1,250', trailingDrawdown: '$2,000', maxContracts: '4 mini / 40 micro'   },
        { size: '100K', profitTarget: '$6,000', dailyLossLimit: '$2,500', trailingDrawdown: '$3,500', maxContracts: '8 mini / 80 micro'   },
        { size: '150K', profitTarget: '$9,000', dailyLossLimit: '$3,750', trailingDrawdown: '$5,000', maxContracts: '12 mini / 120 micro' },
      ],
      notes: [
        'Minimum 1 trading day',
        'No consistency rule in evaluation',
        'Daily Loss Limit = soft breach',
        'End-of-Day Trailing Drawdown',
        'Fără activation fee după promovare'
      ]
    },
    selectEvaluation: {
      description: 'Select Evaluation este o variantă mai flexibilă pentru traderii care nu vor Daily Loss Limit în evaluare, dar vine cu regulă de 40% consistency. Din acest motiv, ai nevoie de minimum 3 zile de trading pentru a trece evaluarea.',
      keyPoints: [
        'Fără Daily Loss Limit în evaluare',
        '40% consistency rule',
        'Minimum 3 zile de trading',
        'După promovare alegi între Select Flex și Select Daily',
        'Alegerea politicii de payout este permanentă pentru acel cont'
      ]
    },
    selectFlex: {
      title: 'Select Flex — 5-Day Payout',
      description: 'Select Flex este mai potrivit pentru traderii care vor libertate mai mare intraday și payout-uri mai mari, fără Daily Loss Limit pe contul funded.',
      sizes: [
        { size: '25K',  maxDrawdown: '$1,000', dailyLossLimit: 'Fără', startingContracts: '1 mini / 10 micro',  maxContracts: '2 mini / 20 micro',   minWinningDay: '$100' },
        { size: '50K',  maxDrawdown: '$2,000', dailyLossLimit: 'Fără', startingContracts: '2 mini / 20 micro',  maxContracts: '4 mini / 40 micro',   minWinningDay: '$150' },
        { size: '100K', maxDrawdown: '$3,000', dailyLossLimit: 'Fără', startingContracts: '3 mini / 30 micro',  maxContracts: '8 mini / 80 micro',   minWinningDay: '$200' },
        { size: '150K', maxDrawdown: '$4,500', dailyLossLimit: 'Fără', startingContracts: '3 mini / 30 micro',  maxContracts: '12 mini / 120 micro', minWinningDay: '$250' },
      ],
      payoutRules: [
        'Payout după 5 zile câștigătoare',
        'Poți retrage până la 50% din profitul total',
        'Payout cap: $1,250 / $3,000 / $4,000 / $5,000 în funcție de mărimea contului'
      ]
    },
    selectDaily: {
      title: 'Select Daily — Daily Payout',
      description: 'Select Daily este făcut pentru traderii care vor acces mai rapid la payout, dar vine cu reguli de risc mai stricte și Daily Loss Limit pe contul funded.',
      sizes: [
        { size: '25K',  maxDrawdown: '$1,000', dailyLossLimit: '$500',   bufferNeeded: '$1,100', maxDailyPayout: '$600'   },
        { size: '50K',  maxDrawdown: '$2,000', dailyLossLimit: '$1,000', bufferNeeded: '$2,100', maxDailyPayout: '$1,000' },
        { size: '100K', maxDrawdown: '$2,500', dailyLossLimit: '$1,250', bufferNeeded: '$2,600', maxDailyPayout: '$1,500' },
        { size: '150K', maxDrawdown: '$3,500', dailyLossLimit: '$1,750', bufferNeeded: '$3,600', maxDailyPayout: '$2,500' },
      ],
      payoutRules: [
        'Trebuie să fii peste buffer pentru a cere payout',
        'Payout minim: $250',
        'Poți cere până la 2x profitul făcut între payout-uri, dar doar până la limita maximă a contului',
        'După payout, profitul ciclului se resetează'
      ]
    },
    firmRules: [
      'Nu ai voie să ții poziții peste noapte',
      'Toate pozițiile trebuie închise înainte de market close',
      'Nu ai voie hedging',
      'Nu poți folosi simultan mini și micro pentru același instrument dacă este considerat hedging',
      'Daily Loss Limit este soft breach: oprește trading-ul până la următoarea sesiune, dar nu pică automat contul',
      'Max Trailing Drawdown este regula principală care poate pica definitiv contul',
      'Trailing Drawdown se calculează End-of-Day',
      'HFT bots nu sunt permise',
      'Trading-ul algoritmic este permis doar dacă strategia este proprie și nu este high-frequency',
      'Microscalping rule: peste 50% din trade-uri și peste 50% din profit trebuie să vină din trade-uri ținute mai mult de 10 secunde'
    ],
    accountRecommendation: [
      { name: 'Growth Evaluation', desc: 'Growth Evaluation este cea mai bună variantă pentru traderii care vor să treacă rapid evaluarea, deoarece nu are regulă de consistency și poate fi trecută într-o singură zi.' },
      { name: 'Select Evaluation', desc: 'Select Evaluation este mai potrivită pentru traderii care vor mai multă libertate în evaluare și nu vor Daily Loss Limit, dar acceptă regula de 40% consistency.' },
      { name: 'Select Flex',       desc: 'Select Flex este potrivit pentru traderii care vor payout-uri mai mari și libertate mai mare intraday.' },
      { name: 'Select Daily',      desc: 'Select Daily este potrivit pentru traderii care vor payout-uri mai rapide, dar acceptă reguli de risc mai stricte.' },
      { name: 'Lightning Funded',  desc: 'Lightning Funded este potrivit pentru traderii experimentați care pot respecta consistency-ul și vor acces rapid la payout.' },
    ],
    challenges: [
      { name: 'Select Daily — 1-Step 25K', price: '$65.40', originalPrice: '$109.00' },
      { name: 'Select Flex — 1-Step 25K', price: '$65.40', originalPrice: '$109.00' },
      { name: 'Growth Plan — 1-Step 25K', price: '$59.40', originalPrice: '$99.00' },
      { name: 'Select Flex — 1-Step 50K', price: '$99.00', originalPrice: '$165.00' },
      { name: 'Select Flex — 1-Step 100K', price: '$159.00', originalPrice: '$265.00' },
      { name: 'Select Flex — 1-Step 150K', price: '$221.40', originalPrice: '$369.00' },
      { name: 'Select Daily — 1-Step 50K', price: '$99.00', originalPrice: '$165.00' },
      { name: 'Select Daily — 1-Step 100K', price: '$159.00', originalPrice: '$265.00' },
      { name: 'Select Daily — 1-Step 150K', price: '$221.40', originalPrice: '$369.00' },
      { name: 'Lightning Funded — Instant 150K', price: '$477.60', originalPrice: '$796.00' },
    ],
    payoutTiers: {
      title: 'Tiere de Payout',
      intro: 'Sume minime și maxime pe payout, în funcție de mărimea contului.',
      minimums: [
        { account: '25K', value: '$250' },
        { account: '50K', value: '$500' },
        { account: '100K', value: '$1,000' },
        { account: '150K', value: '$1,500' },
      ],
      maxByTier: [
        { tier: '1st Payout',  accounts: { '25K': '$1,000 (Fix)', '50K': 'până la $1,500', '100K': 'până la $2,000', '150K': 'până la $2,500' } },
        { tier: '2nd Payout',  accounts: { '50K': 'până la $2,000', '100K': 'până la $2,500', '150K': 'până la $3,000' } },
        { tier: '3rd Payout',  accounts: { '50K': 'până la $2,500', '100K': 'până la $3,000', '150K': 'până la $4,000' } },
        { tier: '4th+ Payout', accounts: { '50K': 'până la $3,000', '100K': 'până la $4,000', '150K': 'până la $5,000' } },
      ],
      footnote: 'De la al 6-lea payout încolo: până la $25,000 per cont.'
    },
    lightningFunded: {
      title: 'Lightning Funded',
      description: 'Lightning Funded este o variantă pentru traderii care vor acces rapid la un cont funded și payout-uri mai rapide, dar regulile de consistency sunt mai stricte.',
      profitSplit: '90 / 10',
      consistencyRule: 'Respectă regula de consistency de 20% pentru primul payout, apoi 25% pentru al doilea, și 30% pentru următoarele payout-uri.',
      consistencySteps: [
        '20% pentru primul payout',
        '25% pentru al doilea payout',
        '30% pentru următoarele payout-uri'
      ],
      minDaysTraded: 'Fără minimum de zile pentru payout.',
      profitGoals: [
        { account: '25K',  first: '$1,500', subsequent: '$1,000' },
        { account: '50K',  first: '$3,000', subsequent: '$2,000' },
        { account: '100K', first: '$6,000', subsequent: '$3,500' },
        { account: '150K', first: '$9,000', subsequent: '$4,500' },
      ],
      notes: [
        'Payout minim: $1,000',
        'Fără minimum de zile pentru payout',
        'Trebuie respectată regula de consistency',
        'Potrivit pentru traderi disciplinați care pot distribui profitul corect pe zile'
      ]
    },
    reviews: [
      { author: 'Cristian P.', initials: 'CP', rating: 5, date: '08 Mai 2026', verified: true, text: 'Cea mai curată structură pe care am tradat-o. Fără abonament, fără taxe ascunse. Am trecut evaluarea în 6 zile și payout-ul a venit în 2 zile lucrătoare.' },
      { author: 'Diana M.', initials: 'DM', rating: 5, date: '01 Mai 2026', verified: true, text: 'Suport rapid pe Discord, reguli clare. Pentru cineva care vrea un cont stabil pe termen lung, e clar prima alegere.' },
      { author: 'Răzvan I.', initials: 'RI', rating: 5, date: '22 Apr 2026', verified: true, text: 'Lightning Funded e excelent dacă vrei să eviți evaluarea. 90% profit split e greu de bătut în piața de futures.' },
      { author: 'Andreea S.', initials: 'AS', rating: 4, date: '14 Apr 2026', verified: true, text: 'Singurul minus e că nu au încă MetaTrader, dar Sierra Chart și Quantower compensează complet.' },
    ],
  },
  {
    id: 'apex',
    name: 'Apex Trader Funding',
    logo: 'APEX',
    logoImg: 'assets/logo-apex-fit.png',
    logoListImg: 'assets/logo-apex-fit.png',
    logoBg: '#000000',
    accent: 'acid',
    accentLabel: 'TOP PICK',
    tag: 'CEL MAI RECOMANDAT',
    rank: 2,
    favCount: 37018,
    ceo: 'Darrell Martin',
    country: 'US',
    countryFlag: '🇺🇸',
    foundedDate: 'Aug 2021',
    yearsInOp: 5,
    trustpilotScore: 4.3,
    totalReviews: 19196,
    reviewBreakdown: { 5: 13053, 4: 2495, 3: 960, 2: 768, 1: 1920 },
    trustpilotUrl: 'https://www.trustpilot.com/review/apextraderfunding.com',
    assets: ['Futures'],
    platforms: ['NinjaTrader', 'TradingView', 'Rithmic', 'Tradovate', 'Quantower'],
    platformCount: 11,
    maxAllocation: '$3M',
    promoCode: 'NWAPJXME',
    promoDiscount: 'până la 90% OFF',
    promoDescription: 'Reducere până la 90% pe evaluări — codul cel mai puternic, activ în campaniile mari.',
    promoActionLabel: 'NWAPJXME',
    affiliateUrl: 'https://apextraderfunding.com/member/aff/go/tyronthebeast',
    bestFor: 'NASDAQ futures, scalping rapid, swing',
    aiSummary: 'Apex Trader Funding este una dintre cele mai populare firme de funding pentru futures. Oferă conturi Evaluation și Performance Accounts pe două modele principale: EOD Trailing Drawdown și Intraday Trailing Drawdown. Diferența principală este modul în care se calculează drawdown-ul: la EOD se actualizează la finalul zilei, iar la Intraday se mișcă în timp real cu peak balance-ul contului. În Evaluation nu există regulă de consistency și poți trece contul într-o singură zi dacă atingi target-ul și respecți regulile.',
    instrumentsAndAssets: [
      'Futures: NQ, MNQ, ES, MES, CL, GC, RTY, MGC și restul contractelor CME/CBOT/NYMEX',
      'Fără acțiuni, forex sau crypto direct',
      'Trading în orele de piață standard CME'
    ],
    accountTypes: [
      {
        title: 'EOD Trailing Drawdown',
        badge: 'Mai flexibil intraday',
        accent: 'acid',
        bullets: [
          'Drawdown-ul se calculează o dată pe zi, la închiderea pieței',
          'Este aplicat în sesiunea următoare',
          'Are Daily Loss Limit',
          'Evaluation poate fi trecut într-o singură zi',
          'Potrivit pentru traderii care vor mai multă libertate intraday'
        ]
      },
      {
        title: 'Intraday Trailing Drawdown',
        badge: 'Mai strict',
        accent: 'rose',
        bullets: [
          'Drawdown-ul urmărește peak balance-ul în timp real',
          'Include și profitul nerealizat',
          'Nu are Daily Loss Limit în Evaluation',
          'Dacă atingi trailing threshold-ul, contul pică instant',
          'Potrivit pentru traderii foarte disciplinați cu risk management strict'
        ]
      }
    ],
    evaluationSpecs: {
      title: 'Specificații Evaluation',
      columns: ['25K', '50K', '100K', '150K'],
      rows: [
        { label: 'Profit Target',              values: ['$1,500', '$3,000', '$6,000', '$9,000'] },
        { label: 'Max Drawdown',               values: ['$1,000', '$2,000', '$3,000', '$4,000'] },
        { label: 'Daily Loss Limit EOD',       values: ['$500', '$1,000', '$1,500', '$2,000'] },
        { label: 'Daily Loss Limit Intraday',  values: ['Nu există', 'Nu există', 'Nu există', 'Nu există'] },
        { label: 'Max Contracts Evaluation',   values: ['4', '6', '8', '12'] },
        { label: 'Access Period',              values: ['30 zile', '30 zile', '30 zile', '30 zile'] },
        { label: 'Minimum Trading Days',       values: ['Nu există', 'Nu există', 'Nu există', 'Nu există'] },
        { label: 'Consistency în Evaluation',  values: ['Nu se aplică', 'Nu se aplică', 'Nu se aplică', 'Nu se aplică'] },
        { label: 'Scaling în Evaluation',      values: ['Nu se aplică', 'Nu se aplică', 'Nu se aplică', 'Nu se aplică'] },
      ],
      note: 'În Evaluation, obiectivul este să atingi profit target-ul fără să încalci drawdown-ul. După ce treci Evaluation, ai 7 zile calendaristice să activezi Performance Account-ul.',
    },
    paRules: [
      { title: '5 Zile Eligibile',       text: 'Pentru payout ai nevoie de minimum 5 zile de trading care ating profitul minim cerut pentru mărimea contului.' },
      { title: '50% Consistency',        text: 'Nicio zi profitabilă nu trebuie să reprezinte 50% sau mai mult din profitul total făcut de la ultimul payout aprobat.' },
      { title: 'Safety Net',             text: 'Safety Net = limita de drawdown + $100. Doar profitul peste această zonă poate fi retras.' },
      { title: 'Maximum 6 Payout-uri',   text: 'Fiecare Performance Account poate primi maximum 6 payout-uri aprobate. După al 6-lea payout, contul își încheie ciclul.' },
    ],
    paPayoutsEOD: {
      title: 'EOD PA — Cerințe pentru Payout',
      columns: ['Mărime Cont', 'Zile Minime', 'Profit Minim / Zi', 'Safety Net', 'Balanță Minimă pentru Payout', 'Max Payout-uri'],
      rows: [
        ['25K',  '5', '$100', '$26,100',  '$26,600',  '6'],
        ['50K',  '5', '$250', '$52,100',  '$52,600',  '6'],
        ['100K', '5', '$300', '$103,100', '$103,600', '6'],
        ['150K', '5', '$350', '$154,100', '$154,600', '6'],
      ]
    },
    paPayoutsIntraday: {
      title: 'Intraday PA — Cerințe pentru Payout',
      columns: ['Mărime Cont', 'Zile Minime', 'Profit Minim / Zi', 'Safety Net', 'Balanță Minimă pentru Payout', 'Max Payout-uri'],
      rows: [
        ['25K',  '5', '$100', '$26,100',  '$26,600',  '6'],
        ['50K',  '5', '$200', '$52,100',  '$52,600',  '6'],
        ['100K', '5', '$250', '$103,100', '$103,600', '6'],
        ['150K', '5', '$300', '$154,100', '$154,600', '6'],
      ]
    },
    maxPayoutPerRequest: {
      title: 'Maximum Payout per cerere',
      sections: [
        {
          heading: 'EOD Max Payout',
          columns: ['Payout #', '25K', '50K', '100K', '150K'],
          rows: [
            ['1', '$1,000', '$1,500', '$2,000', '$2,500'],
            ['2', '$1,000', '$1,500', '$2,500', '$3,000'],
            ['3', '$1,000', '$2,000', '$2,500', '$3,000'],
            ['4', '$1,000', '$2,500', '$3,000', '$3,000'],
            ['5', '$1,000', '$2,500', '$4,000', '$4,000'],
            ['6', '$1,000', '$3,000', '$4,000', '$5,000'],
          ]
        },
        {
          heading: 'Intraday Max Payout',
          columns: ['Payout #', '25K', '50K', '100K', '150K'],
          rows: [
            ['1', '$1,000', '$1,500', '$2,000', '$2,500'],
            ['2', '$1,000', '$2,000', '$2,500', '$3,000'],
            ['3', '$1,000', '$2,500', '$3,000', '$3,000'],
            ['4', '$1,000', '$2,500', '$3,000', '$4,000'],
            ['5', '$1,000', '$3,000', '$4,000', '$4,000'],
            ['6', '$1,000', '$3,000', '$4,000', '$5,000'],
          ]
        }
      ]
    },
    importantRules: [
      { title: 'Nu atinge Drawdown-ul', text: 'Dacă balanța atinge sau cade sub limita de drawdown, pozițiile sunt lichidate automat și Evaluation-ul pică sau PA-ul se închide.' },
      { title: 'DLL nu închide contul', text: 'La EOD, Daily Loss Limit oprește tradingul pentru sesiunea respectivă, dar contul rămâne activ pentru ziua următoare.' },
      { title: 'Fără Hedging între conturi', text: 'Nu este permis să treci Evaluation-uri prin hedging între conturi sau prin poziții opuse folosite pentru a ocoli regulile.' },
      { title: 'Payout-ul nu oprește tradingul', text: 'Poți continua să tranzacționezi după ce ceri payout, dar trebuie să tratezi balanța ca și cum payout-ul a fost deja scos. Dacă balanța scade sub pragul necesar, payout-ul poate fi respins.' },
    ],
    disclaimer: 'Regulile și promoțiile se pot schimba. Verifică întotdeauna website-ul oficial Apex înainte să cumperi sau să ceri payout.',
    pricingMatrix: {
      title: 'Comparație Conturi Apex',
      note: 'Prețurile afișate sunt cele cu reducerea activă aplicată. Codul promo se schimbă des — verifică oficial.',
      sections: [
        {
          heading: 'EOD Trailing Drawdown',
          sizes: ['25K', '50K', '100K', '150K'],
          rows: [
            { type: 'Evaluation', cells: [
              { old: '$118.00',  current: '$17.70' },
              { old: '$131.33',  current: '$19.70' },
              { old: '$198.00',  current: '$29.70' },
              { old: '$264.67',  current: '$39.70' },
            ]},
          ],
        },
        {
          heading: 'Intraday Trailing Drawdown',
          sizes: ['25K', '50K', '100K', '150K'],
          rows: [
            { type: 'Evaluation', cells: [
              { old: '$177.00',  current: '$26.55' },
              { old: '$197.00',  current: '$29.55' },
              { old: '$297.00',  current: '$44.55' },
              { old: '$397.00',  current: '$59.55' },
            ]},
          ],
        },
      ],
    },
    videoRules: {
      title: 'Reguli explicate în video',
      description: 'Tyrone îți explică toate regulile Apex (EOD, Intraday, PA, payout requirements) într-un singur video.',
      url: 'https://youtu.be/zwnAttPGvQ0?si=7bblZQMq9lv4_Oxl',
      videoId: 'zwnAttPGvQ0',
    },
    firmRules: [
      'Trailing drawdown EOD sau Intraday — alege în funcție de stilul tău',
      'Maximum 20 de conturi PA simultan',
      'Maximum 3 conturi tradate simultan în aceeași oră / același simbol',
      'Stop loss obligatoriu — fără SL, ordinul este invalidat',
      'Fără hedging între conturi pentru a ocoli regulile',
      'Drawdown-ul se oprește când contul atinge balanța start + drawdown amount (doar EOD)',
    ],
    challenges: [
      { name: 'Apex Eval — 25K', price: '$17', originalPrice: '$167' },
      { name: 'Apex Eval — 50K', price: '$20', originalPrice: '$200' },
      { name: 'Apex Eval — 75K', price: '$25', originalPrice: '$250' },
      { name: 'Apex Eval — 100K', price: '$35', originalPrice: '$350' },
      { name: 'Apex Eval — 150K', price: '$40', originalPrice: '$400' },
      { name: 'Apex Eval — 250K', price: '$60', originalPrice: '$600' },
      { name: 'Apex Eval — 300K', price: '$80', originalPrice: '$800' },
    ],
    payoutTiers: {
      title: 'Tiere de Payout',
      intro: 'Suma minimă și maximă pe care o poți retrage la fiecare payout în funcție de mărimea contului.',
      rows: [
        { label: 'Minim per payout', value: '$500 (toate conturile)' },
        { label: 'Primele 5 payout-uri', value: 'Maxim $1,500 - $5,000 în funcție de cont' },
        { label: 'Payout-uri 6+', value: '100% din profit, fără plafon' },
        { label: 'Frecvență', value: 'La fiecare 8 zile de trading' },
      ],
    },
    lightningFunded: null,
    reviews: [
      { author: 'Mihai R.', initials: 'MR', rating: 5, date: '12 Apr 2026', verified: true, text: 'Cel mai bun raport calitate-preț din piață când prinzi promo-ul de 80-90%. Am scos primul payout după 3 săptămâni.' },
      { author: 'Andrei V.', initials: 'AV', rating: 4, date: '02 Apr 2026', verified: true, text: 'Reguli clare, suport rapid pe Discord. EOD drawdown e un mare plus pentru cei care țin pozițiile peste noapte.' },
      { author: 'Bogdan C.', initials: 'BC', rating: 3, date: '21 Mar 2026', verified: false, text: 'Conturile PA au regula de 30% care necesită planificare — nu e pentru cei care vor să dea totul într-o zi.' },
    ],
  },
  {
    id: 'fundednext',
    name: 'FundedNext Futures',
    logo: 'FN',
    logoImg: 'assets/logo-fundednext-fit.png',
    logoListImg: 'assets/logo-fundednext-fit.png',
    logoBg: '#0A0A0A',
    accent: 'blue',
    tag: 'ALTERNATIVE STRUCTURES',
    rank: 3,
    favCount: 26620,
    ceo: 'Syed Abdullah Jayed',
    country: 'AE',
    countryFlag: '🇦🇪',
    foundedDate: 'Aug 2022',
    yearsInOp: 3,
    trustpilotScore: 4.5,
    totalReviews: 68523,
    reviewBreakdown: { 5: 51393, 4: 8908, 3: 2741, 2: 1370, 1: 4111 },
    trustpilotUrl: 'https://www.trustpilot.com/review/fundednext.com',
    assets: ['Forex', 'Indici', 'Crypto', 'Metale'],
    platforms: ['MetaTrader 4', 'MetaTrader 5', 'cTrader', 'Match-Trader'],
    platformCount: 4,
    maxAllocation: '$300K',
    promoCode: null,
    promoDiscount: '10% OFF',
    promoDescription: 'Reduceri sezoniere active pe site-ul oficial. Verifică direct la momentul achiziției.',
    promoActionLabel: 'OPEN THE LINK',
    affiliateUrl: 'https://fundednext.com/?fpr=george-alexandru22',
    bestFor: 'Traderi care preferă static DD, forex & indici',
    aiSummary: 'FundedNext, cu sediul în Emiratele Arabe Unite, a fost înființată în 2022 și a devenit rapid una dintre cele mai mari prop firms din lume pe forex și indici. Oferă mai multe tipuri de cont (Evaluation, Stellar, Stellar 1-Step, Express), fiecare cu reguli ușor diferite, inclusiv variante cu static drawdown pentru traderii risk-averse. Profit split competitiv și plăți rapide prin Rise, Deel sau bank wire.',
    instrumentsAndAssets: [
      'Forex: toate perechile majore și cross-uri',
      'Indici: US30, NAS100, SPX500, GER40, UK100',
      'Metale: XAUUSD (Gold), XAGUSD (Silver)',
      'Crypto CFD: BTC, ETH și alte alt-coins majore'
    ],
    leverage: 'Levier de până la 1:100 pe forex, 1:50 pe indici și metale, 1:2 pe crypto.',
    commissions: [
      'Spread variabil de la 0.0 pips pe conturile RAW',
      'Comision $3-$7 per lot round-trip pe RAW',
      'Conturile Standard au comision inclus în spread'
    ],
    consistencyRules: [
      'Pe contul Stellar: regula zilei profitabile maxime — nicio zi nu poate trece de 35-40% din profitul total',
      'Pe contul Express: fără regulă de consistență',
      'Verifică contractul specific la achiziție — regulile diferă între tipurile de cont'
    ],
    firmRules: [
      'Static drawdown disponibil pe conturile Stellar — DD nu mai urcă după ce contul ajunge în profit',
      'Trailing drawdown pe alte variante',
      'Fără news trading în primele 2 minute după release-uri majore (pe unele conturi)',
      'Fără hedging între conturi diferite',
      'Profit split 80/20, crescând până la 95/5 după payout-uri repetate'
    ],
    challenges: [
      { name: 'Evaluation — 6K',  price: '$59',  originalPrice: null },
      { name: 'Evaluation — 15K', price: '$99',  originalPrice: null },
      { name: 'Evaluation — 25K', price: '$199', originalPrice: null },
      { name: 'Evaluation — 50K', price: '$329', originalPrice: null },
      { name: 'Stellar 1-Step — 100K', price: '$549', originalPrice: null },
      { name: 'Stellar 1-Step — 200K', price: '$999', originalPrice: null },
    ],
    payoutTiers: {
      title: 'Tiere de Payout',
      intro: 'Profit split și frecvență payout în funcție de tipul contului.',
      rows: [
        { label: 'Primul payout (Stellar)', value: 'După 5 zile de trading în profit' },
        { label: 'Profit split inițial', value: '80% trader / 20% firma' },
        { label: 'Profit split maxim', value: 'Până la 95% trader după payout-uri repetate' },
        { label: 'Frecvență', value: 'La fiecare 14 zile de trading' },
        { label: 'Minim per payout', value: 'Fără minim impus' },
      ],
    },
    lightningFunded: null,
    reviews: [
      { author: 'Vlad N.', initials: 'VN', rating: 5, date: '02 Mai 2026', verified: true, text: 'Conturile cu static drawdown sunt o gură de aer pentru cei care nu vor presiunea trailing DD-ului.' },
      { author: 'Ioana T.', initials: 'IT', rating: 4, date: '20 Apr 2026', verified: true, text: 'Plățile vin la timp, suportul răspunde în câteva ore. Spread-urile RAW sunt OK pentru scalping.' },
    ],
  },
  {
    id: 'fnmarkets',
    name: 'FundedNext Markets',
    logo: 'FNM',
    logoImg: 'assets/logo-fundednext-fit.png',
    logoListImg: 'assets/logo-fundednext-fit.png',
    logoBg: '#0A0A0A',
    accent: 'gold',
    tag: 'BROKERAGE STYLE',
    rank: 4,
    favCount: 5240,
    ceo: 'Syed Abdullah Jayed',
    country: 'AE',
    countryFlag: '🇦🇪',
    foundedDate: 'Nov 2024',
    yearsInOp: 1,
    trustpilotScore: 4.4,
    totalReviews: 1280,
    reviewBreakdown: { 5: 880, 4: 240, 3: 70, 2: 40, 1: 50 },
    assets: ['Forex', 'Indici', 'Crypto', 'CFD'],
    platforms: ['MetaTrader 5', 'cTrader'],
    platformCount: 2,
    maxAllocation: 'depozit liber',
    promoCode: null,
    promoDiscount: 'up to 200% BONUS',
    promoDescription: 'Bonusuri de depozit și competiții lunare. Verifică ofertele active direct pe site.',
    promoActionLabel: 'OPEN THE LINK',
    affiliateUrl: 'https://app.fnmarkets.com/auth?page=registration&referral_code=daa44a82b99540ea3938061ad5d405a21a606c36daae5b0b83b46864d8880d1e',
    bestFor: 'Trading direct cu capital propriu, expunere diversificată',
    aiSummary: 'FundedNext Markets este brațul brokerage al FundedNext. Spre deosebire de programele de funding, aici depui capital propriu și tranzacționezi direct, fără fază de evaluare. Util pentru traderii care vor expunere CFD pe forex, crypto, indici și commodities, cu spread-uri competitive și withdrawal rapid.',
    instrumentsAndAssets: [
      'Forex: toate perechile majore și exotice',
      'Crypto CFD: BTC, ETH, SOL, XRP și alte alt-coins',
      'Indici globali: US30, NAS100, SPX500, GER40, JP225',
      'Commodities: aur, argint, petrol, gaz natural'
    ],
    leverage: 'Levier de până la 1:500 pe forex, 1:200 pe indici și metale, 1:10 pe crypto.',
    commissions: [
      'Spread de la 0.0 pips pe contul RAW',
      'Comision $3 per lot round-trip pe RAW',
      'Conturile Standard fără comision (spread mărit)'
    ],
    consistencyRules: [
      'Nu se aplică reguli de consistență — capitalul e al tău',
      'Singurele restricții sunt cele de gestionare a riscului impuse de broker (margin call, stop out)'
    ],
    firmRules: [
      'Depozit minim de la $50',
      'Withdrawal procesat în 24h pentru metode crypto, până la 3 zile pentru bank wire',
      'KYC obligatoriu înainte de prima retragere',
      'Fără bonus abuse (folosirea bonusurilor doar pentru retragere instantă)'
    ],
    challenges: [],
    payoutTiers: {
      title: 'Politica de Withdrawal',
      intro: 'Detalii despre procesarea retragerilor pe contul de brokerage.',
      rows: [
        { label: 'Minim withdrawal', value: '$10' },
        { label: 'Timp procesare crypto', value: 'sub 24 ore' },
        { label: 'Timp procesare bank wire', value: '1-3 zile lucrătoare' },
        { label: 'Taxe', value: 'Fără taxe interne (taxele de blockchain rămân ale tale)' },
      ],
    },
    lightningFunded: null,
    reviews: [
      { author: 'George A.', initials: 'GA', rating: 5, date: '28 Apr 2026', verified: true, text: 'Spread-urile sunt foarte bune pe XAUUSD, withdrawal-ul în USDT vine în câteva ore.' },
      { author: 'Maria L.', initials: 'ML', rating: 4, date: '15 Apr 2026', verified: true, text: 'Bun pentru cine vrea brokerage direct fără faza de evaluare. cTrader funcționează stabil.' },
    ],
  },
];

// ============================================================
// SHARED — Promo badge (stil Apply for Elite, acid glow)
// ============================================================

const openExternalUrl = (url) => {
  if (!url) return;
  const tab = window.open(url, '_blank', 'noopener,noreferrer');
  if (tab) tab.opener = null;
};

const PromoBadge = ({ discount, code, actionLabel, url, size = 'sm', onClick }) => {
  const [copied, setCopied] = React.useState(false);
  const handleClick = (e) => {
    e.stopPropagation();
    if (code) {
      navigator.clipboard?.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
    openExternalUrl(url);
    onClick?.();
  };
  if (!code && !url) {
    return (
      <span className={`pf-promo-btn pf-promo-btn-${size} pf-promo-btn-disabled`}>
        <span className="pf-promo-discount">{discount}</span>
      </span>
    );
  }
  return (
    <button className={`pf-promo-btn pf-promo-btn-${size}`} onClick={handleClick} type="button">
      <span className="pf-promo-discount">{discount}</span>
      <span className="pf-promo-sep"/>
      <span className="pf-promo-code">{actionLabel || code}</span>
      <span className="pf-promo-icon">
        {copied && code ? <Icon name="check" size={size === 'lg' ? 16 : 12}/> : <Icon name={url ? 'arrow' : 'file'} size={size === 'lg' ? 16 : 12}/>}
      </span>
    </button>
  );
};

// ============================================================
// SHARED — Star rating
// ============================================================

const StarRating = ({ score, size = 12 }) => {
  const full = Math.round(score);
  return (
    <span className="pf-stars" style={{display:'inline-flex', gap:2}}>
      {[1,2,3,4,5].map(n => (
        <Icon key={n} name="star" size={size} style={{color: n <= full ? 'var(--gold)' : 'rgba(255,255,255,0.12)'}}/>
      ))}
    </span>
  );
};

// ============================================================
// LIST PAGE — tabel cu toate firmele
// ============================================================

// ============================================================
// PROP FIRMS PARALLAX — scroll-driven 3D opening animation
// 3 rows of firm tiles that pan horizontally in opposite
// directions while the whole stack tilts down + fades in.
// The "folder" of firms opens up as you scroll, then the
// full comparison table appears below.
// ============================================================
const PropFirmsParallax = () => {
  const sectionRef = React.useRef(null);
  const planeRef   = React.useRef(null);
  const row1Ref    = React.useRef(null);
  const row2Ref    = React.useRef(null);
  const row3Ref    = React.useRef(null);

  // Build 3 rows of tiles from the 3 firms (each repeated to fill the row)
  const baseTiles = PROP_FIRMS_DATA.slice(0, 3).map((f) => ({
    id: f.id, name: f.name, logo: f.logoImg, accent: f.accent, bg: f.logoBg,
  }));
  const makeRow = (offset) => Array.from({ length: 6 }).map((_, i) => baseTiles[(i + offset) % baseTiles.length]);
  const row1 = makeRow(0);
  const row2 = makeRow(1);
  const row3 = makeRow(2);

  React.useLayoutEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced || !window.gsap || !window.ScrollTrigger) return;
    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    gsap.registerPlugin(ScrollTrigger);

    const triggers = [];

    // Plane: rotates from tilted-down → flat + slides up + fades in
    if (planeRef.current) {
      gsap.set(planeRef.current, {
        rotateX: 20,
        rotateZ: 12,
        y: 240,
        opacity: 0.15,
        transformPerspective: 1200,
        transformStyle: 'preserve-3d',
      });
      const tw = gsap.to(planeRef.current, {
        rotateX: 0,
        rotateZ: 0,
        y: 0,
        opacity: 1,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top top',
          end:   'bottom bottom',
          scrub: 0.6,
        },
      });
      if (tw.scrollTrigger) triggers.push(tw.scrollTrigger);
    }

    // Row 1 → drift right
    if (row1Ref.current) {
      const tw = gsap.fromTo(row1Ref.current,
        { x: -180 },
        { x: 220, ease: 'none',
          scrollTrigger: { trigger: sectionRef.current, start: 'top top', end: 'bottom bottom', scrub: 0.4 } });
      if (tw.scrollTrigger) triggers.push(tw.scrollTrigger);
    }
    // Row 2 → drift left (opposite direction)
    if (row2Ref.current) {
      const tw = gsap.fromTo(row2Ref.current,
        { x: 180 },
        { x: -220, ease: 'none',
          scrollTrigger: { trigger: sectionRef.current, start: 'top top', end: 'bottom bottom', scrub: 0.4 } });
      if (tw.scrollTrigger) triggers.push(tw.scrollTrigger);
    }
    // Row 3 → drift right (slower)
    if (row3Ref.current) {
      const tw = gsap.fromTo(row3Ref.current,
        { x: -160 },
        { x: 200, ease: 'none',
          scrollTrigger: { trigger: sectionRef.current, start: 'top top', end: 'bottom bottom', scrub: 0.55 } });
      if (tw.scrollTrigger) triggers.push(tw.scrollTrigger);
    }

    return () => triggers.forEach((t) => t && t.kill && t.kill());
  }, []);

  return (
    <section ref={sectionRef} className="pf-parallax">
      {/* Hero overlay (sticky) */}
      <div className="pf-parallax-hero">
        <div className="container">
          <div className="eyebrow"><span className="dot"/>PROP FIRMS · OFERTE ACTIVE</div>
          <h1 style={{ marginTop: 18, maxWidth: 880 }}>
            Prop firms pe care le <span className="acid">folosesc</span> și le recomand.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 640 }}>
            Compară rapid firmele de funding, regulile importante și ofertele disponibile. Toate codurile sunt active la momentul publicării.
          </p>
          <div style={{ marginTop: 30, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
            <div className="row" style={{gap:8}}>
              <span className="tag acid"><Icon name="check" size={12}/>Coduri active</span>
              <span className="tag cyan"><Icon name="shield" size={12}/>Folosite personal</span>
              <span className="tag blue"><Icon name="refresh" size={12}/>Update lunar</span>
            </div>
          </div>
          <div className="pf-parallax-hint">
            <Icon name="arrowDown" size={14}/>
            <span>Scroll pentru a deschide tabelul</span>
          </div>
        </div>
      </div>

      {/* Plane with 3 rows of tiles — "the folder opening" */}
      <div className="pf-parallax-stage">
        <div ref={planeRef} className="pf-parallax-plane">
          <div ref={row1Ref} className="pf-parallax-row">
            {row1.map((t, i) => <PFTile key={`r1-${i}`} {...t}/>)}
          </div>
          <div ref={row2Ref} className="pf-parallax-row">
            {row2.map((t, i) => <PFTile key={`r2-${i}`} {...t}/>)}
          </div>
          <div ref={row3Ref} className="pf-parallax-row">
            {row3.map((t, i) => <PFTile key={`r3-${i}`} {...t}/>)}
          </div>
        </div>
      </div>

      <style>{`
        .pf-parallax {
          position: relative;
          /* tall enough that the GSAP scrub has room to play, then ends and
             the actual table follows underneath naturally. */
          height: 180vh;
          padding-top: 0;
        }
        .pf-parallax-hero {
          position: sticky;
          top: 0;
          padding-top: 80px;
          padding-bottom: 30px;
          z-index: 5;
          pointer-events: none;
        }
        .pf-parallax-hero > .container { pointer-events: auto; }
        .pf-parallax-hint {
          margin-top: 32px;
          display: inline-flex;
          align-items: center; gap: 10px;
          padding: 10px 16px;
          border-radius: 999px;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
          font-family: 'JetBrains Mono', monospace;
          font-size: 11.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--text-mute);
          backdrop-filter: blur(6px);
          animation: pf-pa-hint 2.4s ease-in-out infinite;
        }
        .pf-parallax-hint svg { color: var(--acid); }
        @keyframes pf-pa-hint {
          0%, 100% { transform: translateY(0); opacity: 0.7; }
          50%      { transform: translateY(4px); opacity: 1; }
        }

        .pf-parallax-stage {
          position: sticky;
          top: 0;
          height: 100vh;
          display: grid; place-items: end center;
          padding-bottom: 0;
          z-index: 1;
          overflow: hidden;
        }
        .pf-parallax-plane {
          width: 100%;
          display: flex; flex-direction: column;
          gap: 26px;
          padding-bottom: 40px;
          transform-style: preserve-3d;
          will-change: transform, opacity;
        }
        .pf-parallax-row {
          display: flex;
          gap: 26px;
          will-change: transform;
        }
        /* Mask out the top of the plane so it appears to "rise" out of the
           page rather than slam against the hero text. */
        .pf-parallax-stage::before {
          content: '';
          position: absolute; inset: 0;
          background: linear-gradient(180deg, var(--bg) 0%, transparent 25%);
          pointer-events: none;
          z-index: 3;
        }

        /* Tile */
        .pf-pa-tile {
          flex-shrink: 0;
          width: 280px;
          height: 170px;
          border-radius: 18px;
          padding: 18px 20px;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
            rgba(10, 10, 12, 0.85);
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow:
            0 22px 60px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
          display: flex; flex-direction: column;
          justify-content: space-between;
          transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        .pf-pa-tile::before {
          content: '';
          position: absolute; inset: 0;
          background: radial-gradient(ellipse at top right, var(--tile-glow, rgba(183,255,26,0.10)), transparent 60%);
          pointer-events: none;
          opacity: 0.7;
        }
        .pf-pa-tile:hover {
          transform: translateY(-4px);
          border-color: rgba(255,255,255,0.18);
          box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 50px var(--tile-glow, rgba(183,255,26,0.18));
        }
        .pf-pa-tile-acid { --tile-glow: rgba(183, 255, 26, 0.20); }
        .pf-pa-tile-cyan { --tile-glow: rgba(79, 231, 213, 0.20); }
        .pf-pa-tile-blue { --tile-glow: rgba(90, 200, 255, 0.20); }
        .pf-pa-tile-gold { --tile-glow: rgba(255, 203, 82, 0.22); }

        .pf-pa-tile-head {
          display: flex; justify-content: space-between; align-items: center;
          position: relative; z-index: 1;
        }
        .pf-pa-tile-logo {
          width: 56px; height: 56px;
          border-radius: 14px;
          display: grid; place-items: center;
          background: #050507;
          border: 1px solid rgba(255,255,255,0.10);
          overflow: hidden;
        }
        .pf-pa-tile-logo img { width: 70%; height: 70%; object-fit: contain; }
        .pf-pa-tile-tag {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
          padding: 3px 9px;
          border-radius: 999px;
          color: var(--tile-color, var(--acid));
          background: var(--tile-bg, rgba(183, 255, 26, 0.08));
          border: 1px solid var(--tile-border, rgba(183, 255, 26, 0.28));
        }
        .pf-pa-tile-acid .pf-pa-tile-tag { --tile-color: var(--acid); --tile-bg: rgba(183, 255, 26, 0.08); --tile-border: rgba(183, 255, 26, 0.28); }
        .pf-pa-tile-cyan .pf-pa-tile-tag { --tile-color: var(--cyan); --tile-bg: rgba(79, 231, 213, 0.08); --tile-border: rgba(79, 231, 213, 0.28); }
        .pf-pa-tile-blue .pf-pa-tile-tag { --tile-color: var(--blue); --tile-bg: rgba(90, 200, 255, 0.08); --tile-border: rgba(90, 200, 255, 0.28); }

        .pf-pa-tile-name {
          position: relative; z-index: 1;
          font-size: 18px;
          font-weight: 700;
          letter-spacing: -0.01em;
        }
        .pf-pa-tile-foot {
          position: relative; z-index: 1;
          display: flex; align-items: center; justify-content: space-between;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          color: rgba(255, 255, 255, 0.45);
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }
        .pf-pa-tile-foot span:last-child {
          color: var(--tile-color, var(--acid));
        }

        @media (max-width: 980px) {
          .pf-parallax { height: 150vh; }
          .pf-pa-tile { width: 220px; height: 140px; padding: 14px 16px; }
          .pf-pa-tile-name { font-size: 16px; }
          .pf-pa-tile-logo { width: 44px; height: 44px; }
        }
        @media (max-width: 640px) {
          .pf-parallax { height: 130vh; }
          .pf-pa-tile { width: 180px; height: 120px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .pf-parallax { height: auto; padding-top: 80px; padding-bottom: 30px; }
          .pf-parallax-hero { position: static; }
          .pf-parallax-stage { position: static; height: auto; padding: 40px 0; }
          .pf-parallax-plane { transform: none !important; opacity: 1 !important; }
          .pf-parallax-row { transform: none !important; flex-wrap: wrap; justify-content: center; }
          .pf-parallax-hint { animation: none; }
        }
      `}</style>
    </section>
  );
};

const PFTile = ({ id, name, logo, accent, bg }) => (
  <div className={`pf-pa-tile pf-pa-tile-${accent || 'acid'}`}>
    <div className="pf-pa-tile-head">
      <div className="pf-pa-tile-logo" style={{ background: bg || '#050507' }}>
        {logo && <img src={logo} alt={name}/>}
      </div>
      <span className="pf-pa-tile-tag">Folosit · Recomandat</span>
    </div>
    <div className="pf-pa-tile-name">{name}</div>
    <div className="pf-pa-tile-foot">
      <span>Prop firm</span>
      <span>Active →</span>
    </div>
  </div>
);

// ============================================================
// PROP FIRMS TILT CARDS — premium "Funded Account" + "Payout"
// floating cards with 3D mouse-tilt + depth (translateZ).
// Sits on the right side of the propfirms hero.
// ============================================================
const PropFirmsTiltCards = () => {
  const stageRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  const handleMove = (e) => {
    const el = stageRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const cx = (e.clientX - r.left) / r.width;   // 0..1
    const cy = (e.clientY - r.top)  / r.height;  // 0..1
    // ±10° tilt range
    setTilt({
      x: (0.5 - cy) * 12,  // pitch (up/down)
      y: (cx - 0.5) * 12,  // yaw (left/right)
    });
  };
  const handleLeave = () => setTilt({ x: 0, y: 0 });

  const stageStyle = {
    transform: `perspective(1200px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
    transition: 'transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
    transformStyle: 'preserve-3d',
  };

  return (
    <div className="pf-tilt-wrap">
      <div
        ref={stageRef}
        className="pf-tilt-stage"
        style={stageStyle}
        onMouseMove={handleMove}
        onMouseLeave={handleLeave}>

        {/* Background ambient glow inside stage */}
        <div className="pf-tilt-glow pf-tilt-glow-acid" />
        <div className="pf-tilt-glow pf-tilt-glow-cyan" />

        {/* MAIN CARD — Apex: largest payouts in the industry */}
        <div className="pf-tilt-card pf-tilt-card-main pf-tilt-card-acid">
          <div className="pf-tilt-card-shine" />
          <div className="pf-tilt-card-noise" />
          <div className="pf-tilt-card-head">
            <div className="pf-tilt-brand">
              <div className="pf-tilt-brand-logo">
                <img src="assets/logo-apex-fit.png" alt="Apex"/>
              </div>
              <div className="pf-tilt-brand-meta">
                <div className="pf-tilt-brand-name">Apex Trader Funding</div>
                <div className="pf-tilt-brand-tag">CELE MAI MARI PAYOUT-URI</div>
              </div>
            </div>
            <div className="pf-tilt-badge">
              <Icon name="crown" size={14} stroke={2.4}/>
            </div>
          </div>

          <div className="pf-tilt-balance">
            <div className="pf-tilt-balance-label">Plătiți din 2022 — total</div>
            <div className="pf-tilt-balance-num">$796.69M</div>
          </div>

          <div className="pf-tilt-foot">
            <div>
              <div className="pf-tilt-foot-label">Încredere</div>
              <div className="pf-tilt-stars">
                <span/><span/><span/><span/><span/>
              </div>
            </div>
            <div>
              <div className="pf-tilt-foot-label">Capital max</div>
              <div className="pf-tilt-foot-val acid">$300K</div>
            </div>
          </div>

          <div className="pf-tilt-card-border" />
        </div>

        {/* SECONDARY CARD — Tradeify: fastest payout approval */}
        <div className="pf-tilt-card pf-tilt-card-second pf-tilt-card-cyan">
          <div className="pf-tilt-card-shine" />
          <div className="pf-tilt-card-noise" />
          <div className="pf-tilt-card-head">
            <div className="pf-tilt-brand">
              <div className="pf-tilt-brand-logo pf-tilt-brand-logo-sm">
                <img src="assets/logo-tradeify-icon.png" alt="Tradeify"/>
              </div>
              <div className="pf-tilt-brand-meta">
                <div className="pf-tilt-brand-name pf-tilt-brand-name-sm">Tradeify</div>
                <div className="pf-tilt-brand-tag cyan">CEL MAI RAPID PAYOUT</div>
              </div>
            </div>
            <div className="pf-tilt-bolt">
              <Icon name="bolt" size={14} stroke={2.5}/>
            </div>
          </div>

          <div className="pf-tilt-payout">
            <span className="pf-tilt-payout-num">~1h</span>
            <span className="pf-tilt-payout-curr">aprobare</span>
          </div>

          <div className="pf-tilt-foot pf-tilt-foot-sm">
            <div className="pf-tilt-stars pf-tilt-stars-cyan">
              <span/><span/><span/><span/><span/>
            </div>
            <span className="cyan">Rapiditate</span>
          </div>
        </div>
      </div>

      <style>{`
        .pf-tilt-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          max-width: 500px;
          margin-left: auto;
        }
        @media (max-width: 980px) {
          .pf-tilt-wrap { max-width: 460px; margin: 30px auto 0; }
        }

        .pf-tilt-stage {
          position: absolute;
          inset: 0;
          display: grid; place-items: center;
          transform-style: preserve-3d;
        }
        .pf-tilt-glow {
          position: absolute;
          width: 70%; aspect-ratio: 1;
          border-radius: 50%;
          filter: blur(70px);
          pointer-events: none;
          animation: pf-tilt-glow-pulse 7s ease-in-out infinite;
        }
        .pf-tilt-glow-acid {
          top: 5%; left: 10%;
          background: radial-gradient(circle, rgba(183,255,26,0.22), transparent 70%);
        }
        .pf-tilt-glow-cyan {
          bottom: 5%; right: 10%;
          background: radial-gradient(circle, rgba(79,231,213,0.16), transparent 70%);
          animation-delay: 2s;
        }
        @keyframes pf-tilt-glow-pulse {
          0%, 100% { opacity: 0.65; transform: scale(1); }
          50%      { opacity: 1;    transform: scale(1.05); }
        }

        /* ==== CARDS ==== */
        .pf-tilt-card {
          position: absolute;
          border-radius: 22px;
          padding: 22px 24px;
          overflow: hidden;
          isolation: isolate;
          background:
            linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 60%, rgba(0,0,0,0.20) 100%),
            rgba(10, 10, 12, 0.92);
          border: 1px solid rgba(255,255,255,0.10);
          box-shadow:
            0 30px 70px rgba(0, 0, 0, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 -1px 0 rgba(0, 0, 0, 0.40);
          display: flex; flex-direction: column;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          transition: transform 0.5s ease, box-shadow 0.4s ease;
        }
        .pf-tilt-card:hover {
          transform: translateZ(60px) !important;
        }
        .pf-tilt-card-shine {
          position: absolute; inset: 0;
          background: radial-gradient(ellipse at top right, rgba(255,255,255,0.10), transparent 55%);
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .pf-tilt-card-noise {
          position: absolute; inset: 0;
          opacity: 0.08;
          mix-blend-mode: overlay;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          pointer-events: none;
        }
        .pf-tilt-card-border {
          position: absolute; inset: 0;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(135deg, var(--pf-tilt-border, rgba(183,255,26,0.5)) 0%, transparent 50%, var(--pf-tilt-border-2, rgba(79,231,213,0.3)) 100%);
          -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
          pointer-events: none;
        }
        .pf-tilt-card-acid {
          --pf-tilt-border:   rgba(183,255,26,0.55);
          --pf-tilt-border-2: rgba(143,224,0,0.20);
          box-shadow:
            0 30px 70px rgba(0, 0, 0, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 0 50px rgba(183, 255, 26, 0.12);
        }
        .pf-tilt-card-cyan {
          --pf-tilt-border:   rgba(79,231,213,0.55);
          --pf-tilt-border-2: rgba(43,201,181,0.20);
          box-shadow:
            0 24px 50px rgba(0, 0, 0, 0.65),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 0 36px rgba(79, 231, 213, 0.14);
        }

        /* MAIN CARD — Funded Account (large, bottom-left) */
        .pf-tilt-card-main {
          width: 340px; height: 210px;
          left: 0;
          bottom: 12%;
          transform: translateZ(40px) rotate(-3deg);
          z-index: 10;
        }
        /* SECONDARY CARD — Payout (smaller, top-right) */
        .pf-tilt-card-second {
          width: 240px; height: 150px;
          right: -12px;
          top: 6%;
          transform: translateZ(70px) rotate(4deg);
          z-index: 12;
        }

        /* Card head */
        .pf-tilt-card-head {
          display: flex; justify-content: space-between; align-items: flex-start;
          position: relative; z-index: 2;
        }
        .pf-tilt-brand { display: flex; align-items: center; gap: 10px; }
        .pf-tilt-brand-logo {
          width: 36px; height: 36px;
          border-radius: 10px;
          display: grid; place-items: center;
          background: #050507;
          border: 1px solid rgba(255,255,255,0.12);
          overflow: hidden;
        }
        .pf-tilt-brand-logo img { width: 78%; height: 78%; object-fit: contain; }
        .pf-tilt-brand-logo-sm { width: 28px; height: 28px; border-radius: 8px; }
        .pf-tilt-brand-meta { display: flex; flex-direction: column; gap: 2px; }
        .pf-tilt-brand-name {
          font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
          color: #fff;
        }
        .pf-tilt-brand-name-sm { font-size: 11px; }
        .pf-tilt-brand-tag {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          letter-spacing: 0.16em;
          color: var(--acid);
        }
        .pf-tilt-brand-tag.cyan { color: var(--cyan); }

        /* Crown badge for the "biggest payouts" card */
        .pf-tilt-badge {
          width: 36px; height: 36px;
          border-radius: 12px;
          display: grid; place-items: center;
          background: linear-gradient(180deg, #C8FF35 0%, #6FB300 100%);
          color: #050505;
          border: 1px solid rgba(0,0,0,0.18);
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.4),
            inset 0 -1px 0 rgba(60,100,0,0.5),
            0 6px 14px rgba(183,255,26,0.40);
        }

        /* Bolt badge for the "fastest payout" card */
        .pf-tilt-bolt {
          width: 30px; height: 30px;
          border-radius: 10px;
          display: grid; place-items: center;
          background: linear-gradient(180deg, #66EFDE 0%, #2BC9B5 100%);
          color: #04261F;
          border: 1px solid rgba(0,0,0,0.16);
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.4),
            0 5px 12px rgba(79,231,213,0.40);
        }

        /* Star rating (used on both cards) */
        .pf-tilt-stars {
          display: inline-flex; align-items: center; gap: 3px;
          margin-top: 5px;
        }
        .pf-tilt-stars span {
          width: 11px; height: 11px;
          background: var(--acid);
          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15 9 22 10 17 15 18 22 12 19 6 22 7 15 2 10 9 9 12 2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15 9 22 10 17 15 18 22 12 19 6 22 7 15 2 10 9 9 12 2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          filter: drop-shadow(0 0 4px rgba(183,255,26,0.55));
        }
        .pf-tilt-stars-cyan span {
          background: var(--cyan);
          filter: drop-shadow(0 0 4px rgba(79,231,213,0.55));
        }

        /* Balance (main card) */
        .pf-tilt-balance {
          margin-top: 18px;
          position: relative; z-index: 2;
          flex: 1;
          display: flex; flex-direction: column; justify-content: center;
        }
        .pf-tilt-balance-label {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.45);
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .pf-tilt-balance-num {
          margin-top: 4px;
          font-size: 38px;
          font-weight: 800;
          letter-spacing: -0.03em;
          background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 50%, #8FE000 100%);
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
          filter: drop-shadow(0 0 20px rgba(183,255,26,0.30));
          line-height: 1;
        }

        /* Foot */
        .pf-tilt-foot {
          display: flex; justify-content: space-between; align-items: flex-end;
          gap: 14px;
          position: relative; z-index: 2;
        }
        .pf-tilt-foot-sm { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
        .pf-tilt-foot-sm .cyan { color: var(--cyan); }
        .pf-tilt-foot-sm span:first-child { color: rgba(255,255,255,0.45); }
        .pf-tilt-foot-label {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9.5px;
          color: rgba(255, 255, 255, 0.40);
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }
        .pf-tilt-foot-val {
          margin-top: 4px;
          font-size: 12.5px;
          font-weight: 700;
          color: #fff;
          letter-spacing: 0.08em;
        }
        .pf-tilt-foot-val.acid { color: var(--acid); text-shadow: 0 0 10px rgba(183,255,26,0.40); }

        /* Big number on secondary card */
        .pf-tilt-payout {
          margin-top: 12px;
          position: relative; z-index: 2;
          display: flex; align-items: baseline; gap: 8px;
          flex: 1;
        }
        .pf-tilt-payout-num {
          font-size: 38px;
          font-weight: 800;
          letter-spacing: -0.03em;
          background: linear-gradient(180deg, #99F3E6 0%, #4FE7D5 50%, #2BC9B5 100%);
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
          line-height: 1;
          filter: drop-shadow(0 0 16px rgba(79,231,213,0.30));
        }
        .pf-tilt-payout-curr {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          color: rgba(255, 255, 255, 0.50);
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }

        @media (max-width: 980px) {
          .pf-tilt-card-main { width: 280px; height: 180px; }
          .pf-tilt-card-second { width: 200px; height: 130px; right: -6px; }
          .pf-tilt-balance-num { font-size: 30px; }
          .pf-tilt-payout-num { font-size: 30px; }
        }
        @media (max-width: 540px) {
          .pf-tilt-card-main { width: 240px; height: 160px; padding: 18px; }
          .pf-tilt-card-second { width: 170px; height: 110px; padding: 14px; }
          .pf-tilt-balance-num { font-size: 26px; }
          .pf-tilt-payout-num { font-size: 26px; }
          .pf-tilt-mini { font-size: 9px; padding: 6px 10px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .pf-tilt-stage { transition: none; transform: none !important; }
          .pf-tilt-glow, .pf-tilt-mini { animation: none; }
        }
      `}</style>
    </div>
  );
};

const PropFirmsListPage = ({ onNavDetail }) => (
  <>
    <section style={{paddingTop: 80, paddingBottom: 30}}>
      <div className="container">
        <div className="pf-hero-grid">
          <div>
            <div className="eyebrow"><span className="dot"/>PROP FIRMS · OFERTE ACTIVE</div>
            <h1 style={{ marginTop: 18, maxWidth: 880 }}>
              Prop firms pe care le <span className="acid">folosesc</span> și le recomand.
            </h1>
            <p className="lead" style={{ marginTop: 22, maxWidth: 640 }}>
              Compară rapid firmele de funding, regulile importante și ofertele disponibile. Toate codurile sunt active la momentul publicării.
            </p>
            <div style={{ marginTop: 30, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
              <div className="row" style={{gap:8}}>
                <span className="tag acid"><Icon name="check" size={12}/>Coduri active</span>
                <span className="tag cyan"><Icon name="shield" size={12}/>Folosite personal</span>
                <span className="tag blue"><Icon name="refresh" size={12}/>Update lunar</span>
              </div>
            </div>
          </div>
          <PropFirmsTiltCards />
        </div>
      </div>
      <style>{`
        .pf-hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 30px;
          align-items: center;
        }
        @media (max-width: 980px) {
          .pf-hero-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>

    <section style={{paddingTop: 10, position: 'relative'}}>
      <div className="container pf-list-container">
        <div className="pf-list">
          <div className="pf-list-head">
            <div>FIRMĂ</div>
            <div>RATING · REVIEW-URI</div>
            <div>ȚARĂ</div>
            <div>ANI</div>
            <div>ASSETS</div>
            <div>PLATFORME</div>
            <div>MAX ALLOCATION</div>
            <div>PROMO</div>
            <div></div>
          </div>

          {PROP_FIRMS_DATA.map((firm, i) => (
            <Reveal key={firm.id} delay={i * 70}>
              <div className={`pf-row ${firm.accentLabel ? `pf-row-featured pf-row-featured-${firm.accent}` : ''}`}
                   onClick={() => onNavDetail(firm.id)}>
                {/* Firm */}
                <div className="pf-cell pf-cell-firm">
                  <div className="pf-rank-num">{firm.rank}</div>
                  {firm.logoImg ? (
                    <div className={`pf-logo-mini pf-logo-img pf-logo-${firm.id} ${firm.logoListImg ? 'pf-logo-shot' : ''}`} style={{background: firm.logoBg}}>
                      <img src={firm.logoListImg || firm.logoImg} alt={firm.name}/>
                    </div>
                  ) : (
                    <div className="pf-logo-mini" style={{
                      background: `linear-gradient(160deg, var(--${firm.accent}) 0%, color-mix(in oklab, var(--${firm.accent}) 60%, black) 100%)`,
                      color: '#050505'
                    }}>{firm.logo}</div>
                  )}
                  <div className="pf-cell-firm-text">
                    <div className="pf-firm-name">{firm.name}</div>
                    <div className="pf-firm-fav"><Icon name="heart" size={11}/> {firm.favCount.toLocaleString('ro-RO')}</div>
                  </div>
                </div>

                {/* Rating */}
                <div className="pf-cell pf-cell-rating">
                  <div className="pf-rating-score">{firm.trustpilotScore.toFixed(1)}</div>
                  <div className="pf-rating-meta">
                    <StarRating score={firm.trustpilotScore} size={11}/>
                    <span className="pf-rating-count">{firm.totalReviews.toLocaleString('ro-RO')} review-uri</span>
                  </div>
                </div>

                {/* Country */}
                <div className="pf-cell pf-cell-country" data-label="ȚARĂ">
                  <span className="pf-flag">{firm.countryFlag}</span>
                  <span>{firm.country}</span>
                </div>

                {/* Years */}
                <div className="pf-cell pf-cell-years" data-label="ANI">
                  <div className="pf-years-circle">{firm.yearsInOp}</div>
                </div>

                {/* Assets */}
                <div className="pf-cell pf-cell-assets" data-label="ASSETS">
                  <span className="pf-pill">{firm.assets[0]}</span>
                </div>

                {/* Platforms */}
                <div className="pf-cell pf-cell-platforms" data-label="PLATFORME">
                  <div className="pf-platform-dots">
                    {firm.platforms.slice(0, 3).map((p, idx) => (
                      <span key={idx} className="pf-platform-dot" title={p}>{p[0]}</span>
                    ))}
                    {firm.platformCount > 3 && <span className="pf-platform-more">+{firm.platformCount - 3}</span>}
                  </div>
                </div>

                {/* Max allocation */}
                <div className="pf-cell pf-cell-max" data-label="MAX">
                  <div className="pf-max-value">{firm.maxAllocation}</div>
                  <div className="pf-max-bar"><span style={{width: `${Math.min(100, firm.yearsInOp * 18 + 20)}%`}}/></div>
                </div>

                {/* Promo */}
                <div className="pf-cell pf-cell-promo" data-label="PROMO">
                  <PromoBadge
                    discount={firm.promoDiscount}
                    code={firm.promoCode}
                    actionLabel={firm.promoActionLabel}
                    url={firm.affiliateUrl}
                    size="sm"
                  />
                </div>

                {/* Action */}
                <div className="pf-cell pf-cell-action">
                  <button className="pf-firm-btn" onClick={(e) => {
                    e.stopPropagation();
                    openExternalUrl(firm.affiliateUrl);
                    sessionStorage.setItem('pf-scroll-target', 'firm-rules');
                    onNavDetail(firm.id);
                  }}>
                    Firm <Icon name="arrow" size={14}/>
                  </button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="card card-pad-lg" style={{
          background: 'rgba(255,90,90,0.04)',
          borderColor: 'rgba(255,90,90,0.18)',
          display: 'flex', gap: 18, alignItems: 'flex-start'
        }}>
          <IconChip icon="warn" color="acid" />
          <div>
            <h4 style={{color: '#FF8585'}}>Disclaimer</h4>
            <p style={{marginTop: 8, fontSize: 14}}>
              Trading-ul și prop firm-urile implică risc. Informațiile de pe acest site sunt strict educaționale și nu reprezintă sfat financiar. Codurile de discount sunt afiliate — folosindu-le, susții comunitatea fără cost adițional pentru tine. Verifică întotdeauna regulile actualizate direct pe site-ul firmei.
            </p>
          </div>
        </div>
      </div>
    </section>

    <PropFirmsStyles/>
  </>
);

// ============================================================
// DETAIL PAGE — pagină dedicată per firmă
// ============================================================

const DETAIL_TABS = [
  { id: 'overview',   label: 'Overview',   icon: 'layout' },
  { id: 'challenges', label: 'Challenges', icon: 'target' },
  { id: 'offers',     label: 'Offers',     icon: 'flame' },
  { id: 'payouts',    label: 'Payouts',    icon: 'coin' },
  { id: 'video',      label: 'Video Rules', icon: 'video' },
];

// Master list of all possible sections. Each section is only shown if
// the firm actually has data for it (see PfOverviewTab below).
const SIDE_NAV_SECTIONS = [
  { id: 'firm-overview',     label: 'Firm Overview',     key: 'aiSummary'             },
  { id: 'instruments',       label: 'Instrumente & Active', key: 'instrumentsAndAssets' },
  { id: 'account-types',     label: 'Tipuri Conturi',    key: 'accountTypes'          },
  { id: 'evaluation-specs',  label: 'Specs Evaluation',  key: 'evaluationSpecs'       },
  { id: 'pa-rules',          label: 'PA Rules',          key: 'paRules'               },
  { id: 'pa-payouts',        label: 'Cerințe Payout',    key: 'paPayoutsEOD'          },
  { id: 'max-payout',        label: 'Max Payout',        key: 'maxPayoutPerRequest'   },
  { id: 'important-rules',   label: 'Important',         key: 'importantRules'        },
  { id: 'growth-evaluation', label: 'Growth Evaluation', key: 'growthEvaluation'      },
  { id: 'select-evaluation', label: 'Select Evaluation', key: 'selectEvaluation'      },
  { id: 'select-flex',       label: 'Select Flex',       key: 'selectFlex'            },
  { id: 'select-daily',      label: 'Select Daily',      key: 'selectDaily'           },
  { id: 'lightning-funded',  label: 'Lightning Funded',  key: 'lightningFunded'       },
  { id: 'leverage',          label: 'Levier',            key: 'leverage'              },
  { id: 'commissions',       label: 'Comisioane',        key: 'commissions'           },
  { id: 'consistency',       label: 'Reguli Consistență', key: 'consistencyRules'     },
  { id: 'firm-rules',        label: 'Reguli Firmă',      key: 'firmRules'             },
  { id: 'recommendation',    label: 'Recomandare',       key: 'accountRecommendation' },
];

const PropFirmDetailPage = ({ firm, onBack, onNavDetail }) => {
  const [tab, setTab] = React.useState('overview');
  const [activeSection, setActiveSection] = React.useState('firm-overview');
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const contentRef = React.useRef(null);

  const scrollToSection = (id) => {
    setActiveSection(id);
    const el = document.getElementById(`pf-sec-${id}`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  React.useEffect(() => {
    const target = sessionStorage.getItem('pf-scroll-target');
    if (!target) return;
    sessionStorage.removeItem('pf-scroll-target');
    setTab('overview');
    const tryScroll = (attempt = 0) => {
      const el = document.getElementById(`pf-sec-${target}`);
      if (el) {
        setActiveSection(target);
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else if (attempt < 10) {
        setTimeout(() => tryScroll(attempt + 1), 80);
      }
    };
    setTimeout(() => tryScroll(), 120);
  }, [firm.id]);

  const totalReviews = firm.totalReviews;

  return (
    <>
      <section style={{paddingTop: 40, paddingBottom: 20}}>
        <div className="container">
          {/* Top bar */}
          <div className="pf-topbar">
            <button className="pf-back-btn" onClick={onBack}>
              <Icon name="chevLeft" size={16}/>
            </button>
            <div className="pf-firm-picker">
              <button className="pf-firm-pill" onClick={() => setPickerOpen(o => !o)}>
                {firm.logoImg ? (
                  <div className={`pf-logo-mini pf-logo-img pf-logo-${firm.id}`} style={{background: firm.logoBg, width:24, height:24, borderRadius:6}}>
                    <img src={firm.logoImg} alt={firm.name}/>
                  </div>
                ) : (
                  <div className="pf-logo-mini" style={{
                    width:24, height:24, borderRadius:6, fontSize: 9,
                    background: `linear-gradient(160deg, var(--${firm.accent}) 0%, color-mix(in oklab, var(--${firm.accent}) 60%, black) 100%)`,
                    color: '#050505'
                  }}>{firm.logo}</div>
                )}
                <span>{firm.name}</span>
                <Icon name="chevDown" size={14}/>
              </button>
              {pickerOpen && (
                <div className="pf-firm-dropdown">
                  {PROP_FIRMS_DATA.map(f => (
                    <button key={f.id} className={`pf-firm-dropdown-item ${f.id === firm.id ? 'active' : ''}`}
                            onClick={() => { setPickerOpen(false); onNavDetail(f.id); }}>
                      {f.name}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <div className="pf-topbar-actions">
              <Button variant="acid" size="sm" onClick={() => openExternalUrl(firm.affiliateUrl)}>Cumpără</Button>
            </div>
          </div>

          {/* Hero header */}
          <div className="pf-detail-hero">
            <div className="pf-detail-hero-left">
              {firm.logoImg ? (
                <div className={`pf-logo-big pf-logo-img pf-logo-${firm.id}`} style={{background: firm.logoBg}}>
                  <img src={firm.logoImg} alt={firm.name}/>
                </div>
              ) : (
                <div className="pf-logo-big" style={{
                  background: `linear-gradient(160deg, var(--${firm.accent}) 0%, color-mix(in oklab, var(--${firm.accent}) 60%, black) 100%)`,
                  color: '#050505'
                }}>{firm.logo}</div>
              )}
              <div style={{flex:1}}>
                <h1 style={{fontSize: 'clamp(34px, 4.5vw, 52px)', lineHeight: 1.05}}>{firm.name}</h1>
                <div className="pf-fav-row"><Icon name="heart" size={13}/> {firm.favCount.toLocaleString('ro-RO')}</div>
                <div className="pf-stats-grid">
                  <div className="pf-stat">
                    <div className="pf-stat-label">CEO</div>
                    <div className="pf-stat-value">{firm.ceo}</div>
                  </div>
                  <div className="pf-stat">
                    <div className="pf-stat-label">Țară</div>
                    <div className="pf-stat-value"><span style={{marginRight:6}}>{firm.countryFlag}</span>{firm.country}</div>
                  </div>
                  <div className="pf-stat">
                    <div className="pf-stat-label">TrustPilot</div>
                    <div className="pf-stat-value">{firm.trustpilotScore.toFixed(1)}</div>
                  </div>
                  <div className="pf-stat">
                    <div className="pf-stat-label">Data înființării</div>
                    <div className="pf-stat-value">{firm.foundedDate}</div>
                  </div>
                  <div className="pf-stat">
                    <div className="pf-stat-label">Ani operare</div>
                    <div className="pf-stat-value">{firm.yearsInOp}</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="pf-detail-hero-right">
              <div className="pf-big-score">{firm.trustpilotScore.toFixed(1)}</div>
              <StarRating score={firm.trustpilotScore} size={14}/>
              <div className="pf-total-reviews">{totalReviews.toLocaleString('ro-RO')} review-uri totale</div>
              <div className="pf-rating-bars">
                {[5,4,3,2,1].map(stars => {
                  const count = firm.reviewBreakdown[stars] || 0;
                  const pct = totalReviews ? (count / totalReviews) * 100 : 0;
                  return (
                    <div key={stars} className="pf-rating-bar">
                      <span className="pf-rating-bar-label">{stars}<Icon name="star" size={10} style={{color:'var(--gold)'}}/></span>
                      <div className="pf-rating-bar-track">
                        <div className="pf-rating-bar-fill" style={{width: `${pct}%`}}/>
                      </div>
                      <span className="pf-rating-bar-count">{count.toLocaleString('ro-RO')}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Promo banner */}
          <div className={`pf-promo-banner card card-pad-lg ${firm.promoCode ? `eborder ${firm.accent}` : ''}`}>
            <div className="pf-promo-banner-left">
              <div className="pf-promo-eyebrow">
                <Icon name="flame" size={14}/>
                <span>{firm.promoCode ? 'OFERTĂ NOUĂ' : 'OFERTE SEZONIERE'}</span>
              </div>
              <div className="pf-promo-banner-discount">{firm.promoDiscount}</div>
              <div className="pf-promo-banner-desc">{firm.promoDescription}</div>
            </div>
            <div className="pf-promo-banner-right">
              {firm.logoImg ? (
                <div className={`pf-logo-mini pf-logo-img pf-logo-${firm.id}`} style={{background: firm.logoBg, width:48, height:48, borderRadius:12}}>
                  <img src={firm.logoImg} alt={firm.name}/>
                </div>
              ) : (
                <div className="pf-logo-mini" style={{
                  width:48, height:48, borderRadius:12, fontSize: 13,
                  background: `linear-gradient(160deg, var(--${firm.accent}) 0%, color-mix(in oklab, var(--${firm.accent}) 60%, black) 100%)`,
                  color: '#050505'
                }}>{firm.logo}</div>
              )}
              <PromoBadge
                discount={firm.promoCode ? `Cod: ${firm.promoCode}` : firm.promoDiscount}
                code={firm.promoCode}
                actionLabel={firm.promoActionLabel}
                url={firm.affiliateUrl}
                size="lg"
              />
            </div>
          </div>

          {/* Tabs */}
          <div className="pf-tabs-wrap">
            <div className="member-tabs pf-tabs">
              {DETAIL_TABS.filter(t => t.id !== 'video' || firm.videoRules).map(t => {
                const badge = (
                  t.id === 'challenges' ? firm.challenges.length :
                  t.id === 'reviews'    ? firm.reviews.length :
                  t.id === 'offers'     ? (firm.promoCode || firm.affiliateUrl ? 1 : 0) :
                  null
                );
                return (
                  <button key={t.id}
                    className={`member-tab ${tab === t.id ? 'active' : ''}`}
                    onClick={() => setTab(t.id)}>
                    <Icon name={t.icon} size={14}/>
                    <span>{t.label}</span>
                    {badge ? <span className="member-tab-badge">{badge}</span> : null}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Tab content */}
          <div className="pf-tab-content" ref={contentRef}>
            {tab === 'overview' && <PfOverviewTab firm={firm} activeSection={activeSection} onSectionClick={scrollToSection}/>}
            {tab === 'challenges' && <PfChallengesTab firm={firm}/>}
            {tab === 'reviews' && <PfReviewsTab firm={firm}/>}
            {tab === 'offers' && <PfOffersTab firm={firm}/>}
            {tab === 'payouts' && <PfPayoutsTab firm={firm}/>}
            {tab === 'video'   && <PfVideoTab    firm={firm}/>}
          </div>
        </div>
      </section>

      <PropFirmsStyles/>
    </>
  );
};

// ============================================================
// TABS — sub-components
// ============================================================

const PfOverviewTab = ({ firm, activeSection, onSectionClick }) => {
  // Only show side-nav entries that the firm actually has data for.
  const visibleNav = SIDE_NAV_SECTIONS.filter(s => {
    const v = firm[s.key];
    if (Array.isArray(v)) return v.length > 0;
    return !!v;
  });

  return (
    <div className="pf-overview-grid">
      <aside className="pf-side-nav">
        <div className="pf-side-nav-title">Detalii Firmă</div>
        {visibleNav.map(s => (
          <button key={s.id}
            className={`pf-side-nav-item ${activeSection === s.id ? 'active' : ''}`}
            onClick={() => onSectionClick(s.id)}>
            <span className="pf-side-nav-bar"/>
            <span>{s.label}</span>
          </button>
        ))}
      </aside>

      <div className="pf-overview-content">
        {/* AI Summary */}
        {firm.aiSummary && (
          <div id="pf-sec-firm-overview" className={`card card-pad-lg eborder ${firm.accent} pf-ai-card`}>
            <div className="pf-ai-badge">
              <Icon name="sparkle" size={12}/>
              <span>{firm.name.toUpperCase()} · PREZENTARE</span>
            </div>
            <h3 style={{marginTop: 16}}>{firm.name} — Prezentare</h3>
            <p style={{marginTop: 12, lineHeight: 1.7, color: 'var(--text-dim)'}}>{firm.aiSummary}</p>
            {firm.overviewKeyPoints?.length > 0 && (
              <ul className="pf-list-items" style={{marginTop: 18}}>
                {firm.overviewKeyPoints.map((p, i) => (
                  <li key={i}><Icon name="check" size={13} style={{color: `var(--${firm.accent})`}}/><span>{p}</span></li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Instruments */}
        {firm.instrumentsAndAssets?.length > 0 && (
          <div id="pf-sec-instruments" className="card card-pad-lg">
            <h3>Instrumente și Active</h3>
            <ul className="pf-list-items">
              {firm.instrumentsAndAssets.map((item, i) => (
                <li key={i}><Icon name="check" size={13} style={{color: `var(--${firm.accent})`}}/><span>{item}</span></li>
              ))}
            </ul>
          </div>
        )}

        {/* Account Types — side-by-side cards (Apex) */}
        {firm.accountTypes?.length > 0 && (
          <div id="pf-sec-account-types" className="pf-acct-grid">
            {firm.accountTypes.map((at, i) => (
              <div key={i} className={`card card-pad-lg eborder ${at.accent || firm.accent} pf-acct-card`}>
                {at.badge && <span className={`tag ${at.accent || firm.accent} pf-acct-badge`}>{at.badge}</span>}
                <h3 style={{marginTop: 14}}>{at.title}</h3>
                <ul className="pf-list-items" style={{marginTop: 14}}>
                  {at.bullets.map((b, j) => (
                    <li key={j}><Icon name="check" size={13} style={{color: `var(--${at.accent || firm.accent})`}}/><span>{b}</span></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        )}

        {/* Evaluation Specs — premium comparison table (Apex) */}
        {firm.evaluationSpecs && (
          <div id="pf-sec-evaluation-specs" className="card card-pad-lg">
            <h3>{firm.evaluationSpecs.title}</h3>
            <div className="pf-spec-table-scroll" style={{marginTop: 16}}>
              <table className="pf-spec-table">
                <colgroup>
                  <col className="pf-spec-col-label"/>
                  {firm.evaluationSpecs.columns.map((c, i) => <col key={i} className="pf-spec-col-val"/>)}
                </colgroup>
                <thead>
                  <tr>
                    <th className="pf-spec-table-corner">Regulă</th>
                    {firm.evaluationSpecs.columns.map(c => (
                      <th key={c} className="pf-spec-table-h">{c}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {firm.evaluationSpecs.rows.map((row, i) => (
                    <tr key={i}>
                      <th className="pf-spec-table-row-label" scope="row">{row.label}</th>
                      {row.values.map((v, j) => (
                        <td key={j} className="pf-spec-table-cell">{v}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {firm.evaluationSpecs.note && (
              <div className="pf-spec-table-note">{firm.evaluationSpecs.note}</div>
            )}
          </div>
        )}

        {/* PA Rules — 4 small cards (Apex) */}
        {firm.paRules?.length > 0 && (
          <div id="pf-sec-pa-rules" className="card card-pad-lg">
            <h3>Performance Account — Reguli</h3>
            <div className="pf-rule-grid" style={{marginTop: 16}}>
              {firm.paRules.map((r, i) => (
                <div key={i} className="pf-rule-card">
                  <div className="pf-rule-icon"><Icon name="shield" size={14}/></div>
                  <div className="pf-rule-title">{r.title}</div>
                  <div className="pf-rule-text">{r.text}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* PA Payouts — EOD + Intraday tables (Apex) */}
        {(firm.paPayoutsEOD || firm.paPayoutsIntraday) && (
          <div id="pf-sec-pa-payouts" className="card card-pad-lg">
            <h3>Cerințe pentru Payout</h3>
            {[firm.paPayoutsEOD, firm.paPayoutsIntraday].filter(Boolean).map((t, idx) => (
              <div key={idx} style={{marginTop: 18}}>
                <div className="pf-spec-table-heading">
                  <span className={`pf-matrix-dot pf-matrix-dot-${firm.accent}`}/>
                  {t.title}
                </div>
                <div className="pf-spec-table-scroll">
                  <table className="pf-spec-table">
                    <thead>
                      <tr>
                        {t.columns.map((c, i) => (
                          <th key={i} className="pf-spec-table-h">{c}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {t.rows.map((row, i) => (
                        <tr key={i}>
                          {row.map((v, j) => (
                            <td key={j} className={j === 0 ? 'pf-spec-table-row-label' : 'pf-spec-table-cell'}>{v}</td>
                          ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Max Payout Per Request — collapsible accordion (Apex) */}
        {firm.maxPayoutPerRequest && (
          <PfMaxPayoutAccordion firm={firm} />
        )}

        {/* Important Rules — 4 warning cards (Apex) */}
        {firm.importantRules?.length > 0 && (
          <div id="pf-sec-important-rules" className="card card-pad-lg">
            <h3>Reguli Importante</h3>
            <div className="pf-rule-grid" style={{marginTop: 16}}>
              {firm.importantRules.map((r, i) => (
                <div key={i} className="pf-rule-card pf-rule-warning">
                  <div className="pf-rule-icon pf-rule-icon-warn"><Icon name="warn" size={14}/></div>
                  <div className="pf-rule-title">{r.title}</div>
                  <div className="pf-rule-text">{r.text}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Growth Evaluation */}
        {firm.growthEvaluation && (
          <div id="pf-sec-growth-evaluation" className="card card-pad-lg">
            <h3>Growth Evaluation</h3>
            <p style={{marginTop: 10, lineHeight: 1.65, color: 'var(--text-dim)'}}>{firm.growthEvaluation.description}</p>
            <div className="pf-spec-grid">
              {firm.growthEvaluation.sizes.map((s) => (
                <div key={s.size} className="pf-spec-card">
                  <div className="pf-spec-title">{s.size}</div>
                  <div className="pf-spec-row"><span>Profit Target</span><b>{s.profitTarget}</b></div>
                  <div className="pf-spec-row"><span>Daily Loss Limit</span><b>{s.dailyLossLimit}</b></div>
                  <div className="pf-spec-row"><span>Trailing Drawdown</span><b>{s.trailingDrawdown}</b></div>
                  <div className="pf-spec-row"><span>Max Contracts</span><b>{s.maxContracts}</b></div>
                </div>
              ))}
            </div>
            {firm.growthEvaluation.notes?.length > 0 && (
              <ul className="pf-list-items" style={{marginTop: 18}}>
                {firm.growthEvaluation.notes.map((n, i) => (
                  <li key={i}><Icon name="info" size={13} style={{color: `var(--${firm.accent})`}}/><span>{n}</span></li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Select Evaluation */}
        {firm.selectEvaluation && (
          <div id="pf-sec-select-evaluation" className="card card-pad-lg">
            <h3>Select Evaluation</h3>
            <p style={{marginTop: 10, lineHeight: 1.65, color: 'var(--text-dim)'}}>{firm.selectEvaluation.description}</p>
            <ul className="pf-list-items" style={{marginTop: 14}}>
              {firm.selectEvaluation.keyPoints.map((p, i) => (
                <li key={i}><Icon name="check" size={13} style={{color: `var(--${firm.accent})`}}/><span>{p}</span></li>
              ))}
            </ul>
          </div>
        )}

        {/* Select Flex */}
        {firm.selectFlex && (
          <div id="pf-sec-select-flex" className="card card-pad-lg">
            <h3>{firm.selectFlex.title || 'Select Flex'}</h3>
            <p style={{marginTop: 10, lineHeight: 1.65, color: 'var(--text-dim)'}}>{firm.selectFlex.description}</p>
            <div className="pf-spec-grid">
              {firm.selectFlex.sizes.map((s) => (
                <div key={s.size} className="pf-spec-card">
                  <div className="pf-spec-title">{s.size}</div>
                  <div className="pf-spec-row"><span>Max Drawdown</span><b>{s.maxDrawdown}</b></div>
                  <div className="pf-spec-row"><span>Daily Loss Limit</span><b>{s.dailyLossLimit}</b></div>
                  <div className="pf-spec-row"><span>Starting Contracts</span><b>{s.startingContracts}</b></div>
                  <div className="pf-spec-row"><span>Max Contracts</span><b>{s.maxContracts}</b></div>
                  <div className="pf-spec-row"><span>Min Winning Day</span><b>{s.minWinningDay}</b></div>
                </div>
              ))}
            </div>
            {firm.selectFlex.payoutRules?.length > 0 && (
              <ul className="pf-list-items" style={{marginTop: 18}}>
                {firm.selectFlex.payoutRules.map((r, i) => (
                  <li key={i}><Icon name="coin" size={13} style={{color: `var(--${firm.accent})`}}/><span>{r}</span></li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Select Daily */}
        {firm.selectDaily && (
          <div id="pf-sec-select-daily" className="card card-pad-lg">
            <h3>{firm.selectDaily.title || 'Select Daily'}</h3>
            <p style={{marginTop: 10, lineHeight: 1.65, color: 'var(--text-dim)'}}>{firm.selectDaily.description}</p>
            <div className="pf-spec-grid">
              {firm.selectDaily.sizes.map((s) => (
                <div key={s.size} className="pf-spec-card">
                  <div className="pf-spec-title">{s.size}</div>
                  <div className="pf-spec-row"><span>Max Drawdown</span><b>{s.maxDrawdown}</b></div>
                  <div className="pf-spec-row"><span>Daily Loss Limit</span><b>{s.dailyLossLimit}</b></div>
                  <div className="pf-spec-row"><span>Buffer necesar</span><b>{s.bufferNeeded}</b></div>
                  <div className="pf-spec-row"><span>Max Daily Payout</span><b>{s.maxDailyPayout}</b></div>
                </div>
              ))}
            </div>
            {firm.selectDaily.payoutRules?.length > 0 && (
              <ul className="pf-list-items" style={{marginTop: 18}}>
                {firm.selectDaily.payoutRules.map((r, i) => (
                  <li key={i}><Icon name="coin" size={13} style={{color: `var(--${firm.accent})`}}/><span>{r}</span></li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Lightning Funded */}
        {firm.lightningFunded && (
          <div id="pf-sec-lightning-funded" className="card card-pad-lg">
            <h3>{firm.lightningFunded.title || 'Lightning Funded'}</h3>
            {firm.lightningFunded.description && (
              <p style={{marginTop: 10, lineHeight: 1.65, color: 'var(--text-dim)'}}>{firm.lightningFunded.description}</p>
            )}
            {firm.lightningFunded.profitGoals?.length > 0 && (
              <div className="pf-spec-grid">
                {firm.lightningFunded.profitGoals.map((p) => (
                  <div key={p.account} className="pf-spec-card">
                    <div className="pf-spec-title">{p.account}</div>
                    <div className="pf-spec-row"><span>Payout 1 — Profit Goal</span><b>{p.first}</b></div>
                    <div className="pf-spec-row"><span>Payout 2+ — Profit Goal</span><b>{p.subsequent}</b></div>
                  </div>
                ))}
              </div>
            )}
            {firm.lightningFunded.consistencySteps?.length > 0 && (
              <>
                <div className="pf-subhead">Consistency</div>
                <ul className="pf-list-items">
                  {firm.lightningFunded.consistencySteps.map((c, i) => (
                    <li key={i}><Icon name="shield" size={13} style={{color: `var(--${firm.accent})`}}/><span>{c}</span></li>
                  ))}
                </ul>
              </>
            )}
            {firm.lightningFunded.notes?.length > 0 && (
              <ul className="pf-list-items" style={{marginTop: 14}}>
                {firm.lightningFunded.notes.map((n, i) => (
                  <li key={i}><Icon name="info" size={13} style={{color: `var(--${firm.accent})`}}/><span>{n}</span></li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Leverage */}
        {firm.leverage && (
          <div id="pf-sec-leverage" className="card card-pad-lg">
            <h3>Levier</h3>
            <p style={{marginTop: 12, lineHeight: 1.6, color: 'var(--text-dim)'}}>{firm.leverage}</p>
          </div>
        )}

        {/* Commissions */}
        {firm.commissions?.length > 0 && (
          <div id="pf-sec-commissions" className="card card-pad-lg">
            <h3>Comisioane</h3>
            <ul className="pf-list-items">
              {firm.commissions.map((item, i) => (
                <li key={i}><Icon name="check" size={13} style={{color: `var(--${firm.accent})`}}/><span>{item}</span></li>
              ))}
            </ul>
          </div>
        )}

        {/* Consistency */}
        {firm.consistencyRules?.length > 0 && (
          <div id="pf-sec-consistency" className="card card-pad-lg">
            <h3>Reguli de Consistență</h3>
            <ul className="pf-list-items">
              {firm.consistencyRules.map((item, i) => (
                <li key={i}><Icon name="shield" size={13} style={{color: `var(--${firm.accent})`}}/><span>{item}</span></li>
              ))}
            </ul>
          </div>
        )}

        {/* Firm rules */}
        {firm.firmRules?.length > 0 && (
          <div id="pf-sec-firm-rules" className="card card-pad-lg">
            <h3>Reguli Firmă</h3>
            <ul className="pf-list-items">
              {firm.firmRules.map((item, i) => (
                <li key={i}><Icon name="info" size={13} style={{color: `var(--${firm.accent})`}}/><span>{item}</span></li>
              ))}
            </ul>
          </div>
        )}

        {/* Recommendation */}
        {firm.accountRecommendation?.length > 0 && (
          <div id="pf-sec-recommendation" className={`card card-pad-lg eborder ${firm.accent}`}>
            <h3>Ce cont se potrivește cel mai bine?</h3>
            <div className="pf-rec-list">
              {firm.accountRecommendation.map((r, i) => (
                <div key={i} className="pf-rec-item">
                  <div className="pf-rec-name">{r.name}</div>
                  <div className="pf-rec-desc">{r.desc}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Disclaimer (Apex) */}
        {firm.disclaimer && (
          <div className="pf-disclaimer">
            <Icon name="info" size={13}/>
            <span>{firm.disclaimer}</span>
          </div>
        )}
      </div>
    </div>
  );
};

// Max Payout Per Request — accordion with two sub-tables (EOD + Intraday)
const PfMaxPayoutAccordion = ({ firm }) => {
  const [open, setOpen] = React.useState(false);
  const mp = firm.maxPayoutPerRequest;
  if (!mp) return null;
  return (
    <div id="pf-sec-max-payout" className={`card card-pad-lg pf-acc-card ${open ? 'is-open' : ''}`}>
      <button className="pf-acc-head" onClick={() => setOpen(o => !o)}>
        <div>
          <h3 style={{margin: 0}}>{mp.title}</h3>
          <p style={{marginTop: 6, fontSize: 13, color: 'var(--text-mute)'}}>
            Click pentru a vedea tabelele complete EOD & Intraday.
          </p>
        </div>
        <Icon name={open ? 'chevDown' : 'chevRight'} size={18}/>
      </button>
      {open && (
        <div className="pf-acc-body">
          {mp.sections.map((sec, idx) => (
            <div key={idx} style={{marginTop: idx === 0 ? 6 : 18}}>
              <div className="pf-spec-table-heading">
                <span className={`pf-matrix-dot pf-matrix-dot-${firm.accent}`}/>
                {sec.heading}
              </div>
              <div className="pf-spec-table-scroll">
                <table className="pf-spec-table">
                  <thead>
                    <tr>
                      {sec.columns.map((c, i) => (
                        <th key={i} className="pf-spec-table-h">{c}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {sec.rows.map((row, i) => (
                      <tr key={i}>
                        {row.map((v, j) => (
                          <td key={j} className={j === 0 ? 'pf-spec-table-row-label' : 'pf-spec-table-cell'}>{v}</td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const PfMatrixTable = ({ firm, section }) => (
  <div className="pf-matrix-scroll">
    <table className="pf-matrix">
      <colgroup>
        <col className="pf-matrix-col-label"/>
        {section.sizes.map((s, i) => <col key={i} className="pf-matrix-col-size"/>)}
      </colgroup>
      <thead>
        <tr>
          <th className="pf-matrix-corner">Account Type</th>
          {section.sizes.map(s => (
            <th key={s} className="pf-matrix-h">
              <span className="pf-matrix-h-val">${s}</span>
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {section.rows.map(row => (
          <tr key={row.type}>
            <th className="pf-matrix-row-label" scope="row">
              <span className="pf-matrix-row-inner">
                <span className={`pf-matrix-dot pf-matrix-dot-${firm.accent}`}/>
                {row.type}
              </span>
            </th>
            {row.cells.map((c, i) => (
              <td key={i} className="pf-matrix-cell">
                <span className="pf-matrix-cell-inner">
                  <span className="pf-matrix-old">{c.old}</span>
                  <span className="pf-matrix-arrow">→</span>
                  <span className="pf-matrix-new">{c.current}</span>
                </span>
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const PfChallengesTab = ({ firm }) => {
  const pm = firm.pricingMatrix;
  const sections = pm?.sections || (pm?.rows ? [{ sizes: pm.sizes, rows: pm.rows }] : null);

  if (pm && sections) {
    return (
      <div>
        <div className="pf-challenges-head">
          <div>
            <h3 style={{marginBottom: 8}}>{pm.title}</h3>
            <p style={{color: 'var(--text-dim)'}}>
              Codul <span style={{color:'var(--acid)', fontFamily:'JetBrains Mono, monospace', fontWeight:700}}>{firm.promoCode || '—'}</span> trebuie aplicat la checkout.
            </p>
          </div>
          <Button variant="acid" size="sm" onClick={() => openExternalUrl(firm.affiliateUrl)}>
            Cumpără →
          </Button>
        </div>

        {sections.map((section, idx) => (
          <div key={idx} className="pf-matrix-card card card-pad-lg" style={{marginTop: 18}}>
            {section.heading && (
              <div className="pf-matrix-heading">
                <span className={`pf-matrix-dot pf-matrix-dot-${firm.accent}`}/>
                {section.heading}
              </div>
            )}
            <PfMatrixTable firm={firm} section={section} />
            {idx === sections.length - 1 && pm.note && <div className="pf-matrix-note">{pm.note}</div>}
          </div>
        ))}
      </div>
    );
  }

  // Fallback for firms without a matrix (Apex, FundedNext etc.) — keep the
  // existing card grid intact.
  return (
    <div>
      <h3 style={{marginBottom: 8}}>Challenges</h3>
      <p style={{color: 'var(--text-dim)', marginBottom: 24}}>Prețuri actualizate cu reducerea activă aplicată. Codul <span style={{color:'var(--acid)', fontFamily:'JetBrains Mono, monospace', fontWeight:700}}>{firm.promoCode || '—'}</span> trebuie aplicat la checkout.</p>
      {firm.challenges.length === 0 ? (
        <div className="card card-pad-lg" style={{textAlign:'center', color: 'var(--text-mute)'}}>
          Această firmă nu folosește un model de tip challenge — tradezi direct cu capital propriu.
        </div>
      ) : (
        <div className="pf-challenges-grid">
          {firm.challenges.map((c, i) => (
            <div key={i} className="pf-challenge-card">
              <div className="pf-challenge-name">{c.name}</div>
              <div className="pf-challenge-prices">
                <span className="pf-challenge-price">{c.price}</span>
                {c.originalPrice && <span className="pf-challenge-orig">{c.originalPrice}</span>}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============================================================
// VIDEO RULES TAB — embedded YouTube explainer (Tradeify, etc.)
// ============================================================
const PfVideoTab = ({ firm }) => {
  if (!firm.videoRules) return (
    <div className="card card-pad-lg" style={{textAlign:'center', color: 'var(--text-mute)'}}>
      Niciun video disponibil pentru această firmă.
    </div>
  );
  const v = firm.videoRules;
  const embedUrl = v.videoId ? `https://www.youtube.com/embed/${v.videoId}?rel=0` : v.url;
  return (
    <div>
      <div className="pf-challenges-head">
        <div>
          <h3 style={{marginBottom: 8}}>{v.title}</h3>
          <p style={{color: 'var(--text-dim)', maxWidth: 640}}>{v.description}</p>
        </div>
        <Button variant="ghost" size="sm" onClick={() => openExternalUrl(v.url)}>
          Watch on YouTube →
        </Button>
      </div>
      <div className={`pf-video-card card card-pad-lg eborder ${firm.accent}`} style={{marginTop: 18}}>
        <div className="pf-video-wrap">
          <iframe
            src={embedUrl}
            title={`${firm.name} — Video Rules`}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            loading="lazy"
          />
        </div>
      </div>
    </div>
  );
};

const PfReviewsTab = ({ firm }) => (
  <div>
    <div className="pf-reviews-head">
      <div>
        <div style={{fontSize: 42, fontWeight: 700}}>{firm.trustpilotScore.toFixed(1)}</div>
        <StarRating score={firm.trustpilotScore} size={14}/>
        <div style={{color:'var(--text-mute)', fontSize: 13, marginTop: 6}}>{firm.totalReviews.toLocaleString('ro-RO')} review-uri pe TrustPilot</div>
      </div>
      {firm.trustpilotUrl && (
        <Button variant="ghost" size="sm" onClick={() => openExternalUrl(firm.trustpilotUrl)}>
          Vezi toate pe TrustPilot →
        </Button>
      )}
    </div>
    <div className="pf-reviews-grid">
      {firm.reviews.map((r, i) => (
        <div key={i} className="card pf-review-card">
          <div className="row" style={{gap: 12, alignItems: 'center'}}>
            <div className="feed-avatar" style={{background: `var(--${firm.accent}-glow)`, color: `var(--${firm.accent})`}}>
              {r.initials}
            </div>
            <div style={{flex:1}}>
              <div style={{display:'flex', alignItems:'center', gap: 8}}>
                <div style={{fontWeight: 600, fontSize: 14}}>{r.author}</div>
                {r.verified && <span className="pf-verified"><Icon name="check" size={10}/>verified</span>}
              </div>
              <div style={{fontSize: 12, color: 'var(--text-mute)'}}>{r.date}</div>
            </div>
            <StarRating score={r.rating} size={13}/>
          </div>
          <p style={{marginTop: 14, fontSize: 14, lineHeight: 1.6, color: 'var(--text-dim)'}}>"{r.text}"</p>
        </div>
      ))}
    </div>
  </div>
);

const PfOffersTab = ({ firm }) => (
  <div>
    <h3 style={{marginBottom: 8}}>Oferte active</h3>
    <p style={{color: 'var(--text-dim)', marginBottom: 24}}>Reduceri verificate la momentul publicării. Copiază codul și folosește-l la checkout pe site-ul firmei.</p>
    <div className={`card card-pad-lg ${firm.promoCode ? `eborder ${firm.accent}` : ''}`}>
      <div className="pf-offer-row">
        <div className="pf-offer-info">
          <div className="pf-promo-eyebrow"><Icon name="flame" size={14}/><span>OFERTĂ ACTIVĂ</span></div>
          <div className="pf-promo-banner-discount" style={{marginTop: 10}}>{firm.promoDiscount}</div>
          <div className="pf-promo-banner-desc" style={{marginTop: 8}}>{firm.promoDescription}</div>
        </div>
        <PromoBadge
          discount={firm.promoCode ? `Cod: ${firm.promoCode}` : firm.promoDiscount}
          code={firm.promoCode}
          actionLabel={firm.promoActionLabel}
          url={firm.affiliateUrl}
          size="lg"
        />
      </div>
    </div>
  </div>
);

const PfPayoutsTab = ({ firm }) => {
  const pt = firm.payoutTiers;
  const lf = firm.lightningFunded;
  return (
    <div>
      {/* Payout Tiers */}
      <div className="card card-pad-lg">
        <h3>{pt.title}</h3>
        <p style={{color: 'var(--text-dim)', marginTop: 8}}>{pt.intro}</p>

        {pt.minimums && (
          <div style={{marginTop: 24}}>
            <div className="pf-sub-title">Sume minime per payout</div>
            <div className="pf-payout-mins">
              {pt.minimums.map(m => (
                <div key={m.account} className="pf-payout-min">
                  <div className="pf-payout-min-acc">{m.account}</div>
                  <div className="pf-payout-min-val">{m.value}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {pt.maxByTier && (
          <div style={{marginTop: 28}}>
            <div className="pf-sub-title">Maxim per payout pe tier</div>
            <div className="pf-payout-tiers">
              {pt.maxByTier.map(row => (
                <div key={row.tier} className="pf-payout-tier">
                  <div className="pf-payout-tier-name">{row.tier}</div>
                  <div className="pf-payout-tier-accs">
                    {Object.entries(row.accounts).map(([acc, val]) => (
                      <div key={acc} className="pf-payout-tier-acc">
                        <span className="pf-payout-tier-acc-label">{acc}</span>
                        <span className="pf-payout-tier-acc-val">{val}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            {pt.footnote && <div style={{marginTop: 16, color: 'var(--text-mute)', fontSize: 13}}>{pt.footnote}</div>}
          </div>
        )}

        {pt.rows && (
          <div className="pf-payout-rows" style={{marginTop: 24}}>
            {pt.rows.map(r => (
              <div key={r.label} className="pf-payout-row">
                <div className="pf-payout-row-label">{r.label}</div>
                <div className="pf-payout-row-value">{r.value}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Lightning Funded */}
      {lf && (
        <div className={`card card-pad-lg eborder ${firm.accent}`} style={{marginTop: 24}}>
          <h3>{lf.title}</h3>

          <div style={{marginTop: 20}}>
            <div className="pf-sub-title">Profit Split</div>
            <div className="pf-profit-split">{lf.profitSplit}</div>
          </div>

          <div style={{marginTop: 24}}>
            <div className="pf-sub-title">Cerințe Payout</div>
            <ul className="pf-list-items">
              <li><Icon name="shield" size={13} style={{color: `var(--${firm.accent})`}}/><span><b>Regula de consistență:</b> {lf.consistencyRule}</span></li>
              <li><Icon name="clock" size={13} style={{color: `var(--${firm.accent})`}}/><span><b>Zile minime de trading:</b> {lf.minDaysTraded}</span></li>
            </ul>
          </div>

          <div style={{marginTop: 24}}>
            <div className="pf-sub-title">Obiective de Profit (pe cont)</div>
            <div className="pf-profit-goals">
              {lf.profitGoals.map(g => (
                <div key={g.account} className="pf-profit-goal">
                  <div className="pf-profit-goal-acc">Cont {g.account}</div>
                  <div className="pf-profit-goal-row"><span>1st Payout</span><b>{g.first}</b></div>
                  <div className="pf-profit-goal-row"><span>2nd+ Payouts</span><b>{g.subsequent}</b></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ============================================================
// ROOT — alege list vs detail în funcție de firmId
// ============================================================

const PropFirmsPage = ({ onNav, firmId }) => {
  const navDetail = (id) => {
    window.location.hash = `propfirms/${id}`;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const navBack = () => {
    window.location.hash = 'propfirms';
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  if (firmId) {
    const firm = PROP_FIRMS_DATA.find(f => f.id === firmId);
    if (!firm) {
      return (
        <section style={{paddingTop: 120, paddingBottom: 80}}>
          <div className="container" style={{textAlign:'center'}}>
            <h2>Firmă negăsită</h2>
            <p style={{color:'var(--text-mute)', marginTop: 12}}>Codul firmei nu există în lista noastră.</p>
            <div style={{marginTop: 24}}>
              <Button variant="acid" size="md" onClick={navBack}>← Înapoi la lista de firme</Button>
            </div>
          </div>
        </section>
      );
    }
    return <PropFirmDetailPage firm={firm} onBack={navBack} onNavDetail={navDetail}/>;
  }
  return <PropFirmsListPage onNavDetail={navDetail}/>;
};

// ============================================================
// STYLES — în <style> tag, montat o singură dată per pagină
// ============================================================

const PropFirmsStyles = () => (
  <style>{`
    /* ========== LIST VIEW ========== */
    .pf-list-container { max-width: 1780px; padding-left: 60px; padding-right: 60px; }
    @media (max-width: 1100px) { .pf-list-container { padding-left: 28px; padding-right: 28px; } }
    @media (max-width: 720px)  { .pf-list-container { padding-left: 20px; padding-right: 20px; } }
    .pf-list {
      border-radius: var(--r-card-lg);
      border: 1px solid var(--line-2);
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.008) 100%);
      box-shadow: 0 28px 70px rgba(0,0,0,0.4);
    }
    .pf-list-head, .pf-row {
      display: grid;
      grid-template-columns: 3.55fr 1.25fr 0.68fr 0.48fr 0.78fr 0.92fr 1fr 2.05fr 0.72fr;
      gap: 16px;
      padding: 22px 28px;
      align-items: center;
    }
    .pf-list-head {
      background: rgba(0,0,0,0.45);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-mute);
      border-bottom: 1px solid var(--line);
    }
    .pf-row {
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      position: relative;
    }
    .pf-row:last-child { border-bottom: none; }
    .pf-row:hover { background: rgba(255,255,255,0.025); }
    .pf-row-featured { background: linear-gradient(90deg, rgba(183,255,26,0.03), transparent 60%); }
    .pf-row-featured-acid:hover { background: linear-gradient(90deg, rgba(183,255,26,0.06), rgba(255,255,255,0.02) 60%); }
    .pf-row-featured-cyan { background: linear-gradient(90deg, rgba(79,231,213,0.03), transparent 60%); }
    .pf-row-featured-cyan:hover { background: linear-gradient(90deg, rgba(79,231,213,0.06), rgba(255,255,255,0.02) 60%); }

    .pf-cell { font-size: 14px; color: var(--text-dim); min-width: 0; }
    .pf-cell-firm { display: flex; align-items: center; gap: 10px; color: var(--text); }
    .pf-rank-num {
      width: 25px; height: 25px; border-radius: 50%;
      display: grid; place-items: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px; font-weight: 800;
      color: var(--text);
      background: #211921;
      border: 2px solid rgba(236,72,153,0.78);
      box-shadow: inset 0 0 0 2px #0d0d0f, 0 0 0 1px rgba(255,255,255,0.08);
      flex-shrink: 0;
    }
    .pf-rank-badge {
      width: 32px; height: 32px; border-radius: 9px;
      display: grid; place-items: center;
      background: linear-gradient(160deg, var(--acid) 0%, color-mix(in oklab, var(--acid) 50%, black) 100%);
      color: #050505;
      box-shadow: 0 6px 16px rgba(183,255,26,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
      flex-shrink: 0;
    }
    .pf-rank-cyan { background: linear-gradient(160deg, var(--cyan) 0%, color-mix(in oklab, var(--cyan) 50%, black) 100%); box-shadow: 0 6px 16px rgba(79,231,213,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
    .pf-rank-blue { background: linear-gradient(160deg, var(--blue) 0%, color-mix(in oklab, var(--blue) 50%, black) 100%); box-shadow: 0 6px 16px rgba(90,200,255,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
    .pf-rank-gold { background: linear-gradient(160deg, var(--gold) 0%, color-mix(in oklab, var(--gold) 50%, black) 100%); box-shadow: 0 6px 16px rgba(255,203,82,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }

    .pf-logo-mini {
      width: 56px; height: 56px; border-radius: 10px;
      display: grid; place-items: center;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 800; font-size: 13px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
      flex-shrink: 0;
      overflow: hidden;
    }
    .pf-logo-mini.pf-logo-img {
      padding: 6px;
      border: 1px solid rgba(255,255,255,0.26);
      box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.88),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 8px 18px rgba(0,0,0,0.45);
    }
    .pf-logo-mini.pf-logo-img img {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
    }
    .pf-cell-firm .pf-logo-shot {
      padding: 0;
      border: none;
      box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    }
    .pf-cell-firm .pf-logo-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pf-logo-apex.pf-logo-img {
      padding: 0 !important;
      background: #000 !important;
    }
    .pf-logo-apex.pf-logo-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pf-logo-fundednext.pf-logo-img,
    .pf-logo-fnmarkets.pf-logo-img {
      padding: 0 !important;
      background: #000 !important;
      border: 1px solid rgba(255,255,255,0.26);
      box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.88),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 8px 18px rgba(0,0,0,0.45);
    }
    .pf-logo-fundednext.pf-logo-img img,
    .pf-logo-fnmarkets.pf-logo-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pf-logo-big.pf-logo-apex,
    .pf-logo-big.pf-logo-fundednext,
    .pf-logo-big.pf-logo-fnmarkets {
      width: 110px;
      height: 110px;
      border-radius: 22px;
    }
    .pf-firm-pill .pf-logo-mini.pf-logo-img { padding: 2px; }
    .pf-cell-firm .pf-logo-tradeify { padding: 2px; }

    .pf-cell-firm-text { min-width: 0; }
    .pf-firm-name { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.18; white-space: nowrap; }
    .pf-firm-fav {
      font-size: 12px; color: #ff5b2f;
      display: flex; align-items: center; gap: 5px;
      margin-top: 8px;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 500;
    }
    .pf-firm-fav svg { color: #ff5b2f; stroke-width: 1.8; }

    .pf-cell-rating { display: flex; align-items: center; gap: 14px; }
    .pf-rating-score { font-size: 24px; font-weight: 700; color: var(--text); }
    .pf-rating-meta { display: flex; flex-direction: column; gap: 2px; }
    .pf-rating-count { font-size: 11px; color: var(--text-mute); }

    .pf-cell-country { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
    .pf-flag { font-size: 18px; line-height: 1; }

    .pf-years-circle {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid rgba(244,63,94,0.45);
      display: grid; place-items: center;
      font-size: 13px; font-weight: 700;
      color: var(--text);
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4);
    }

    .pf-pill {
      display: inline-block;
      padding: 5px 12px;
      border-radius: var(--r-pill);
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line);
      font-size: 12px;
      color: var(--text-dim);
    }

    .pf-platform-dots { display: flex; align-items: center; gap: 6px; }
    .pf-platform-dot {
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
      display: grid; place-items: center;
      font-size: 11px; font-weight: 600;
      color: var(--text-dim);
    }
    .pf-platform-more {
      font-size: 11px; color: var(--rose); margin-left: 2px; font-weight: 600;
    }

    .pf-cell-max .pf-max-value {
      display: inline-flex; align-items: center; gap: 8px;
      font-weight: 700; color: var(--text); font-size: 15px;
    }
    .pf-cell-max .pf-max-value::before {
      content: '';
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--rose);
      box-shadow: 0 0 10px var(--rose-glow), 0 0 2px var(--rose);
      flex-shrink: 0;
    }
    .pf-max-bar {
      margin-top: 8px; height: 5px; border-radius: 4px;
      background: rgba(244, 63, 94, 0.08); overflow: hidden;
    }
    .pf-max-bar span {
      display: block; height: 100%;
      background: linear-gradient(90deg, var(--rose) 0%, #FF8095 55%, #FFB37A 100%);
      box-shadow: 0 0 10px rgba(244, 63, 94, 0.35);
    }

    .pf-cell-action { text-align: right; }
    .pf-firm-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 16px; border-radius: var(--r-pill);
      background: transparent; border: 1px solid var(--line-2);
      color: var(--text); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
      transition: all 0.2s;
    }
    .pf-firm-btn:hover { border-color: var(--acid); background: rgba(183,255,26,0.06); color: var(--acid); }

    /* ========== PROMO BUTTON (stil Apply for Elite) ========== */
    .pf-promo-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      border: none; font: inherit; cursor: pointer;
      border-radius: var(--r-pill);
      background: linear-gradient(180deg, #C8FF35 0%, #A8F00B 100%);
      color: #050505;
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 0 14px rgba(183,255,26,0.22), 0 0 36px rgba(183,255,26,0.14);
      position: relative;
      transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.22s, background 0.2s;
      white-space: nowrap;
    }
    .pf-promo-btn::before {
      content: ''; position: absolute; inset: -10px;
      border-radius: inherit;
      background: radial-gradient(ellipse at center, rgba(183,255,26,0.28), transparent 70%);
      filter: blur(12px);
      z-index: -1;
      pointer-events: none;
    }
    .pf-promo-btn:hover {
      transform: translateY(-2px) scale(1.02);
      background: linear-gradient(180deg, #DCFF55 0%, #B7FF1A 100%);
      box-shadow: 0 0 22px rgba(183,255,26,0.38), 0 0 52px rgba(183,255,26,0.22);
    }
    .pf-promo-btn:hover::before { background: radial-gradient(ellipse at center, rgba(183,255,26,0.45), transparent 70%); }
    .pf-promo-btn-sm { font-size: 10px; padding: 7px 10px; gap: 7px; }
    .pf-promo-btn-lg { font-size: 14px; padding: 12px 18px; }
    .pf-promo-btn-lg::before { inset: -14px; }
    .pf-promo-btn-disabled {
      background: rgba(255,255,255,0.04);
      color: var(--text-mute);
      box-shadow: none;
      border: 1px dashed var(--line);
      font-weight: 500;
      cursor: default;
    }
    .pf-promo-btn-disabled::before { display: none; }
    .pf-promo-discount { white-space: nowrap; }
    .pf-promo-sep { width: 1px; height: 12px; background: rgba(0,0,0,0.4); display: inline-block; }
    .pf-promo-btn-lg .pf-promo-sep { height: 16px; }
    .pf-promo-code { font-family: 'JetBrains Mono', monospace; font-weight: 800; white-space: nowrap; }
    .pf-promo-icon { display: flex; align-items: center; margin-left: 2px; }

    /* ========== DETAIL PAGE — top bar ========== */
    .pf-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .pf-back-btn {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid var(--line-2); background: rgba(255,255,255,0.03);
      display: grid; place-items: center;
      cursor: pointer; color: var(--text);
      transition: all 0.2s;
    }
    .pf-back-btn:hover { border-color: var(--acid); color: var(--acid); }
    .pf-firm-picker { position: relative; }
    .pf-firm-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 14px 8px 8px; border-radius: var(--r-pill);
      background: rgba(255,255,255,0.04); border: 1px solid var(--line);
      cursor: pointer; font: inherit; color: var(--text); font-size: 14px; font-weight: 600;
      transition: border-color 0.2s;
    }
    .pf-firm-pill:hover { border-color: var(--line-2); }
    .pf-firm-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0;
      background: #0c0c0c; border: 1px solid var(--line-2);
      border-radius: 14px; padding: 6px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6);
      z-index: 20; min-width: 220px;
    }
    .pf-firm-dropdown-item {
      display: block; width: 100%; text-align: left;
      padding: 10px 14px; border-radius: 8px;
      background: transparent; border: none; cursor: pointer;
      color: var(--text-dim); font: inherit; font-size: 13px;
      transition: all 0.15s;
    }
    .pf-firm-dropdown-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
    .pf-firm-dropdown-item.active { color: var(--acid); background: rgba(183,255,26,0.06); }
    .pf-topbar-actions { margin-left: auto; display: flex; gap: 10px; }

    /* ========== DETAIL — hero header ========== */
    .pf-detail-hero {
      margin-top: 36px;
      display: grid; grid-template-columns: 1fr 360px;
      gap: 36px;
      padding: 36px;
      border-radius: var(--r-card-lg);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.008) 100%);
    }
    .pf-detail-hero-left { display: flex; gap: 24px; }
    .pf-logo-big {
      width: 180px; height: 110px; border-radius: 22px;
      display: grid; place-items: center;
      font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 22px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
      flex-shrink: 0; overflow: hidden;
      padding: 14px 22px;
    }
    .pf-logo-big.pf-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .pf-fav-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-mute); font-size: 13px; }
    .pf-fav-row svg { color: var(--rose); }
    .pf-stats-grid {
      margin-top: 22px;
      display: grid; grid-template-columns: repeat(5, auto);
      gap: 28px;
      align-items: flex-start;
    }
    .pf-stat-label { font-size: 11px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; }
    .pf-stat-value { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 4px; }

    .pf-detail-hero-right { display: flex; flex-direction: column; gap: 10px; }
    .pf-big-score { font-size: 44px; font-weight: 800; line-height: 1; }
    .pf-total-reviews { font-size: 12px; color: var(--text-mute); margin-bottom: 8px; }
    .pf-rating-bars { display: flex; flex-direction: column; gap: 6px; }
    .pf-rating-bar { display: grid; grid-template-columns: 32px 1fr 56px; gap: 10px; align-items: center; font-size: 11px; color: var(--text-mute); }
    .pf-rating-bar-label { display: flex; align-items: center; gap: 3px; color: var(--text); font-weight: 600; }
    .pf-rating-bar-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
    .pf-rating-bar-fill { height: 100%; background: linear-gradient(90deg, var(--rose) 0%, #FF8095 60%, #FFB37A 100%); }
    .pf-rating-bar-count { text-align: right; }

    /* ========== DETAIL — promo banner ========== */
    .pf-promo-banner {
      margin-top: 24px;
      display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .pf-promo-banner-left { flex: 1; min-width: 240px; }
    .pf-promo-banner-right { display: flex; align-items: center; gap: 18px; }
    .pf-promo-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px;
      border-radius: var(--r-pill);
      background: linear-gradient(90deg, rgba(244,63,94,0.18), rgba(139,92,246,0.18));
      border: 1px solid rgba(244,63,94,0.3);
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      color: #ff8095;
    }
    .pf-promo-banner-discount {
      margin-top: 14px;
      font-size: 36px; font-weight: 800;
      background: linear-gradient(180deg, #DCFF7A 0%, #B7FF1A 60%, #8FE000 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 0 20px rgba(183,255,26,0.25));
    }
    .pf-promo-banner-desc { margin-top: 10px; font-size: 13px; color: var(--text-dim); max-width: 460px; }

    /* ========== DETAIL — tabs ========== */
    .pf-tabs-wrap { margin-top: 32px; overflow-x: auto; }

    .member-tabs.pf-tabs {
      display: flex; gap: 6px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--line);
      width: fit-content;
    }
    .pf-tabs .member-tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      background: transparent; border: none;
      color: var(--text-dim);
      font: inherit; font-size: 13px; font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    .pf-tabs .member-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
    .pf-tabs .member-tab.active { color: #050505; background: var(--acid); box-shadow: 0 6px 20px rgba(183,255,26,0.3); }
    .pf-tabs .member-tab-badge {
      font-size: 10px; padding: 2px 7px;
      background: var(--bg); color: var(--acid);
      border-radius: 999px; font-weight: 700;
    }
    .pf-tabs .member-tab.active .member-tab-badge { background: rgba(0,0,0,0.2); color: #050505; }

    .pf-tab-content { margin-top: 28px; padding-bottom: 40px; }

    /* ========== OVERVIEW — sidebar + content ========== */
    .pf-overview-grid { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: flex-start; }
    .pf-side-nav {
      position: sticky; top: 100px;
      padding: 14px; border-radius: var(--r-card);
      background: rgba(255,255,255,0.02); border: 1px solid var(--line);
    }
    .pf-side-nav-title {
      font-size: 11px; color: var(--text-mute); letter-spacing: 0.14em;
      text-transform: uppercase; padding: 8px 10px 14px;
    }
    .pf-side-nav-item {
      display: flex; align-items: center; gap: 12px;
      width: 100%; text-align: left;
      padding: 10px 12px; border-radius: 8px;
      background: transparent; border: none;
      font: inherit; font-size: 13px; color: var(--text-dim);
      cursor: pointer; transition: all 0.2s;
    }
    .pf-side-nav-item:hover { color: var(--text); background: rgba(255,255,255,0.03); }
    .pf-side-nav-item.active { color: var(--acid); background: rgba(183,255,26,0.05); }
    .pf-side-nav-bar { width: 3px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.1); flex-shrink: 0; transition: background 0.2s; }
    .pf-side-nav-item.active .pf-side-nav-bar { background: var(--acid); }

    .pf-overview-content { display: flex; flex-direction: column; gap: 20px; }
    .pf-ai-card { position: relative; }
    .pf-ai-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px;
      border-radius: var(--r-pill);
      background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(183,255,26,0.18));
      border: 1px solid rgba(139,92,246,0.3);
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      color: #c9b7ff;
    }

    .pf-list-items { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
    .pf-list-items li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
    .pf-list-items li svg { margin-top: 4px; flex-shrink: 0; }

    /* Evaluation / Funded program spec cards (sizes side-by-side) */
    .pf-spec-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 18px;
    }
    .pf-spec-card {
      padding: 16px 18px;
      border-radius: 14px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      display: flex; flex-direction: column;
      transition: border-color 0.2s, background 0.2s;
    }
    .pf-spec-card:hover { border-color: var(--line-2); background: rgba(255,255,255,0.04); }
    .pf-spec-title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      letter-spacing: 0.12em;
      color: var(--acid);
      font-weight: 700;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed var(--line);
    }
    .pf-spec-row {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 12px;
      padding: 5px 0;
      font-size: 12.5px;
      line-height: 1.4;
    }
    .pf-spec-row span { color: var(--text-mute); }
    .pf-spec-row b { color: var(--text); font-weight: 600; }

    .pf-subhead {
      margin-top: 22px;
      margin-bottom: -4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-mute);
    }

    /* ===== Account Types (Apex EOD vs Intraday) ===== */
    .pf-acct-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 760px) { .pf-acct-grid { grid-template-columns: 1fr; } }
    .pf-acct-card { position: relative; }
    .pf-acct-badge {
      display: inline-block !important;
      font-size: 10.5px !important;
      letter-spacing: 0.14em;
      padding: 4px 10px !important;
    }

    /* ===== Specs comparison table (Apex Evaluation Specs etc.) ===== */
    .pf-matrix-heading,
    .pf-spec-table-heading {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 12px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line);
    }
    .pf-spec-table-scroll { width: 100%; overflow-x: auto; }
    .pf-spec-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 4px;
      table-layout: fixed;
      min-width: 640px;
    }
    .pf-spec-table col.pf-spec-col-label { width: 32%; }
    .pf-spec-table col.pf-spec-col-val   { width: 17%; }
    .pf-spec-table th, .pf-spec-table td {
      padding: 11px 14px;
      text-align: center;
      vertical-align: middle;
      border-radius: 10px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      font-size: 13px;
      transition: background 0.2s, border-color 0.2s;
    }
    .pf-spec-table-corner {
      background: transparent !important;
      border: none !important;
      text-align: left !important;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--text-mute);
    }
    .pf-spec-table-h {
      background: rgba(183,255,26,0.05) !important;
      border-color: rgba(183,255,26,0.22) !important;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700; letter-spacing: 0.08em;
      color: var(--text);
    }
    .pf-spec-table-row-label {
      text-align: left !important;
      font-weight: 600;
      color: var(--text);
      background: rgba(255,255,255,0.015) !important;
    }
    .pf-spec-table-cell { color: var(--text); }
    .pf-spec-table tr:hover td.pf-spec-table-cell {
      background: rgba(183,255,26,0.03);
      border-color: rgba(183,255,26,0.20);
    }
    .pf-spec-table-note {
      margin-top: 14px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(255,255,255,0.10);
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.6;
    }

    /* ===== Rule cards grid (PA Rules / Important Rules) ===== */
    .pf-rule-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }
    .pf-rule-card {
      padding: 16px 18px;
      border-radius: 14px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      display: flex; flex-direction: column; gap: 8px;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .pf-rule-card:hover {
      border-color: var(--line-2);
      background: rgba(255,255,255,0.04);
      box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    }
    .pf-rule-icon {
      width: 30px; height: 30px;
      border-radius: 9px;
      display: grid; place-items: center;
      background: rgba(183,255,26,0.10);
      border: 1px solid rgba(183,255,26,0.28);
      color: var(--acid);
    }
    .pf-rule-icon-warn {
      background: rgba(255,90,90,0.08);
      border-color: rgba(255,90,90,0.28);
      color: #ff9090;
    }
    .pf-rule-warning { border-color: rgba(255,90,90,0.18); }
    .pf-rule-warning:hover { border-color: rgba(255,90,90,0.35); box-shadow: 0 12px 30px rgba(255,90,90,0.06); }
    .pf-rule-title { font-weight: 700; font-size: 14px; color: var(--text); }
    .pf-rule-text  { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

    /* ===== Accordion (Max Payout per cerere) ===== */
    .pf-acc-card { padding: 0 !important; }
    .pf-acc-head {
      width: 100%;
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px;
      padding: 22px 26px;
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
      color: var(--text);
      font: inherit;
    }
    .pf-acc-head h3 { font-size: 18px; }
    .pf-acc-head svg { transition: transform 0.25s ease; color: var(--text-mute); }
    .pf-acc-card.is-open .pf-acc-head svg { transform: rotate(90deg); color: var(--acid); }
    .pf-acc-body {
      padding: 0 26px 24px;
    }

    /* ===== Disclaimer at end of overview ===== */
    .pf-disclaimer {
      margin-top: 24px;
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(255,255,255,0.10);
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--text-mute);
    }
    .pf-disclaimer svg { flex-shrink: 0; margin-top: 2px; color: var(--text-mute); }

    .pf-rec-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
    .pf-rec-item {
      padding: 14px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border-left: 2px solid var(--acid);
    }
    .pf-rec-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 4px;
    }
    .pf-rec-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

    /* ========== CHALLENGES ========== */
    /* Tabs head row — title + action button on the right */
    .pf-challenges-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 18px; flex-wrap: wrap;
    }

    /* ========== PRICING COMPARISON MATRIX ========== */
    .pf-matrix-card { padding: 8px !important; }
    .pf-matrix-scroll { width: 100%; overflow-x: auto; }
    .pf-matrix {
      width: 100%;
      border-collapse: separate;
      border-spacing: 6px;
      table-layout: fixed; /* equal columns so $25K aligns over its cell */
      min-width: 640px;
    }
    /* First column (Account Type label) — narrower, fixed width.
       Remaining columns are equal width, filling the rest. */
    .pf-matrix col.pf-matrix-col-label { width: 22%; }
    .pf-matrix col.pf-matrix-col-size  { width: 19.5%; }

    .pf-matrix th, .pf-matrix td {
      padding: 14px 12px;
      text-align: center;
      vertical-align: middle;
      border-radius: 12px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      transition: border-color 0.2s, background 0.2s;
    }
    .pf-matrix-corner {
      background: transparent !important;
      border: none !important;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-mute);
      text-align: left !important;
    }
    .pf-matrix-h {
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.12em;
      background: rgba(183,255,26,0.04) !important;
      border-color: rgba(183,255,26,0.22) !important;
    }
    .pf-matrix-h-val { font-weight: 800; font-size: 14px; color: var(--text); }
    .pf-matrix-row-label {
      text-align: left !important;
      font-weight: 700; font-size: 14px;
      background: rgba(255,255,255,0.015) !important;
    }
    /* Inner span handles the flex layout WITHOUT breaking table semantics */
    .pf-matrix-row-inner {
      display: inline-flex; align-items: center; gap: 10px;
    }
    .pf-matrix-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 8px currentColor;
    }
    .pf-matrix-dot-acid { background: var(--acid);  color: var(--acid);  }
    .pf-matrix-dot-cyan { background: var(--cyan);  color: var(--cyan);  }
    .pf-matrix-dot-blue { background: var(--blue);  color: var(--blue);  }
    .pf-matrix-dot-gold { background: var(--gold);  color: var(--gold);  }

    .pf-matrix-cell { cursor: default; }
    .pf-matrix-cell:hover {
      border-color: rgba(183,255,26,0.35) !important;
      background: rgba(183,255,26,0.04) !important;
    }
    .pf-matrix-cell-inner {
      display: inline-flex; align-items: baseline; justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pf-matrix-old {
      font-size: 12.5px;
      color: var(--text-mute);
      text-decoration: line-through;
      text-decoration-color: rgba(255,255,255,0.30);
    }
    .pf-matrix-arrow { color: var(--text-mute); font-size: 11px; }
    .pf-matrix-new {
      font-size: 17px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: -0.01em;
    }
    .pf-matrix-note {
      margin-top: 14px;
      padding: 10px 14px;
      font-size: 12.5px;
      color: var(--text-mute);
      text-align: center;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.04em;
    }
    /* On small screens, the table scrolls horizontally with min-width */
    @media (max-width: 720px) {
      .pf-matrix { min-width: 580px; }
      .pf-matrix th, .pf-matrix td { padding: 12px 8px; }
      .pf-matrix-new { font-size: 15px; }
      .pf-matrix-old { font-size: 11.5px; }
    }

    /* ========== VIDEO RULES TAB ========== */
    .pf-video-card { padding: 12px !important; }
    .pf-video-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 14px;
      overflow: hidden;
      background: #050507;
      box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 30px rgba(183,255,26,0.06);
    }
    .pf-video-wrap iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
    }

    .pf-challenges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .pf-challenge-card {
      padding: 18px;
      border-radius: 14px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--line);
      transition: transform 0.2s, border-color 0.2s;
    }
    .pf-challenge-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
    .pf-challenge-name { font-size: 13px; color: var(--text); font-weight: 600; }
    .pf-challenge-prices { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .pf-challenge-price { font-size: 20px; font-weight: 700; color: var(--acid); }
    .pf-challenge-orig { font-size: 13px; color: var(--text-mute); text-decoration: line-through; }

    /* ========== REVIEWS ========== */
    .pf-reviews-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
    .pf-reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .pf-review-card { padding: 22px; }
    .pf-verified {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 7px; font-size: 10px; font-weight: 600;
      color: var(--cyan); background: rgba(79,231,213,0.1);
      border: 1px solid rgba(79,231,213,0.25);
      border-radius: var(--r-pill);
      letter-spacing: 0.04em;
    }

    /* ========== OFFERS ========== */
    .pf-offer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
    .pf-offer-info { flex: 1; min-width: 240px; }

    /* ========== PAYOUTS ========== */
    .pf-sub-title { font-size: 11px; color: var(--text-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
    .pf-payout-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .pf-payout-min {
      padding: 14px; border-radius: 12px;
      background: rgba(255,255,255,0.025); border: 1px solid var(--line);
      text-align: center;
    }
    .pf-payout-min-acc { font-size: 11px; color: var(--text-mute); letter-spacing: 0.1em; }
    .pf-payout-min-val { margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--text); }

    .pf-payout-tiers { display: flex; flex-direction: column; gap: 12px; }
    .pf-payout-tier {
      padding: 16px;
      border-radius: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line);
      display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center;
    }
    .pf-payout-tier-name { font-weight: 700; font-size: 14px; color: var(--text); }
    .pf-payout-tier-accs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .pf-payout-tier-acc { display: flex; flex-direction: column; gap: 4px; }
    .pf-payout-tier-acc-label { font-size: 10px; letter-spacing: 0.1em; color: var(--text-mute); }
    .pf-payout-tier-acc-val { font-size: 13px; color: var(--text); font-weight: 600; }

    .pf-payout-rows { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
    .pf-payout-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; padding: 14px 18px; background: rgba(12,12,12,0.85); }
    .pf-payout-row-label { color: var(--text-mute); font-size: 13px; }
    .pf-payout-row-value { color: var(--text); font-size: 14px; font-weight: 500; }

    .pf-profit-split {
      display: inline-block;
      padding: 14px 28px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(183,255,26,0.08), rgba(183,255,26,0.02));
      border: 1px solid rgba(183,255,26,0.3);
      font-size: 28px; font-weight: 800; color: var(--acid);
      font-family: 'JetBrains Mono', monospace;
      box-shadow: 0 8px 22px rgba(183,255,26,0.15);
    }

    .pf-profit-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .pf-profit-goal {
      padding: 16px; border-radius: 14px;
      background: rgba(255,255,255,0.025); border: 1px solid var(--line);
    }
    .pf-profit-goal-acc { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .pf-profit-goal-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); padding: 5px 0; }
    .pf-profit-goal-row b { color: var(--acid); font-family: 'JetBrains Mono', monospace; }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 1100px) {
      .pf-list-head { display: none; }
      .pf-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
        padding: 18px;
      }
      .pf-cell-firm { grid-column: 1 / -1; }
      .pf-cell-rating { grid-column: 1 / -1; }
      .pf-cell::before {
        content: attr(data-label);
        display: block; font-size: 10px; color: var(--text-mute);
        letter-spacing: 0.1em; margin-bottom: 4px;
      }
      .pf-cell-firm::before, .pf-cell-rating::before, .pf-cell-action::before { display: none; }
      .pf-cell-action { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
      .pf-firm-btn { width: 100%; justify-content: center; padding: 12px; }

      .pf-detail-hero { grid-template-columns: 1fr; }
      .pf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .pf-overview-grid { grid-template-columns: 1fr; }
      .pf-side-nav { position: static; }
      .pf-challenges-grid { grid-template-columns: repeat(2, 1fr); }
      .pf-reviews-grid { grid-template-columns: 1fr; }
      .pf-payout-mins { grid-template-columns: repeat(2, 1fr); }
      .pf-payout-tier { grid-template-columns: 1fr; }
      .pf-payout-tier-accs { grid-template-columns: repeat(2, 1fr); }
      .pf-profit-goals { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .pf-detail-hero-left { flex-direction: column; }
      .pf-stats-grid { grid-template-columns: 1fr 1fr; }
      .pf-challenges-grid { grid-template-columns: 1fr; }
      .pf-payout-tier-accs { grid-template-columns: 1fr 1fr; }
    }
  `}</style>
);

Object.assign(window, { PropFirmsPage });
