// Shortcuts + Cloud — Cmd+K palette, multi-panel search, cloud expansion

const SectionWrap = window.SectionWrap;
const SectionHead = window.SectionHead;

const CommandPalette = () => (
  <div style={{
    width:'100%',maxWidth:520,margin:'0 auto',
    background:'linear-gradient(180deg, #1a1a1e, #131316)',
    border:'1px solid rgba(255,255,255,0.1)',borderRadius:14,
    boxShadow:'0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset',
    overflow:'hidden'
  }}>
    <div style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:10,borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
      <span style={{color:'#6b655f',fontSize:14}}>⌘K</span>
      <input placeholder="ara: sipariş, ürün, müşteri, mağaza..." readOnly
        style={{flex:1,background:'transparent',border:'none',outline:'none',color:'#e5e1e4',fontSize:14,fontFamily:'Inter'}} />
      <span style={{fontSize:10,fontFamily:'JetBrains Mono',color:'#6b655f',padding:'2px 6px',border:'1px solid rgba(255,255,255,0.1)',borderRadius:4}}>ESC</span>
    </div>
    <div style={{padding:'8px 0'}}>
      {[
        {cat:'SİPARİŞLER', items:[{i:'📦',t:'Trendyol · TY-48291 · M. Yılmaz',k:'↵'},{i:'📦',t:'Shopify · #9024 · A. Kaya',k:''}]},
        {cat:'ÜRÜNLER',    items:[{i:'🏷',t:'T-Shirt Slim Fit · Siyah',k:''},{i:'🏷',t:'Tişört Oversize · Beyaz',k:''}]},
        {cat:'İŞLEMLER',   items:[{i:'⚡',t:'Yeni kural oluştur',k:'⌘R'},{i:'🧾',t:'E-fatura kes',k:'⌘E'},{i:'🌙',t:'Koyu mod',k:'⌘D'}]},
      ].map((g,gi) => (
        <div key={gi}>
          <div style={{padding:'8px 16px 4px',fontSize:10,fontFamily:'JetBrains Mono',color:'#6b655f',letterSpacing:'0.15em'}}>{g.cat}</div>
          {g.items.map((it,i) => (
            <div key={i} style={{
              padding:'8px 16px',display:'flex',alignItems:'center',gap:10,
              background: gi===0 && i===0 ? 'rgba(255,107,0,0.08)' : 'transparent',
              borderLeft: gi===0 && i===0 ? '2px solid #FF6B00' : '2px solid transparent'
            }}>
              <span style={{fontSize:14,width:18,textAlign:'center'}}>{it.i}</span>
              <span style={{flex:1,fontSize:13,color:'#e5e1e4'}}>{it.t}</span>
              {it.k && <span style={{fontSize:10,fontFamily:'JetBrains Mono',color:'#6b655f',padding:'2px 6px',border:'1px solid rgba(255,255,255,0.08)',borderRadius:4}}>{it.k}</span>}
            </div>
          ))}
        </div>
      ))}
    </div>
  </div>
);

const ShortcutsCloudSection = () => {
  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);
  }, []);

  return (
  <SectionWrap id="shortcuts" label="08 Shortcuts & Cloud" padY={isMobile ? 80 : 160}>
    <div style={{maxWidth:1280,margin:'0 auto',padding: isMobile ? '0 16px' : '0 32px'}}>
      <div style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 32 : 80,
        alignItems:'center',
      }}>
        <div style={{textAlign: isMobile ? 'center' : 'left', minWidth: 0}}>
          <SectionHead
            align={isMobile ? 'center' : 'left'}
            eyebrow="hız · kısayol · bulut"
            eyebrowColor="#FF8C33"
            title="Çok hızlı. Her şey için"
            titleAccent="bir kısayol."
            lede="⌘K ile her şeye anında ulaşın — siparişler, ürünler, müşteriler, ayarlar, mağazalar. Çoklu panel araması: 14 mağaza arasında tek sorgu. Depolama ihtiyacı büyüdükçe buluttaki alanı istediğiniz kadar genişletin."
            maxWidth={540}
          />
          <div style={{
            marginTop: isMobile ? 24 : 32,
            display:'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : '1fr 1fr',
            gap: isMobile ? 10 : 12,
            maxWidth: 540,
            marginLeft: isMobile ? 'auto' : 0,
            marginRight: isMobile ? 'auto' : 0,
          }}>
            {[
              {k:'50+', l:'klavye kısayolu'},
              {k:'∞',   l:'çoklu panel araması'},
              {k:'◐',   l:'koyu / açık / sistem modu'},
              {k:'☁',   l:'esnek bulut alanı'},
            ].map((x,i) => (
              <div key={i} style={{
                padding: isMobile ? 12 : 14,
                borderRadius:10,
                background:'rgba(19,19,21,0.5)',
                border:'1px solid rgba(255,255,255,0.06)',
                textAlign: isMobile ? 'center' : 'left',
              }}>
                <div style={{fontFamily:'Manrope',fontSize: isMobile ? 22 : 28,fontWeight:800,color:'#FF8C33',letterSpacing:'-0.03em',marginBottom:4}}>{x.k}</div>
                <div style={{fontSize: isMobile ? 10 : 11,color:'#a98a7d',fontFamily:'JetBrains Mono',letterSpacing:'0.1em',textTransform:'uppercase'}}>{x.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{minWidth: 0}}><CommandPalette /></div>
      </div>
    </div>
  </SectionWrap>
  );
};

window.ShortcutsCloudSection = ShortcutsCloudSection;