// Section: Unified Cockpit — all marketplaces + multiple shops per marketplace

const SectionWrap = window.SectionWrap;
const SectionHead = window.SectionHead;
const GridBG = window.GridBG;
const MarketplaceLogo = window.MarketplaceLogo;

// A single marketplace connection card with N shop chips underneath
const PlatformConnection = ({ logo, name, shopCount, status='live', isMobile=false }) => (
  <div style={{
    background:'linear-gradient(180deg, rgba(28,28,32,0.8), rgba(20,20,24,0.6))',
    border:'1px solid rgba(255,255,255,0.06)',
    borderRadius:14, padding:'14px 14px',
    display:'flex', flexDirection:'column', gap:10,
    backdropFilter:'blur(10px)',
    minWidth: 0,
    overflow: 'hidden',
    position: 'relative',
  }}>
    {/* LIVE badge — position: top-right on Mobile, inline on Desktop */}
    {isMobile ? (
      <div style={{
        position:'absolute', top:10, right:10,
        display:'flex', alignItems:'center', gap:3,
      }}>
        <span style={{width:6,height:6,borderRadius:9999,background:'#34d399',boxShadow:'0 0 6px #34d399',animation:'sp-pulse 1.8s ease-in-out infinite'}} />
        <span style={{fontSize:8,fontFamily:'JetBrains Mono',color:'#34d399',letterSpacing:'0.08em',textTransform:'uppercase',fontWeight:700}}>{status}</span>
      </div>
    ) : null}
    {/* Logo + Name — centered column on Mobile, row on Desktop */}
    <div style={{
      display:'flex',
      flexDirection: isMobile ? 'column' : 'row',
      alignItems:'center',
      gap: isMobile ? 6 : 8,
      minWidth:0,
    }}>
      <div style={{width:28,height:28,borderRadius:7,background:'rgba(255,255,255,0.04)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        <MarketplaceLogo name={logo} size={18} />
      </div>
      <div style={{flex: isMobile ? 'none' : 1, minWidth:0, textAlign: isMobile ? 'center' : 'left'}}>
        <div style={{fontSize:12,fontWeight:700,color:'#e5e1e4',fontFamily:'Space Grotesk',lineHeight:1.15}}>{name}</div>
        <div style={{fontSize:9,color:'#7a7570',fontFamily:'JetBrains Mono',marginTop:2}}>{shopCount} mağaza</div>
      </div>
      {!isMobile && (
        <div style={{display:'flex',alignItems:'center',gap:3,flexShrink:0}}>
          <span style={{width:6,height:6,borderRadius:9999,background:'#34d399',boxShadow:'0 0 6px #34d399',animation:'sp-pulse 1.8s ease-in-out infinite'}} />
          <span style={{fontSize:8,fontFamily:'JetBrains Mono',color:'#34d399',letterSpacing:'0.08em',textTransform:'uppercase',fontWeight:700}}>{status}</span>
        </div>
      )}
    </div>
    <div style={{
      display:'flex', gap:4, flexWrap:'wrap',
      justifyContent: isMobile ? 'center' : 'flex-start',
    }}>
      {Array.from({length: shopCount}).map((_,i) => (
        <div key={i} style={{
          fontSize:9,padding:'2px 7px',borderRadius:6,
          background:'rgba(93,230,255,0.08)',color:'#9ccaff',
          border:'1px solid rgba(93,230,255,0.15)',
          fontFamily:'JetBrains Mono',letterSpacing:'0.02em'
        }}>mağaza {i+1}</div>
      ))}
    </div>
  </div>
);

const UnifiedCockpitSection = () => {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // minmax(0, 1fr) prevents grid items from overflowing when content is too wide
  const gridCols = isMobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, 1fr)';

  return (
  <SectionWrap id="unified" label="03 Unified Cockpit" padY={isMobile ? 80 : 140}>
    <div style={{maxWidth:1280,margin:'0 auto',padding: isMobile ? '0 16px' : '0 32px'}}>
      <SectionHead
        eyebrow="birleşik kokpit"
        eyebrowColor="#5de6ff"
        title="Bütün pazaryerlerinizi"
        titleAccent="tek ekrana sığdırın"
        lede="Her pazaryerinde birden fazla mağaza, ek ücret yok. Siparişler, stoklar, kargolar ve iadeler tek yerden."
      />

      <div style={{
        marginTop: isMobile ? 40 : 72,
        position:'relative',
        padding: isMobile ? 16 : 40,
        borderRadius: isMobile ? 16 : 24,
        background:'linear-gradient(180deg, rgba(28,28,32,0.5), rgba(14,14,16,0.3))',
        border:'1px solid rgba(255,255,255,0.06)',
        overflow:'hidden'
      }}>
        <GridBG />
        <div style={{position:'relative',display:'grid',gridTemplateColumns: gridCols, gap: isMobile ? 10 : 16}}>
          <PlatformConnection logo="trendyol" name="Trendyol" shopCount={3} isMobile={isMobile} />
          <PlatformConnection logo="shopify"  name="Shopify"  shopCount={2} isMobile={isMobile} />
          <PlatformConnection logo="hepsiburada" name="Hepsiburada" shopCount={4} isMobile={isMobile} />
          <PlatformConnection logo="n11" name="n11" shopCount={2} isMobile={isMobile} />
        </div>

        {/* Connection lines to center hub — Desktop: 4-point SVG, Mobile: 2-point vertical lines */}
        <div style={{
          position:'relative',
          marginTop: isMobile ? 48 : 40,
          marginBottom: isMobile ? 28 : 0,
          height: isMobile ? 130 : 120,
          display:'flex',alignItems:'center',justifyContent:'center'
        }}>
          {!isMobile && (
            <svg viewBox="0 0 800 120" style={{position:'absolute',inset:0,width:'100%',height:'100%'}} preserveAspectRatio="none">
              {[100, 300, 500, 700].map((x,i) => (
                <path key={i} d={`M${x} 0 Q ${x} 60 400 60`}
                  stroke="rgba(93,230,255,0.35)" strokeWidth="1.5" fill="none"
                  strokeDasharray="4 4"
                  style={{animation:`sp-dash 2s linear infinite`, animationDelay:`${i*0.15}s`}}
                />
              ))}
            </svg>
          )}
          {isMobile && (
            /* Mobile: simpler 2-path converging flow (left-col + right-col meeting center) */
            <svg viewBox="0 0 400 80" style={{position:'absolute',inset:0,width:'100%',height:'100%'}} preserveAspectRatio="none">
              {[100, 300].map((x,i) => (
                <path key={i} d={`M${x} 0 Q ${x} 40 200 40`}
                  stroke="rgba(93,230,255,0.35)" strokeWidth="1.5" fill="none"
                  strokeDasharray="4 4"
                  style={{animation:`sp-dash 2s linear infinite`, animationDelay:`${i*0.2}s`}}
                />
              ))}
            </svg>
          )}
          <div style={{
            position:'relative',
            padding: isMobile ? '12px 20px' : '16px 28px',
            borderRadius: isMobile ? 12 : 16,
            background:'linear-gradient(135deg, #FF6B00, #FF8C33)',
            boxShadow:'0 0 40px rgba(255,107,0,0.45)',
            fontFamily:'Manrope',
            fontSize: isMobile ? 15 : 18,
            fontWeight:800, color:'#0e0e10',
            letterSpacing:'-0.02em',
            display:'flex',alignItems:'center',gap:10
          }}>
            <span style={{fontSize: isMobile ? 18 : 22}}>◆</span> ShopPanel Kokpit
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns: gridCols, gap: isMobile ? 10 : 16, marginTop:8}}>
          {[
            {k:'sipariş akışı',v:'196/gün',c:'#34d399'},
            {k:'stok senk.',v:'< 2sn',c:'#5de6ff'},
            {k:'ort. onay süresi',v:'8sn',c:'#FF8C33'},
            {k:'iade oranı',v:'%2.1',c:'#a78bfa'},
          ].map((x,i) => (
            <div key={i} style={{
              padding: isMobile ? 12 : 14,
              borderRadius:10,
              background:'rgba(14,14,16,0.6)',
              border:'1px solid rgba(255,255,255,0.05)',
              textAlign: isMobile ? 'center' : 'left',
            }}>
              <div style={{fontSize:10,color:'#7a7570',fontFamily:'JetBrains Mono',textTransform:'uppercase',letterSpacing:'0.15em',marginBottom:6}}>{x.k}</div>
              <div style={{fontFamily:'Manrope', fontSize: isMobile ? 18 : 22, fontWeight:800, color:x.c, letterSpacing:'-0.03em'}}>{x.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </SectionWrap>
  );
};

window.UnifiedCockpitSection = UnifiedCockpitSection;