// SOCIAL — reviews, toast stack, ambassador counter

function Reviews() {
  return (
    <section style={{maxWidth:1020,margin:'0 auto 56px',padding:'0 4px'}}>
      <Eyebrow accent="var(--mute)" style={{textAlign:'center',marginBottom:22}}>
        From agents already building with Apex
      </Eyebrow>
      <div style={{
        display:'grid',
        gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',
        gap:14,
      }}>
        {REVIEWS.map((r, i) => (
          <div key={i} style={{
            background:'var(--card)',border:'1px solid var(--border)',
            borderRadius:14,padding:'20px 22px',boxShadow:'var(--shadow)',
          }}>
            <div style={{marginBottom:8}}><Stars n={r.stars}/></div>
            <div style={{fontSize:15,fontWeight:700,color:'var(--ink)',marginBottom:10,letterSpacing:'-0.2px',lineHeight:1.3}}>
              {r.title}
            </div>
            <div style={{fontSize:13.5,color:'var(--ink)',lineHeight:1.55,fontStyle:'italic',marginBottom:14}}>
              {r.body}
            </div>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <div style={{
                width:40,height:40,borderRadius:'50%',flexShrink:0,
                background:`linear-gradient(135deg,hsl(${(i*97)%360} 45% 55%),hsl(${(i*97+60)%360} 40% 40%))`,
                color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:800,fontSize:15,
              }}>{r.name.charAt(0)}</div>
              <div>
                <div style={{fontSize:13.5,fontWeight:700,color:'var(--ink)',lineHeight:1.2}}>{r.name}</div>
                <div style={{fontSize:11.5,color:'var(--mute)',lineHeight:1.3,marginTop:2}}>{r.meta}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{
        fontSize:11,color:'var(--dim)',textAlign:'center',marginTop:14,
        letterSpacing:0.3,
      }}>
        Real agents using Apex in early access. Headshots coming soon.
      </div>
    </section>
  );
}

function ToastStack() {
  const { toasts } = useApp();
  return (
    <div style={{
      position:'fixed',bottom:'calc(96px + env(safe-area-inset-bottom,0px))',
      left:12,zIndex:160,pointerEvents:'none',
      display:'flex',flexDirection:'column',gap:8,
    }}>
      {toasts.map(t => (
        <div key={t.id} style={{
          background:'var(--card)',color:'var(--ink)',
          border:'1px solid var(--border)',borderRadius:14,
          padding:'10px 14px',fontSize:12.5,fontWeight:500,
          boxShadow:'0 12px 40px rgba(11,11,20,0.18)',
          display:'flex',alignItems:'center',gap:10,maxWidth:280,
          animation:'apex-toast-in 0.45s cubic-bezier(0.16,1,0.3,1)',
        }}>
          <span style={{
            width:7,height:7,borderRadius:'50%',background:'#10b981',flexShrink:0,
            animation:'apex-pulse 1.4s ease-in-out infinite',
          }}/>
          <div style={{lineHeight:1.35}}>
            <strong style={{color:'var(--ink)',fontWeight:700}}>{t.p.n}</strong>
            {' from '+t.p.c+' '+t.a}
            <span style={{color:'var(--mute)',fontSize:11,letterSpacing:0.3,display:'block',marginTop:2}}>
              {t.ago}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

// Ambassador counter — the RIGHT scarcity mechanic (real cap)
function AmbassadorCounter({ compact=false }) {
  const { taken } = useApp();
  const left = BRAND.ambassadorCap - taken;
  const pct = (taken / BRAND.ambassadorCap) * 100;

  if (compact) {
    return (
      <div style={{
        display:'inline-flex',alignItems:'center',gap:10,
        background:'var(--card)',border:'1px solid var(--border)',
        borderRadius:999,padding:'8px 14px',boxShadow:'var(--shadow)',
        fontSize:12,fontWeight:600,color:'var(--mute)',
      }}>
        <LiveDot color="#10b981" size={6}/>
        <span><strong style={{color:'var(--ink)',fontWeight:800,fontVariantNumeric:'tabular-nums'}}>{taken}</strong> of {BRAND.ambassadorCap} Brand Ambassadors claimed</span>
      </div>
    );
  }

  return (
    <div style={{
      background:'var(--card)',border:'1px solid var(--border)',
      borderRadius:16,padding:'18px 20px',boxShadow:'var(--shadow)',
    }}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
        <div style={{fontSize:11,fontWeight:800,letterSpacing:2,textTransform:'uppercase',color:'var(--mute)'}}>
          Brand Ambassadors
        </div>
        <div style={{fontSize:12,fontWeight:700,color:'var(--purple)'}}>
          {left} left
        </div>
      </div>
      <div style={{fontSize:24,fontWeight:800,color:'var(--ink)',fontVariantNumeric:'tabular-nums',letterSpacing:'-0.5px'}}>
        {taken} <span style={{color:'var(--dim)',fontWeight:600,fontSize:18}}>/ {BRAND.ambassadorCap}</span>
      </div>
      <div style={{
        marginTop:12,height:8,borderRadius:999,
        background:'var(--break-bg)',overflow:'hidden',
      }}>
        <div style={{
          height:'100%',width:`${pct}%`,
          background:BRAND.gradient,borderRadius:999,
          transition:'width 1s ease',
        }}/>
      </div>
    </div>
  );
}

Object.assign(window, { Reviews, ToastStack, AmbassadorCounter });