// Applications grid + Industries + Why QTG + Team/Global + Insights + Footer + CTA
const ApplicationsSection = () => {
  const apps = [
    // A · Operations & Risk
    {n:'Prop CRM', d:'Trader management, challenge workflows, payouts.', href:'prop-crm.html'},
    {n:'Broker CRM', d:'Client lifecycle, KYC, account workflows.', href:'broker-crm.html'},
    {n:'Risk & Rules Engine', d:'Configurable rules, breach tracking, audit trails.', href:'risk-rules-engine.html'},
    // B · Commercial
    {n:'Checkout System', d:'Branded flows, native upsells, A/B testing.', href:'checkout-system.html'},
    {n:'Payments & Payouts', d:'Provider integrations, approvals, recon.', href:'payments-payouts.html'},
    {n:'Affiliate & IB', d:'Multi-tier partners, attribution, payouts.', href:'affiliate-ib-management.html'},
    {n:'Loyalty Program', d:'Tiered rewards, milestones, retention.', href:'loyalty-program.html'},
    // C · Trader Experience
    {n:'Trader Dashboard', d:'Portals, admin views, reporting.', href:'trader-dashboard.html'},
    {n:'Trading Journal', d:'Performance review, trade analytics.', href:'trading-journal.html'},
    {n:'Trading Competitions', d:'Leaderboards, contests, rewards.', href:'trading-competitions.html'},
    {n:'Copy Trading', d:'Strategy replication with risk settings.', href:'copy-trading.html'},
    {n:'Algo Trading Tools', d:'Strategy build, test, deploy.', href:'algo-trading-tools.html'},
    // D · Data & Intelligence
    {n:'Business Intelligence', d:'Cohorts, funnels, executive views.', href:'business-intelligence.html'},
    {n:'Reports & Analytics', d:'Operational and revenue dashboards.', href:'reports-analytics.html'},
    {n:'AI Agents', d:'Support, onboarding, ops triage, knowledge.', href:'ai-agents.html'},
  ];
  // Scroll-progress indicator (only meaningful when the grid is a swipe rail on mobile).
  const railRef = React.useRef(null);
  const [bar, setBar] = React.useState({ thumb: 28, pos: 0, on: false });
  const measure = React.useCallback(() => {
    const el = railRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    const thumb = Math.max(14, Math.min(100, (el.clientWidth / el.scrollWidth) * 100));
    const pos = max > 0 ? (el.scrollLeft / max) * (100 - thumb) : 0;
    setBar({ thumb, pos, on: max > 4 });
  }, []);
  React.useEffect(() => {
    measure();
    const el = railRef.current;
    if (el) el.addEventListener('scroll', measure, { passive: true });
    window.addEventListener('resize', measure);
    const t = setTimeout(measure, 300); // after fonts/layout settle
    return () => { if (el) el.removeEventListener('scroll', measure); window.removeEventListener('resize', measure); clearTimeout(t); };
  }, [measure]);
  return (
    <section className="section-pad section-light" id="applications">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">COMPONENTS</div>
            <h2 className="mt-4">Functional modules that compose across platforms.</h2>
          </div>
          <p className="lead">
            Pick the modules that match your operation. Each component stands on its own and connects cleanly into the
            QTG environment when you're ready to consolidate.
          </p>
        </div>
        <div ref={railRef} style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:'var(--light-line)', border:'1px solid var(--light-line)', borderRadius:14, overflow:'hidden'}}>
          {apps.map((a,i)=>(
            <div key={i} style={{background:'#fff', padding:'22px 20px', minHeight:140, display:'flex', flexDirection:'column'}}>
              
              <h4 style={{marginTop:14, fontSize:16, letterSpacing:'-0.01em'}}>{a.n}</h4>
              <p style={{marginTop:8, fontSize:13, lineHeight:1.45}}>{a.d}</p>
              <a href={a.href || '#'} style={{marginTop:'auto', paddingTop:14, fontSize:12, color:'var(--light-text)', display:'inline-flex', alignItems:'center', gap:5}}>
                Learn more <ArrowRight/>
              </a>
            </div>
          ))}
        </div>
        <div className={'cmp-scrollbar' + (bar.on ? ' is-on' : '')} aria-hidden="true">
          <div className="cmp-scrollthumb" style={{width: bar.thumb + '%', left: bar.pos + '%'}}/>
        </div>
      </div>
    </section>
  );
};

const IndustriesSection = () => {
  const inds = [
    {n:'Proprietary Trading Firms', d:'From first launch to enterprise scale. CRM, challenges, risk, payouts, support.', href:'industries/prop-trading-firms.html'},
    {n:'Brokers', d:'Client lifecycle, IB networks, integrations, and operational automation across regions.', href:'industries/brokers.html'},
    {n:'Fintech & Trading Platforms', d:'Embedded infrastructure: dashboards, APIs, mobile apps, design systems.', href:'industries/fintech-platforms.html'},
    {n:'Trading Academies & Communities', d:'Engagement layer: competitions, journals, copy, loyalty, affiliate.', href:'industries/academies-communities.html'},
    {n:'Professional Trading Teams', d:'Performance, journaling, analytics, and bespoke trading tools.', href:'industries/professional-teams.html'},
    {n:'Funds & Asset Managers', d:'Custom dashboards, AI automation, reporting infrastructure.', href:'industries/funds-asset-managers.html'},
  ];
  return (
    <section className="section-pad" id="industries" style={{borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num" style={{ color: 'var(--accent)' }}>INDUSTRIES</div>
            <h2 className="mt-4">Built for the operators of modern trading businesses.</h2>
          </div>
          <p className="lead">QTG isn't a generic SaaS layer. Every module exists because operators in this industry asked for it.</p>
        </div>
        <div className="industries-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
          {inds.map((ind,i)=>(
            <a key={i} href={ind.href} className="card" style={{padding:24, display:'flex', flexDirection:'column', textDecoration:'none'}}>
              <h3 style={{fontSize:22}}>{ind.n}</h3>
              <p style={{marginTop:10, fontSize:14}}>{ind.d}</p>
              <span style={{marginTop:'auto', paddingTop:20, fontSize:13, fontWeight:500, color:'var(--accent)', display:'inline-flex', alignItems:'center', gap:6}}>
                Explore Industry <ArrowRight/>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const WhySection = () => (
  <section className="section-pad" id="why" style={{borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
    <div className="container">
      <div className="section-head">
        <div>
          <div className="section-num" style={{ color: 'var(--accent)' }}>WHY QTG</div>
          <h2 className="mt-4">Four reasons serious operators move to QTG.</h2>
        </div>
        <p className="lead">Trading-domain depth, modular architecture, AI built into operations, and a global execution team that ships.</p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:'1px solid var(--line)', borderRadius:14, overflow:'hidden'}}>
        {[
          [<IconChart/>, 'Trading domain knowledge', "We've operated alongside prop firms and brokers since 2022. Every module is informed by real workflow exposure — not feature lists."],
          [<IconStack/>, 'Modular infrastructure', "Adopt one platform today. Plug in the next layer when you're ready. No re-platforming, no rip-and-replace."],
          [<IconChip/>, 'AI inside operations', 'AI scoring inside QuantSentry, automation across support and onboarding, agentic workflows where it makes operational sense.'],
          [<IconNetwork/>, 'Global execution team', 'A distributed engineering and operations team across ten cities and three regions — built for round-the-clock, 24h handoff.'],
        ].map((c,i)=>(
          <div key={i} style={{padding:'26px 26px 24px', borderRight: i<3?'1px solid var(--line)':'none', display:'flex', flexDirection:'column'}}>
            <div style={{color:'var(--accent)', marginBottom:18}}>{c[0]}</div>
            <h4 style={{fontSize:16, letterSpacing:'-0.01em'}}>{c[1]}</h4>
            <p style={{marginTop:10, fontSize:13.5, lineHeight:1.5}}>{c[2]}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const GlobalSection = () => {
  return (
    <section className="section-pad" id="company" data-screen-label="07 Locations" style={{borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div className="section-head" style={{marginBottom:28}}>
          <div>
            <div className="section-num" style={{ color: 'var(--accent)' }}>LOCATIONS</div>
            <h2 className="mt-4">Ten Cities. One Operating Rhythm.</h2>
          </div>
          <p className="lead">
            Ten cities across three regions, with teams positioned close to the markets they serve &mdash; so you work with people in your time zone, not one central desk covering the world.
          </p>
        </div>
        <div className="offices-grid" style={{display:'grid', gridTemplateColumns:'1fr', gap:24}}>
          <GlobalMapPanel />
        </div>
      </div>
    </section>
  );
};

const InsightsSection = ({defaultCat = 'all'}) => {
  const CAT_LABEL = {product:'Product Update', company:'Company News', event:'Event Recap', industry:'Industry Insight'};
  const _pd = function(s){ var m=String(s).match(/(\d{1,2})\D*?([A-Za-z]{3,})\s+(\d{4})/); return m ? (new Date(m[3]+' '+m[2]+' '+m[1]).getTime()||0) : 0; };
  const items = [
    {cat:'company', date:'10 Mar 2026', read:'3 min', author:'QTG Press', image:'assets/stasys-brilis-card.png', title:'Quant Technology Group appoints Stasys Brilis as Chief Business Officer.', desc:'Brilis joins to strengthen operations, partnerships, and global scale across the group’s trading-technology portfolio.', href:'insights/quant-technology-group-appoints-stasys-brilis-as-cbo.html'},
    {cat:'product', date:'10 Feb 2026', read:'5 min', author:'Product · QuantSentry', image:'assets/quantsentry-card.png', title:'QuantSentry is generally available — AI-native risk infrastructure for prop firms of every size.', desc:'A next-generation risk engine that detects coordinated trading abuse, enforces rules in real time, and protects firm capital as account volume scales.', href:'insights/quant-technology-group-launches-quantsentry.html'},
    {cat:'company', date:'01 Oct 2025', read:'5 min', author:'QTG Press', image:'assets/thumb-monevis.svg', title:'Quant Technology Group acquires Monevis technology assets, expanding AI and risk capabilities.', desc:'The acquisition of the Monevis technology will fuel Quant Technology’s growth across our risk products and AI capabilities.', href:'insights/quant-technology-group-acquires-monevis-technology-assets.html'},
    {cat:'company', date:'01 Aug 2025', read:'3 min', author:'QTG Press', image:'assets/quentin-ducrocq-card.png', title:'Quant Technology appoints Quentin Ducrocq Chief Financial Officer.', desc:'Ducrocq joins as CFO to lead financial strategy and operations as the group scales its platform and services businesses.', href:'insights/quant-technology-appoints-quentin-ducrocq-cfo.html'},
    {cat:'company', date:'15 Jul 2025', read:'3 min', author:'QTG Press', image:'assets/marcel-rauscher-card.png', title:'Quant Technology Group names Marcel Rauscher Chief Sales Officer.', desc:'Marcel Rauscher is appointed Chief Sales Officer of YourPropFirm.com, driving global sales strategy and operator partnerships.', href:'insights/quant-technology-group-names-marcel-rauscher-chief-sales-officer.html'},
    {cat:'company', date:'19 Nov 2024', read:'2 min', author:'QTG Press', image:'assets/thumb-ypf-dxtrade.svg', title:'YourPropFirm partners with Devexperts to bring DXtrade into its multi-platform lineup.', desc:'The partnership adds DXtrade alongside Match-Trader — giving prop firms platform choice, operational resilience, and a trading environment their traders already know.', href:'insights/yourpropfirm-partners-with-dxtrade.html'},
    {cat:'industry', date:'05 Jun 2026', read:'7 min', author:'Akash Thakrar', image:'assets/insight-risk-cover.svg', title:'Why Retail Prop Firms Can’t Scale Without Dedicated Risk Management.', desc:'In 2026 risk management became the engine for business and data intelligence — not just fraud detection.', href:'insights/why-prop-firms-need-dedicated-risk-management.html'},
    {cat:'industry', date:'03 Nov 2025', read:'8 min', author:'Markus Sichler', image:'assets/ifx-hk-2025-panel-hq.png', imagePos:'center 30%', title:'Quant Wars & Crypto Moves: The Prop Trading Shake-Up.', desc:'An iFX EXPO Asia panel on APAC growth, algo trading, crypto, payments, fraud — and how prop firms stay competitive.', href:'insights/quant-wars-crypto-moves-prop-trading-shakeup.html'},
    {cat:'industry', date:'20 Jan 2025', read:'6 min', author:'Markus Sichler', image:'assets/ifx-dubai-2025-panel-hq.jpg', title:'Prop Trading’s Next Phase: Building Sustainability Beyond the Hype.', desc:'Aligning trader and firm interests, maturing past the hype, and building prop-firm brands that last.', href:'insights/prop-trading-next-phase-building-sustainability.html'},
    {cat:'industry', date:'12 Feb 2025', read:'7 min', author:'Markus Sichler', image:'assets/ifx-dubai-2025-markus.webp', imagePos:'center 28%', title:'How Prop Firms Really Make Money — an Inside Look at Risk, Data and What Lasts.', desc:'How prop firms actually make money, where the real risks hide, and what separates the traders who last.', href:'insights/how-prop-firms-really-make-money.html'},
    {cat:'industry', date:'28 Apr 2026', read:'8 min', author:'Leonard Breitkopf', image:'assets/insight-fragmented-cover.svg', title:'Why Trading Businesses Are Outgrowing Fragmented Infrastructure.', desc:'Disconnected CRMs, payouts, and risk systems compound into a silent operational tax. What consolidation actually looks like at scale.', href:'insights/outgrowing-fragmented-infrastructure.html'},
    {cat:'industry', date:'21 Apr 2026', read:'7 min', author:'Martin Yi', image:'assets/insight-operating-system-cover.svg', title:'Why Prop Firms Need an Operating System, Not Just a CRM.', desc:'CRM-centric prop firms hit a ceiling. Why a true operating system is the only way to scale without losing control.', href:'insights/prop-firms-need-operating-system-not-crm.html'},
    {cat:'industry', date:'14 Apr 2026', read:'9 min', author:'Milos Mosovsky', image:'assets/insight-ai-agents-cover.svg', title:'How AI Agents Can Reduce Support Workload for Trading Businesses.', desc:'Practical AI agents — not chatbot theatre. Where they slot into ticketing, KYC, payouts, and trader operations.', href:'insights/ai-agents-reduce-support-workload.html'},
    {cat:'industry', date:'07 Apr 2026', read:'6 min', author:'Stasys Brilis', image:'assets/insight-saas-team-cover.svg', title:'SaaS Plus a Dedicated Tech Team: The Best of Both Worlds.', desc:'Why trading companies should not build from zero, and why pure SaaS rarely fits. The hybrid model and how to structure it.', href:'insights/saas-plus-dedicated-tech-team.html'},
    {cat:'industry', date:'31 Mar 2026', read:'10 min', author:'Leonard Breitkopf', image:'assets/insight-risk-infra-cover.svg', title:'What Modern Risk Infrastructure Should Look Like for Prop Firms.', desc:'Drawdown logic, time-of-day rules, overnight exposure, suspicious-activity detection — and why manual risk review does not scale.', href:'insights/modern-risk-infrastructure-prop-firms.html'},
    {cat:'industry', date:'24 Mar 2026', read:'5 min', author:'Marcel Rauscher', image:'assets/insight-loyalty-cover.svg', title:'How Loyalty Programs Can Improve Trader Engagement and Retention.', desc:'Trader retention is a function of infrastructure, not just incentives. How structured loyalty programs shape long-term behavior.', href:'insights/loyalty-programs-trader-engagement-retention.html'},
  ].concat((typeof window !== 'undefined' && Array.isArray(window.PAST) ? window.PAST : []).map(function(e){ return {cat:'event', date:e.date, read:'4 min', author:(e.city + ', ' + e.country), image:e.img, imagePos:e.imgPos, title:e.name, desc:e.summary, href:e.href}; })).sort(function(a,b){ return _pd(b.date) - _pd(a.date); });
  const filters = [
    ['all','All'],
    ['company','Company'],
    ['product','Product'],
    ['industry','Insights'],
    ['event','Events'],
  ];
  const [active, setActive] = React.useState(defaultCat);
  const trackRef = React.useRef(null);
  const visible = items.filter(it => active==='all' || it.cat===active);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('.ins-card');
    const step = card ? card.getBoundingClientRect().width + 16 : 360;
    el.scrollBy({left: dir*step, behavior:'smooth'});
  };

  // Reset scroll on filter change
  React.useEffect(()=>{ if (trackRef.current) trackRef.current.scrollTo({left:0, behavior:'smooth'}); }, [active]);

  return (
    <section className="section-pad" id="insights" style={{borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div className="section-head" style={{marginBottom:18}}>
          <div>
            <div className="section-num" style={{ color: 'var(--accent)' }}>NEWS & INSIGHTS</div>
            <h2 className="mt-4">From the QTG newsroom.</h2>
          </div>
        </div>

        {/* Filter + nav row */}
        <div className="ins-filterbar" style={{
          display:'flex', justifyContent:'space-between', alignItems:'center',
          gap:18, flexWrap:'wrap', marginBottom:24,
          paddingBottom:16, borderBottom:'1px solid var(--line)'
        }}>
          <div className="ins-filters" style={{display:'flex', flexWrap:'wrap', gap:6}}>
            {filters.map(([k,v])=>{
              const isActive = k===active;
              return (
                <button
                  key={k}
                  onClick={()=>setActive(k)}
                  style={{
                    padding:'9px 16px', fontFamily:'var(--font-sans)', fontSize:13.5,
                    letterSpacing:'-0.01em',
                    background: isActive ? 'var(--accent)' : 'transparent',
                    color: isActive ? 'var(--bg)' : 'var(--text-3)',
                    border: `1px solid ${isActive ? 'var(--accent)' : 'var(--line)'}`,
                    borderRadius:'var(--radius-sm)', fontWeight: isActive ? 500 : 400,
                    cursor:'pointer', transition:'color .15s, border-color .15s, background .15s'
                  }}
                >{v}</button>
              );
            })}
          </div>
          <div className="ins-nav" style={{display:'flex', gap:8, alignItems:'center'}}>
            <button onClick={()=>scrollBy(-1)} aria-label="Previous" style={navBtnStyle}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button onClick={()=>scrollBy(1)} aria-label="Next" style={navBtnStyle}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9 6l6 6-6 6"/></svg>
            </button>
          </div>
        </div>

        {/* Slider track */}
        <div style={{position:'relative'}}>
          <div
            ref={trackRef}
            className="ins-track"
            style={{
              display:'flex', gap:16,
              overflowX:'auto', overflowY:'hidden',
              scrollSnapType:'x mandatory',
              padding:'4px 0 12px',
              scrollbarWidth:'none'
            }}
          >
            {visible.length === 0 && (
              <div style={{
                flex:'0 0 100%', minHeight:280,
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'var(--text-3)', fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.1em'
              }}>NO POSTS IN THIS CATEGORY</div>
            )}
            {visible.map((it, i) => (
              <a key={i} href={it.href || 'insights.html'} className="ins-card card" style={{
                flex:'0 0 360px', maxWidth:360,
                padding:0, display:'flex', flexDirection:'column',
                scrollSnapAlign:'start', overflow:'hidden'
              }}>
                <div style={{
                  aspectRatio:'16/10', position:'relative',
                  background:'var(--bg-3)', borderBottom:'1px solid var(--line)', overflow:'hidden'
                }}>
                  <img src={(window.__resources && window.__resources[it.image]) || it.image} alt="" loading="lazy" style={{
                    position:'absolute', inset:0, width:'100%', height:'100%',
                    objectFit:'cover', objectPosition:it.imagePos||'center', display:'block'
                  }}/>
                </div>
                <div style={{padding:'20px 20px 18px', display:'flex', flexDirection:'column', flex:1}}>
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-3)'}}>
                    <span style={{display:'inline-flex', alignItems:'center', gap:7, color:'var(--text-2)'}}>
                      <span style={{width:5, height:5, borderRadius:'50%', background:'var(--accent)', boxShadow:'0 0 0 3px var(--accent-dim)'}}/>
                      {CAT_LABEL[it.cat] || 'News'}
                    </span>
                    <span>{it.date}</span>
                  </div>
                  <h3 style={{marginTop:14, fontSize:18, fontWeight:500, letterSpacing:'-0.018em', lineHeight:1.28, margin:'14px 0 0', color:'var(--text)'}}>{it.title}</h3>
                  <p style={{marginTop:11, fontSize:13.5, lineHeight:1.55, color:'var(--text-2)', display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{it.desc}</p>
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, marginTop:'auto', paddingTop:18, fontFamily:'var(--font-mono)', fontSize:10.5, color:'var(--text-3)', letterSpacing:'0.06em'}}>
                    <InsByline author={it.author} cat={it.cat}/>
                    <span style={{flex:'none'}}>{it.read} read</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>

        {/* See all link */}
        <div style={{marginTop:14, display:'flex', justifyContent:'flex-end'}}>
          <a href="insights.html" className="btn btn-ghost" style={{fontSize:13.5, whiteSpace:'nowrap'}}>All Posts <ArrowRight /></a>
        </div>
      </div>

      <style>{`
        .ins-track::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
};

const navBtnStyle = {
  width:34, height:34, borderRadius:99,
  border:'1px solid var(--line-strong)', background:'transparent',
  color:'var(--text-2)', cursor:'pointer',
  display:'inline-flex', alignItems:'center', justifyContent:'center',
  transition:'all .15s'
};

// Byline icon for the carousel — matches the Insights index & article pages:
// event recaps get a location pin, personal authors get their round headshot,
// and QTG/brand authors get the rounded Q logo.
const INS_AVATARS = {
  'Akash Thakrar': 'assets/team/QTG-Profile-Akash-Thakrar.png',
  'Markus Sichler': 'assets/team/QTG-Profile-Markus-Sichler.png',
  'Leonard Breitkopf': 'assets/team/QTG-Profile-Leonard-Breitkopf.png',
  'Milos Mosovsky': 'assets/team/QTG-Profile-Milos-Mosovsky.png',
  'Marcel Rauscher': 'assets/team/QTG-Profile-Marcel-Rauscher.png',
  'Stasys Brilis': 'assets/team/QTG-Profile-Stasys-Brilis.png',
  'Quentin Ducrocq': 'assets/team/QTG-Profile-Quentin-Ducrocq.png',
};
const InsByline = ({author, cat}) => {
  const resolve = (p) => (typeof window!=='undefined' && window.__resources && window.__resources[p]) || p;
  const isLogo = author && (author.startsWith('Product') || author.startsWith('QTG'));
  const photo = author && INS_AVATARS[author];
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:8, fontFamily:'var(--font-sans)', fontSize:12.5, letterSpacing:'-0.005em', color:'var(--text-2)', minWidth:0, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
      {cat === 'event'
        ? <span aria-hidden="true" style={{flex:'none', display:'inline-flex', color:'var(--accent)'}}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg></span>
        : isLogo
          ? <img src={resolve('assets/qtg-avatar.png')} alt="" loading="lazy" style={{width:20, height:20, borderRadius:6, objectFit:'contain', background:'var(--bg-3)', padding:1, border:'1px solid var(--line-strong)', flex:'none'}}/>
          : (photo && <img src={resolve(photo)} alt="" loading="lazy" style={{width:20, height:20, borderRadius:999, objectFit:'cover', flex:'none'}}/>)}
      <span style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{author}</span>
    </span>
  );
};

const CTASection = () => (
  <section id="contact" style={{padding:'120px 0', borderTop:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
    <div className="cta-glow" style={{position:'absolute', inset:0, background:'radial-gradient(ellipse 60% 80% at 50% 100%, rgba(0,255,255,0.10), transparent 60%)', pointerEvents:'none'}}/>
    <div className="container" style={{position:'relative'}}>
      <div style={{maxWidth:880, margin:'0 auto', textAlign:'center'}}>
        <span className="cta-kicker" style={{display:'inline-flex', alignItems:'center', color:'var(--accent)', padding:'4px 11px', border:'1px solid color-mix(in oklab, var(--accent) 35%, transparent)', background:'color-mix(in oklab, var(--accent) 8%, transparent)', borderRadius:4, fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'0.14em', textTransform:'uppercase', lineHeight:1}}>PARTNER WITH QTG</span>
        <h2 style={{marginTop:18, fontSize:'clamp(36px, 5vw, 66px)'}}>
          Build the Next Generation of Trading Infrastructure with Us.
        </h2>
        <p className="lead" style={{margin:'24px auto 0', textAlign:'center'}}>
          Whether you're launching a Prop Firm, scaling a Broker, or rebuilding a Fintech Platform — QTG can move fast and ship the systems you need.
        </p>
        <div className="hero-ctas" style={{justifyContent:'center', marginTop:36}}>
          <a className="btn btn-primary" href="contact.html">Contact QTG <ArrowRight/></a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => {
  const cols = [
    ['Platforms', [
      ['YourPropFirm','yourpropfirm.html'],
      ['Broker Infrastructure','broker-infrastructure.html'],
      ['QuantSentry','quantsentry.html'],
      ['QuantCX','quantcx.html'],
      ['PropTradeGroup','proptradegroup.html'],
      ['TradoPay','tradopay.html'],
    ]],
    ['Industries', [
      ['Prop Trading Firms','industries/prop-trading-firms.html'],
      ['Brokers','industries/brokers.html'],
      ['Fintech & Trading Platforms','industries/fintech-platforms.html'],
      ['Trading Academies','industries/academies-communities.html'],
      ['Professional Teams','industries/professional-teams.html'],
      ['Funds & Asset Managers','industries/funds-asset-managers.html'],
      ['Liquidity Providers','industries/liquidity-providers.html'],
    ]],
    ['News & Insights', [
      ['Company News','insights.html#company'],
      ['Industry Insights','insights.html#industry'],
      ['Product Updates','insights.html#product'],
      ['Event Recaps','insights.html#event'],
    ]],
    ['Company', [
      ['About QTG','company.html'],
      ['Partners','partners.html'],
      ['Expos & Events','events.html'],
      ['Contact','contact.html'],
    ]],
  ];
  return (
    <footer>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr repeat(4, 1fr)', gap:32, paddingBottom:48}}>
          <div>
            <img src={(window.__resources && window.__resources.logo) || (window.QTG_BASE||'')+"assets/qtg-lockup-white.png"} alt="Quant Technology Group" style={{height:42, display:'block'}} />
            <p style={{marginTop:18, fontSize:13, color:'var(--text-3)', maxWidth:'30ch'}}>
              Modular Trading Infrastructure for Prop Firms, Brokers, and Fintech Platforms.
            </p>
            <div style={{display:'flex', gap:14, marginTop:22, alignItems:'center'}}>
              <a href="https://x.com/quanttechx" target="_blank" rel="noopener noreferrer" aria-label="X" style={{display:'inline-flex', width:32, height:32, alignItems:'center', justifyContent:'center', borderRadius:6, border:'1px solid var(--line)', color:'var(--text-3)', transition:'color .15s, border-color .15s'}} onMouseEnter={e=>{e.currentTarget.style.color='var(--accent)';e.currentTarget.style.borderColor='var(--accent)';}} onMouseLeave={e=>{e.currentTarget.style.color='var(--text-3)';e.currentTarget.style.borderColor='var(--line)';}}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
              </a>
              <a href="https://www.linkedin.com/company/quanttechnologygroup/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" style={{display:'inline-flex', width:32, height:32, alignItems:'center', justifyContent:'center', borderRadius:6, border:'1px solid var(--line)', color:'var(--text-3)', transition:'color .15s, border-color .15s'}} onMouseEnter={e=>{e.currentTarget.style.color='var(--accent)';e.currentTarget.style.borderColor='var(--accent)';}} onMouseLeave={e=>{e.currentTarget.style.color='var(--text-3)';e.currentTarget.style.borderColor='var(--line)';}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
              </a>
              <a href="https://www.instagram.com/quant.technology/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{display:'inline-flex', width:32, height:32, alignItems:'center', justifyContent:'center', borderRadius:6, border:'1px solid var(--line)', color:'var(--text-3)', transition:'color .15s, border-color .15s'}} onMouseEnter={e=>{e.currentTarget.style.color='var(--accent)';e.currentTarget.style.borderColor='var(--accent)';}} onMouseLeave={e=>{e.currentTarget.style.color='var(--text-3)';e.currentTarget.style.borderColor='var(--line)';}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
              </a>
            </div>
          </div>
          {cols.map(([title, items],i)=>(
            <div key={i}>
              <div className="kicker" style={{fontSize:10.5}}>{title}</div>
              <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:14}}>
                {items.map((it,j)=>(<a key={j} href={it[1]} style={{fontSize:13, color:'var(--text-2)'}}>{it[0]}</a>))}
              </div>
            </div>
          ))}
        </div>
        {/* Brand row — HQ · operating in · copyright */}
        <div style={{
          paddingTop:28, borderTop:'1px solid var(--line)',
          display:'grid', gridTemplateColumns:'1fr 1.5fr 1fr', gap:32, alignItems:'flex-start'
        }}>
          {/* Headquarters */}
          <div style={{display:'flex', flexDirection:'column', gap:6, justifyContent:'center'}}>
            <div className="mono" style={{fontSize:10.5, color:'var(--text-3)', letterSpacing:'0.08em'}}>
              QUANT TECHNOLOGY GROUP PTE. LTD.
            </div>
          </div>
          {/* Operating in */}
          <div style={{display:'flex', flexDirection:'column', gap:6, justifyContent:'center', alignItems:'center'}}>
            <div className="mono" style={{fontSize:10.5, color:'var(--text-3)', letterSpacing:'0.08em', display:'inline-flex', alignItems:'center', gap:10, whiteSpace:'nowrap'}}>
              {[['🇸🇬','SG'],['🇭🇰','HK'],['🇮🇩','ID'],['🇬🇧','UK'],['🇦🇪','UAE'],['🇨🇾','CY']].map(([flag,cc],i,arr)=>(
                <span key={cc} style={{display:'inline-flex', alignItems:'center', gap:6}}>
                  <span style={{filter:'saturate(0.75)', fontSize:13, lineHeight:1}} aria-hidden="true">{flag}</span>
                  <span>{cc}</span>
                  {i<arr.length-1 && <span style={{color:'var(--text-4)', opacity:0.5, marginLeft:4}}>/</span>}
                </span>
              ))}
            </div>
          </div>
          {/* Copyright */}
          <div style={{display:'flex', flexDirection:'column', gap:6, alignItems:'flex-end', justifyContent:'center'}}>
            <div className="mono" style={{fontSize:10.5, color:'var(--text-3)', letterSpacing:'0.08em'}}>
              © 2022–2026 ALL RIGHTS RESERVED
            </div>
          </div>
        </div>

        {/* Utility strip — disclaimer (left) + legal links (right) */}
        <div style={{
          marginTop:28, paddingTop:20, borderTop:'1px solid var(--line)',
          display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:32, flexWrap:'wrap'
        }}>
          <div style={{flex:'1 1 540px'}}>
            <p style={{fontSize:11, color:'var(--text-4)', lineHeight:1.6, margin:0, maxWidth:'110ch'}}>
              <span style={{fontWeight:500}}>Disclaimer:</span> Quant Technology Group and its subsidiaries provide software applications and related technology services. Quant Technology Group does not provide investment advice, brokerage services, or any other regulated financial services.
            </p>
          </div>
          <div style={{display:'flex', gap:14, fontSize:12, color:'var(--text-3)', flexShrink:0, paddingTop:1, alignItems:'center'}}>
            <a href="privacy.html">Privacy</a>
            <span style={{color:'var(--text-4)', opacity:0.4}}>·</span>
            <a href="terms.html">Terms</a>
            <span style={{color:'var(--text-4)', opacity:0.4}}>·</span>
            <a href="disclosures.html">Disclosures</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { ApplicationsSection, IndustriesSection, WhySection, GlobalSection, InsightsSection, CTASection, Footer });