// Community + Support section — live chat between all users, free premium support

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

const SupportTile = ({ icon, title, desc, color, isMobile = false }) => (
  <div style={{
    padding: isMobile ? 14 : 22,
    borderRadius: isMobile ? 12 : 14,
    background:'linear-gradient(180deg, rgba(28,28,32,0.8), rgba(18,18,22,0.6))',
    border:`1px solid ${color}22`,
    display:'flex',flexDirection:'column',
    gap: isMobile ? 8 : 10,
    height:'100%',
    minWidth: 0,
  }}>
    <div style={{
      width: isMobile ? 32 : 40,
      height: isMobile ? 32 : 40,
      borderRadius: isMobile ? 8 : 10,
      background:`${color}18`,border:`1px solid ${color}33`,
      display:'flex',alignItems:'center',justifyContent:'center',
      fontSize: isMobile ? 16 : 20, color,
    }}>{icon}</div>
    <div style={{fontFamily:'Manrope',fontSize: isMobile ? 14 : 17,fontWeight:800,color:'#e5e1e4',letterSpacing:'-0.02em',lineHeight:1.2}}>{title}</div>
    <div style={{fontSize: isMobile ? 11 : 13,color:'#a98a7d',lineHeight:1.5}}>{desc}</div>
    <div style={{marginTop:'auto',paddingTop: isMobile ? 8 : 12,borderTop:'1px solid rgba(255,255,255,0.05)'}}>
      <span style={{fontSize: isMobile ? 9 : 10,fontFamily:'JetBrains Mono',color:'#34d399',letterSpacing:'0.1em',textTransform:'uppercase',fontWeight:800}}>✓ dahil · ek ücret yok</span>
    </div>
  </div>
);

const CHAT = [
  {u:'Ayşe K.',c:'#FF8C33',m:'Trendyol kampanya fiyatını otomatik çıkarmak isteyen? Kural paylaşabilirim.',t:'2dk'},
  {u:'Murat T.',c:'#5de6ff',m:'XAU kuralı harika çalışıyor, altın kaplama takılarda %8 kârlılık artışı.',t:'5dk'},
  {u:'Zeynep B.',c:'#a78bfa',m:'Message Agent Almanca çevirisini de yapıyor mu? 🤔',t:'8dk'},
  {u:'ShopPanel',c:'#34d399',m:'Evet, 28 dil desteği mevcut. Ayarlar → AI → Dil.',t:'7dk',bot:true},
];

const TILES = [
  {icon:'🖥', title:'Uzak Masaüstü',  color:'#5de6ff', desc:'Ekranınıza bağlanıp sorunu birlikte çözeriz. Hiçbir rakip bunu ücretsiz vermez.'},
  {icon:'📞', title:'Telefon Desteği', color:'#FF8C33', desc:'Hafta içi ve hafta sonu — gerçek bir insan açar. Ortalama bekleme 40sn.'},
  {icon:'💬', title:'Canlı Sohbet',    color:'#a78bfa', desc:'Panel içinden yazın, 7/24 yanıt. Geçmiş oturumlar kaydedilir.'},
  {icon:'✉',  title:'E-posta & Bilet', color:'#34d399', desc:'Detaylı sorunlar için. Ortalama ilk yanıt 2 saat içinde.'},
];

// ── ChatLoop: each message appears one-by-one with specified gaps, holds, then
//    all fade out together, and the loop restarts.
//    Timing: msg1 @ 0ms → msg2 @ +1000ms → msg3 @ +500ms → msg4 @ +1000ms
//            → hold 1800ms → fade all (800ms) → reset → repeat.
const ChatLoop = () => {
  // visible[i] ∈ {'hidden','in','out'}; we track each message separately so we
  // can cross-fade cleanly.
  const [visible, setVisible] = React.useState([false,false,false,false]);

  React.useEffect(() => {
    const timers = [];
    const schedule = (fn, t) => timers.push(setTimeout(fn, t));

    const run = () => {
      // reset instantly (no transition jump — we let CSS transition handle the fade-out)
      setVisible([false,false,false,false]);

      // msg1 at 0ms
      schedule(() => setVisible([true,false,false,false]), 50);
      // msg2 at +1000ms
      schedule(() => setVisible([true,true,false,false]), 1050);
      // msg3 at +500ms after msg2
      schedule(() => setVisible([true,true,true,false]), 1550);
      // msg4 at +1000ms after msg3
      schedule(() => setVisible([true,true,true,true]), 2550);
      // hold 1800ms → fade all out (set all false, CSS transitions back to hidden)
      schedule(() => setVisible([false,false,false,false]), 2550 + 1800);
      // loop after fade completes (800ms) + short pause
      schedule(run, 2550 + 1800 + 1200);
    };

    run();
    return () => timers.forEach(clearTimeout);
  }, []);

  return (
    <div style={{display:'flex',flexDirection:'column',gap:10}}>
      {CHAT.map((x,i) => {
        const on = visible[i];
        return (
          <div key={i} style={{
            display:'flex',gap:10,padding:'8px 10px',borderRadius:8,
            background: x.bot ? 'rgba(52,211,153,0.06)' : 'transparent',
            opacity: on ? 1 : 0,
            transform: on ? 'translateY(0)' : 'translateY(8px)',
            filter: on ? 'blur(0)' : 'blur(2px)',
            transition:'opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.55s cubic-bezier(.2,.7,.2,1), filter 0.55s ease',
            willChange:'opacity, transform, filter'
          }}>
            <div style={{width:28,height:28,borderRadius:7,background:`${x.c}22`,color:x.c,display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:800,fontFamily:'Space Grotesk',flexShrink:0}}>{x.u[0]}</div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',gap:8,alignItems:'baseline'}}>
                <span style={{fontSize:12,fontWeight:700,color:x.c}}>{x.u}</span>
                {x.bot && <span style={{fontSize:9,padding:'1px 5px',borderRadius:4,background:'rgba(52,211,153,0.18)',color:'#34d399',fontFamily:'JetBrains Mono',letterSpacing:'0.1em'}}>EKİP</span>}
                <span style={{fontSize:10,color:'#6b655f',fontFamily:'JetBrains Mono'}}>{x.t}</span>
              </div>
              <div style={{fontSize:13,color:'#cfc4bf',lineHeight:1.5,marginTop:2}}>{x.m}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const CommunitySupportSection = () => {
  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="community" label="07 Community & Support" padY={isMobile ? 80 : 160}>
    <div style={{maxWidth:1280,margin:'0 auto',padding: isMobile ? '0 16px' : '0 32px'}}>
      <SectionHead
        eyebrow="topluluk + destek"
        eyebrowColor="#34d399"
        title="Yalnız değilsiniz."
        titleAccent="Hem topluluk, hem destek."
        lede="ShopPanel kullananların canlı sohbet odası — istediğinizde açın, istediğinizde kapatın. Uzak masaüstü, telefon, e-posta, canlı sohbet — hepsi hiçbir ek ücret talep etmeden."
      />

      <div style={{
        marginTop: isMobile ? 32 : 64,
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr',
        gap: isMobile ? 14 : 28,
      }}>
        {/* Live community chat mockup with animated message loop */}
        <div style={{
          padding: isMobile ? 14 : 20, borderRadius: 18,
          background:'linear-gradient(180deg, rgba(28,28,32,0.85), rgba(18,18,22,0.65))',
          border:'1px solid rgba(255,255,255,0.06)',
          minHeight: isMobile ? 280 : 360,
          minWidth: 0,
        }}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16,paddingBottom:12,borderBottom:'1px solid rgba(255,255,255,0.06)',gap:10}}>
            <div style={{minWidth:0}}>
              <div style={{fontFamily:'Space Grotesk',fontSize:14,fontWeight:800,color:'#e5e1e4'}}># ShopPanel Topluluk</div>
              <div style={{fontSize:11,color:'#7a7570',fontFamily:'JetBrains Mono'}}>2 847 satıcı · 124 çevrimiçi</div>
            </div>
            <label style={{display:'flex',alignItems:'center',gap:8,fontSize:11,color:'#a98a7d',fontFamily:'JetBrains Mono',letterSpacing:'0.1em',textTransform:'uppercase',flexShrink:0}}>
              sohbet açık
              <span style={{width:28,height:16,background:'#34d399',borderRadius:9999,position:'relative'}}>
                <span style={{position:'absolute',top:2,right:2,width:12,height:12,borderRadius:9999,background:'#fff'}} />
              </span>
            </label>
          </div>

          <ChatLoop />
        </div>

        {/* Support tiles — 2x2 grid (works on both Desktop + Mobile) */}
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : '1fr 1fr',
          gap: isMobile ? 10 : 14,
        }}>
          {TILES.map((t,i) => <SupportTile key={i} {...t} isMobile={isMobile} />)}
        </div>
      </div>
    </div>
  </SectionWrap>
  );
};

window.CommunitySupportSection = CommunitySupportSection;