// Genius AI section — multiple agents, not one chatbot

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

const GeniusAgentCard = ({ icon, name, role, status, metric, color, isMobile = false }) => (
  <div style={{
    position:'relative',
    padding: isMobile ? '14px 14px' : '22px 20px',
    borderRadius: isMobile ? 12 : 16,
    background:'linear-gradient(180deg, rgba(28,28,32,0.85), rgba(18,18,22,0.7))',
    border:`1px solid ${color}22`,
    overflow:'hidden',
    display:'flex',flexDirection:'column',
    gap: isMobile ? 10 : 14,
    minHeight: isMobile ? 180 : 220,
    minWidth: 0,
  }}>
    <div aria-hidden style={{position:'absolute',inset:0,background:`radial-gradient(ellipse 60% 40% at 80% 0%, ${color}18, transparent 60%)`}} />
    <div style={{position:'relative',display:'flex',alignItems:'center',gap: isMobile ? 8 : 12}}>
      <div style={{
        width: isMobile ? 32 : 40, height: isMobile ? 32 : 40,
        borderRadius: isMobile ? 8 : 10,
        background:`linear-gradient(135deg, ${color}33, ${color}11)`,
        border:`1px solid ${color}44`,
        display:'flex',alignItems:'center',justifyContent:'center',
        fontSize: isMobile ? 16 : 20, color, flexShrink: 0,
      }}>{icon}</div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontFamily:'Space Grotesk',fontSize: isMobile ? 12 : 14,fontWeight:800,color:'#e5e1e4',letterSpacing:'-0.02em',lineHeight:1.15}}>{name}</div>
        <div style={{fontSize: isMobile ? 9 : 11,color:'#a98a7d',fontFamily:'JetBrains Mono',marginTop:2}}>{role}</div>
      </div>
      <span style={{width: isMobile ? 7 : 8,height: isMobile ? 7 : 8,borderRadius:9999,background:color,boxShadow:`0 0 10px ${color}`,animation:'sp-pulse 1.8s ease-in-out infinite',flexShrink:0}} />
    </div>
    <div style={{
      position:'relative',
      padding: isMobile ? '8px 10px' : '10px 12px',
      borderRadius:8,
      background:'rgba(14,14,16,0.6)',
      border:'1px solid rgba(255,255,255,0.05)',
      fontSize: isMobile ? 11 : 12,
      color:'#cfc4bf',lineHeight:1.45,flex:1
    }}>
      {status}
    </div>
    <div style={{position:'relative',display:'flex',alignItems:'baseline',gap:6,paddingTop: isMobile ? 6 : 8,borderTop:'1px solid rgba(255,255,255,0.05)',flexWrap:'wrap'}}>
      <div style={{fontFamily:'Manrope',fontSize: isMobile ? 18 : 22,fontWeight:800,color,letterSpacing:'-0.03em'}}>{metric.v}</div>
      <div style={{fontSize: isMobile ? 9 : 10,color:'#7a7570',fontFamily:'JetBrains Mono',letterSpacing:'0.1em',textTransform:'uppercase'}}>{metric.l}</div>
    </div>
  </div>
);

const GeniusAISection = () => {
  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="genius" label="05 Genius AI" padY={isMobile ? 80 : 160}>
    <div style={{position:'absolute',inset:0,pointerEvents:'none',overflow:'hidden'}}>
      <div style={{position:'absolute',top:'20%',left:'50%',transform:'translateX(-50%)',width:'80%',height:'60%',background:'radial-gradient(ellipse, rgba(167,139,250,0.12), transparent 65%)'}} />
    </div>

    <div style={{position:'relative',maxWidth:1280,margin:'0 auto',padding: isMobile ? '0 16px' : '0 32px'}}>
      <SectionHead
        eyebrow="genius ai · çoklu ajan sistemi"
        eyebrowColor="#a78bfa"
        title="Bir chatbot değil."
        titleAccent="Bir AI ekibi."
        lede="ShopPanel'i sadece araçlarla değil, gerçekten çalışan ajanlarla donattık. Her biri farklı iş yapar; hepsi 7/24 aktiftir. Kendi API anahtarınızı bağlayın veya ShopPanel AI kredilerini kullanın."
      />

      <div style={{
        marginTop: isMobile ? 40 : 72,
        display:'grid',
        gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, 1fr)',
        gap: isMobile ? 10 : 16,
      }}>
        <GeniusAgentCard isMobile={isMobile} icon="◈" name="System Agent" role="altyapı gözcüsü" color="#5de6ff"
          status="Shopify API gecikmesi normalin %18 üstünde — otomatik retry mantığı devrede."
          metric={{v:'99.97%', l:'uptime'}} />
        <GeniusAgentCard isMobile={isMobile} icon="✦" name="Sales Agent" role="tahmin & fiyat" color="#FF8C33"
          status="Önümüzdeki 7 gün için: +%12 ciro beklentisi. 3 ürüne stok artırma önerisi."
          metric={{v:'+12%', l:'öngörü'}} />
        <GeniusAgentCard isMobile={isMobile} icon="✉" name="Message Agent" role="müşteri yanıtları" color="#34d399"
          status="Trendyol · 'Kargo ne zaman?' — yanıt hazır. Gönder?"
          metric={{v:'142', l:'bugün yanıt'}} />
        <GeniusAgentCard isMobile={isMobile} icon="◉" name="Stock Agent" role="envanter dengeleyici" color="#a78bfa"
          status="T-Shirt Slim Fit · M bedeni kritik seviyede (8 adet). Diğer depolardan transfer hazır."
          metric={{v:'480', l:'SKU izleniyor'}} />
      </div>

      {/* Credits / BYO API strip */}
      <div style={{
        marginTop: isMobile ? 24 : 40,
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap:16,
      }}>
        <div style={{padding:24,borderRadius:14,background:'linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,107,0,0.02))',border:'1px solid rgba(255,107,0,0.2)'}}>
          <div style={{fontFamily:'Space Grotesk',fontSize:11,color:'#FF8C33',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:800,marginBottom:10}}>Seçenek 01</div>
          <div style={{fontFamily:'Manrope',fontSize:22,fontWeight:800,color:'#e5e1e4',letterSpacing:'-0.03em',marginBottom:8}}>ShopPanel AI Kredileri</div>
          <div style={{fontSize:13,color:'#a98a7d',lineHeight:1.55,marginBottom:14}}>Sisteme entegre, paketler halinde satın alın. Tüketim anlık görünür; dilediğinizde istediğinizde artırın.</div>
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
            {['10K · 99₺','50K · 399₺','200K · 1 290₺','Sınırsız · aylık'].map(p => (
              <span key={p} style={{fontSize:11,padding:'5px 10px',borderRadius:7,background:'rgba(255,255,255,0.04)',color:'#cfc4bf',fontFamily:'JetBrains Mono',border:'1px solid rgba(255,255,255,0.06)'}}>{p}</span>
            ))}
          </div>
        </div>
        <div style={{padding:24,borderRadius:14,background:'linear-gradient(135deg, rgba(93,230,255,0.06), rgba(93,230,255,0.02))',border:'1px solid rgba(93,230,255,0.2)'}}>
          <div style={{fontFamily:'Space Grotesk',fontSize:11,color:'#5de6ff',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:800,marginBottom:10}}>Seçenek 02</div>
          <div style={{fontFamily:'Manrope',fontSize:22,fontWeight:800,color:'#e5e1e4',letterSpacing:'-0.03em',marginBottom:8}}>Kendi API Anahtarınız</div>
          <div style={{fontSize:13,color:'#a98a7d',lineHeight:1.55,marginBottom:14}}>OpenAI, Anthropic, Gemini, yerel modeller — ne kullanıyorsanız bağlayın. Anahtar sizde kalır, ShopPanel sadece aracıdır.</div>
          <div style={{display:'flex',gap:10,flexWrap:'wrap',fontFamily:'JetBrains Mono',fontSize:11,color:'#9ccaff'}}>
            <span>• OpenAI</span><span>• Anthropic</span><span>• Gemini</span><span>• Ollama (yerel LLM)</span>
          </div>
        </div>
      </div>
    </div>
  </SectionWrap>
  );
};

window.GeniusAISection = GeniusAISection;