// Looping product demo shown in marketing hero — 3 scenes, ~9s loop
// Scaled-down app UI (not the real kit — simplified for marketing clarity)

const { useState: useStateP, useEffect: useEffectP } = React;

function ProductDemo({ scale = 1 }) {
  const [t, setT] = useStateP(0);
  // 3 scenes × (reveal + hold). Reveal 2.0s, hold 3.5s.
  const REVEAL = 2000, HOLD = 3500, SCENE = REVEAL + HOLD; // 5.5s per scene
  const DUR = SCENE * 3;

  useEffectP(() => {
    let start = performance.now();
    let raf;
    const tick = (now) => {
      setT(((now - start) % DUR) / DUR);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const totalMs = t * DUR;
  const scene = Math.min(2, Math.floor(totalMs / SCENE));
  const inSceneMs = totalMs - scene * SCENE;
  // sp: reveal 0→1 during REVEAL, then holds at 1 during HOLD
  const sp = Math.min(1, inSceneMs / REVEAL);

  return (
    <div style={{width: 820 * scale, height: 520 * scale, transformOrigin:'top left'}}>
      <div style={{width: 820, height: 520, transform: `scale(${scale})`, transformOrigin:'top left', background:'#0F1830', borderRadius:12, overflow:'hidden', boxShadow:'0 30px 80px -20px rgba(0,0,0,0.6), 0 10px 30px -10px rgba(0,0,0,0.3)', border:'1px solid #41547A', fontFamily:'Inter, sans-serif'}}>
        {/* App TopBar */}
        <div style={{height:52, background:'#0F1830', borderBottom:'1px solid #253359', display:'flex', alignItems:'center', padding:'0 18px', gap:16}}>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <div style={{width:22, height:22, background:'#fff', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Space Grotesk', fontWeight:700, color:'#0F1830', fontSize:13}}>R</div>
            <span style={{fontFamily:'Space Grotesk', fontWeight:700, fontSize:13, color:'#fff'}}>Robot Dogs</span>
          </div>
          <div style={{display:'flex', gap:14, marginLeft:16}}>
            {['Security Review', 'Drift Monitor', 'AI Assistant', 'Tenants'].map((n,i) => {
              const active = (scene === 0 && i === 0) || (scene === 1 && i === 1) || (scene === 2 && i === 2);
              return <span key={n} style={{fontSize:11.5, color: active ? '#fff' : '#8B95A5', fontWeight: active ? 500 : 400, borderBottom: active ? '2px solid #3B6FF5' : '2px solid transparent', paddingBottom:3}}>{n}</span>;
            })}
          </div>
          <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:10, fontSize:11, color:'#8B95A5'}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#16A34A'}}/>Live
            <span>jen@contoso.com</span>
          </div>
        </div>

        {/* Content area */}
        <div style={{height: 520 - 52, background:'#F5F7FA', position:'relative', overflow:'hidden'}}>
          {scene === 0 && <SceneDashboard sp={sp}/>}
          {scene === 1 && <SceneDrift sp={sp}/>}
          {scene === 2 && <SceneChat sp={sp}/>}
        </div>

        {/* scrub progress */}
        <div style={{position:'absolute', bottom:0, left:0, right:0, height:2, background:'rgba(59,111,245,0.15)'}}>
          <div style={{height:2, background:'#3B6FF5', width:`${t*100}%`}}/>
        </div>
      </div>
    </div>
  );
}

function SceneDashboard({ sp }) {
  // Donut score animates from 0 to 87 as sp 0->0.7, then holds
  const score = Math.round(Math.min(sp / 0.7, 1) * 87);
  const circ = 2 * Math.PI * 42;
  const offset = circ * (1 - score / 100);
  return (
    <div style={{padding:'20px 24px', height:'100%', boxSizing:'border-box'}}>
      <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
        <span style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:18, color:'#0F1830'}}>Contoso Corp</span>
        <span style={{fontSize:11, color:'#526077', background:'#E5E9F0', padding:'2px 8px', borderRadius:4}}>contoso.onmicrosoft.com</span>
        <span style={{marginLeft:'auto', fontSize:11, color:'#526077'}}>Last scan 2 min ago</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:16}}>
        {/* Score donut */}
        <div style={{background:'#fff', border:'1px solid #E5E9F0', borderRadius:10, padding:20, display:'flex', alignItems:'center', gap:18}}>
          <svg width="100" height="100" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="42" fill="none" stroke="#E5E9F0" strokeWidth="10"/>
            <circle cx="50" cy="50" r="42" fill="none" stroke="#3B6FF5" strokeWidth="10" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" transform="rotate(-90 50 50)"/>
            <text x="50" y="54" textAnchor="middle" fontFamily="Space Grotesk" fontSize="22" fontWeight="700" fill="#0F1830">{score}</text>
          </svg>
          <div>
            <div style={{fontSize:12, color:'#526077', marginBottom:4}}>Security score</div>
            <div style={{fontFamily:'Space Grotesk', fontSize:18, fontWeight:600, color:'#0F1830'}}>Good</div>
            <div style={{fontSize:11, color:'#16A34A', marginTop:6}}>↑ 4 since last week</div>
          </div>
        </div>
        {/* Category tiles */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
          {[
            {label:'Identity', v:12, sev:'#DC2626'},
            {label:'Email', v:5, sev:'#EA580C'},
            {label:'Sharing', v:8, sev:'#CA8A04'},
            {label:'Licenses', v:2, sev:'#16A34A'},
            {label:'Apps', v:4, sev:'#CA8A04'},
            {label:'Devices', v:1, sev:'#16A34A'},
          ].map((c,i) => (
            <div key={c.label} style={{background:'#fff', border:'1px solid #E5E9F0', borderRadius:8, padding:'10px 12px', opacity: sp > (i*0.08) ? 1 : 0, transform: sp > (i*0.08) ? 'translateY(0)' : 'translateY(6px)', transition:'all 300ms'}}>
              <div style={{fontSize:11, color:'#526077'}}>{c.label}</div>
              <div style={{display:'flex', alignItems:'baseline', gap:6, marginTop:4}}>
                <span style={{fontFamily:'Space Grotesk', fontSize:20, fontWeight:700, color:'#0F1830'}}>{c.v}</span>
                <span style={{fontSize:10, color:c.sev, fontWeight:500}}>findings</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* Findings table */}
      <div style={{marginTop:16, background:'#fff', border:'1px solid #E5E9F0', borderRadius:10, overflow:'hidden'}}>
        <div style={{padding:'10px 14px', fontFamily:'Space Grotesk', fontWeight:600, fontSize:13, color:'#0F1830', borderBottom:'1px solid #E5E9F0', display:'flex', alignItems:'center'}}>
          Top findings
          <span style={{marginLeft:'auto', fontSize:11, color:'#526077', fontWeight:400}}>32 total</span>
        </div>
        {[
          {sev:'Critical', sevC:'#DC2626', title:'3 admin accounts without MFA', meta:'Entra ID · 2h ago'},
          {sev:'High', sevC:'#EA580C', title:'External sharing enabled on 4 sites', meta:'SharePoint · 1d ago'},
          {sev:'Medium', sevC:'#CA8A04', title:'Stale guest accounts (>90 days)', meta:'Entra ID · 1d ago'},
        ].map((r,i) => (
          <div key={i} style={{padding:'10px 14px', borderTop: i > 0 ? '1px solid #F0F2F5' : 'none', display:'flex', alignItems:'center', gap:12, opacity: sp > (0.3 + i*0.1) ? 1 : 0, transition:'opacity 300ms'}}>
            <span style={{fontSize:10, fontWeight:600, color:r.sevC, background:`${r.sevC}15`, padding:'2px 8px', borderRadius:4, width:64, textAlign:'center'}}>{r.sev}</span>
            <span style={{fontSize:13, color:'#0F1830', flex:1}}>{r.title}</span>
            <span style={{fontSize:11, color:'#8B95A5'}}>{r.meta}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SceneDrift({ sp }) {
  // Toast slides in sp 0->0.2, list items populate
  return (
    <div style={{padding:'20px 24px', height:'100%', boxSizing:'border-box', position:'relative'}}>
      <div style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:18, color:'#0F1830', marginBottom:14}}>Drift Monitor</div>

      {/* Alert toast */}
      <div style={{position:'absolute', top:16, right:24, width:320, background:'#fff', border:'1px solid #FF6B3D', borderLeft:'4px solid #FF6B3D', borderRadius:8, padding:'12px 14px', boxShadow:'0 8px 24px rgba(15,24,48,0.12)', transform: sp < 0.2 ? 'translateX(400px)' : 'translateX(0)', transition:'transform 400ms cubic-bezier(.2,.9,.3,1.1)', zIndex:2}}>
        <div style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:'#FF6B3D', fontWeight:600, marginBottom:4}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#FF6B3D'}}/>DRIFT DETECTED · just now
        </div>
        <div style={{fontSize:13, color:'#0F1830', fontWeight:500, marginBottom:2}}>New enterprise app granted User.Read.All</div>
        <div style={{fontSize:11, color:'#526077'}}>Contoso · by admin@contoso.com</div>
      </div>

      <div style={{background:'#fff', border:'1px solid #E5E9F0', borderRadius:10, marginTop:10}}>
        <div style={{padding:'10px 14px', fontSize:12, color:'#526077', borderBottom:'1px solid #E5E9F0', display:'flex', gap:20}}>
          <span>Last 24h</span><span style={{color:'#DC2626'}}>● 2 high</span><span style={{color:'#CA8A04'}}>● 5 medium</span><span style={{color:'#16A34A'}}>● 11 low</span>
        </div>
        {[
          {time:'just now', type:'APP GRANT', t:'User.Read.All granted to "Acme Reporter"', who:'admin@contoso.com', sev:'#DC2626'},
          {time:'8m ago', type:'POLICY', t:'Conditional Access policy "Block Legacy Auth" disabled', who:'it-admin@contoso', sev:'#DC2626'},
          {time:'32m ago', type:'ROLE', t:'User promoted to Global Administrator', who:'ceo@contoso.com', sev:'#CA8A04'},
          {time:'1h ago', type:'SHARE', t:'External sharing enabled on "Finance-2026"', who:'jen@contoso.com', sev:'#CA8A04'},
          {time:'2h ago', type:'USER', t:'27 guest users added', who:'hr-sync', sev:'#16A34A'},
        ].map((r,i) => (
          <div key={i} style={{padding:'11px 14px', borderTop:'1px solid #F0F2F5', display:'flex', alignItems:'center', gap:12, fontSize:12.5, opacity: sp > (0.15 + i*0.08) ? 1 : 0, transform: sp > (0.15 + i*0.08) ? 'translateY(0)' : 'translateY(4px)', transition:'all 300ms'}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:r.sev}}/>
            <span style={{color:'#8B95A5', width:68}}>{r.time}</span>
            <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'#1E3FAA', background:'#EBF0FE', padding:'2px 6px', borderRadius:3, width:80, textAlign:'center'}}>{r.type}</span>
            <span style={{color:'#0F1830', flex:1}}>{r.t}</span>
            <span style={{fontSize:11, color:'#526077'}}>{r.who}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SceneChat({ sp }) {
  // Typewriter reveal of AI response
  const response = "Three Conditional Access policies would close those gaps:\n\n1. Require MFA for all admin roles (currently only enforced on 2/5 admin accounts)\n2. Block legacy authentication tenant-wide\n3. Require compliant device for admin portals\n\nWant me to draft the JSON for all three?";
  const charCount = Math.floor(Math.min(sp / 0.8, 1) * response.length);
  const shown = response.slice(0, charCount);

  return (
    <div style={{padding:'20px 24px', height:'100%', boxSizing:'border-box', display:'flex', flexDirection:'column', gap:12}}>
      <div style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:18, color:'#0F1830'}}>AI Assistant <span style={{fontSize:11, color:'#526077', fontWeight:400, marginLeft:8}}>context: Contoso tenant</span></div>

      <div style={{flex:1, display:'flex', flexDirection:'column', gap:12, overflow:'hidden'}}>
        {/* User msg */}
        <div style={{alignSelf:'flex-end', background:'#0F1830', color:'#fff', padding:'10px 14px', borderRadius:'10px 10px 2px 10px', fontSize:13, maxWidth:'70%'}}>
          What policies should I have in place to secure admin accounts?
        </div>
        {/* AI msg */}
        <div style={{alignSelf:'flex-start', background:'#fff', border:'1px solid #E5E9F0', padding:'12px 14px', borderRadius:'10px 10px 10px 2px', fontSize:13, maxWidth:'78%', whiteSpace:'pre-wrap', lineHeight:1.55, color:'#0F1830', minHeight:120}}>
          {shown}{sp < 0.8 && <span style={{display:'inline-block', width:6, height:14, background:'#3B6FF5', marginLeft:2, verticalAlign:'middle', animation:'blink 0.9s steps(2) infinite'}}/>}
          {sp > 0.8 && (
            <div style={{display:'flex', gap:8, marginTop:12}}>
              <button style={{background:'#0F1830', color:'#fff', border:'none', padding:'6px 12px', borderRadius:6, fontSize:12, fontFamily:'inherit', cursor:'pointer'}}>Draft the JSON →</button>
              <button style={{background:'transparent', color:'#0F1830', border:'1px solid #D1D8E3', padding:'6px 12px', borderRadius:6, fontSize:12, fontFamily:'inherit', cursor:'pointer'}}>Open runbook</button>
            </div>
          )}
        </div>
      </div>

      <div style={{background:'#fff', border:'1px solid #E5E9F0', borderRadius:10, padding:'10px 14px', display:'flex', alignItems:'center', gap:8, fontSize:13, color:'#8B95A5'}}>
        <span style={{flex:1}}>Ask about your tenant…</span>
        <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, background:'#F0F2F5', padding:'2px 6px', borderRadius:3}}>⌘K</span>
      </div>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
}

Object.assign(window, { ProductDemo });