// Intel — collective intelligence + live globe-ish strip. Dark.

const { useState: useStateI, useEffect: useEffectI } = React;

function ArcGlobe() {
  // Stylised hemisphere with arc trajectories.
  return (
    <svg viewBox="0 0 520 400" style={{width:'100%', height:'auto'}}>
      <defs>
        <radialGradient id="globeG" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#1c1f3c" stopOpacity="1"/>
          <stop offset="100%" stopColor="#0a0c1c" stopOpacity="1"/>
        </radialGradient>
        <linearGradient id="arcG" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#ff5c5c" stopOpacity="0"/>
          <stop offset="50%" stopColor="#ff5c5c" stopOpacity="1"/>
          <stop offset="100%" stopColor="#ffb24a" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="arcG2" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#4a6df5" stopOpacity="0"/>
          <stop offset="50%" stopColor="#6c8bff" stopOpacity="1"/>
          <stop offset="100%" stopColor="#6c8bff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <circle cx="260" cy="200" r="170" fill="url(#globeG)" stroke="#262a44" strokeWidth="1"/>
      {/* lat lines */}
      {[0.25,0.5,0.75].map((y,i)=>(
        <ellipse key={i} cx="260" cy="200" rx="170" ry={170*Math.sin(y*Math.PI)} fill="none" stroke="#1d2036" strokeWidth=".5"/>
      ))}
      {/* meridians */}
      {[0,30,60,90,120,150].map((deg,i)=>(
        <ellipse key={i} cx="260" cy="200" rx={170*Math.abs(Math.cos(deg*Math.PI/180))} ry="170" fill="none" stroke="#1d2036" strokeWidth=".5"/>
      ))}
      {/* attack pins */}
      {[[180,150],[300,170],[230,260],[330,230],[200,210],[350,180]].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="3" fill="#ff5c5c"/>
          <circle cx={x} cy={y} r="3" fill="#ff5c5c">
            <animate attributeName="r" values="3;12;3" dur={`${2+i*0.3}s`} repeatCount="indefinite"/>
            <animate attributeName="opacity" values="1;0;1" dur={`${2+i*0.3}s`} repeatCount="indefinite"/>
          </circle>
        </g>
      ))}
      {/* arcs */}
      <path d="M 100 220 Q 260 60 420 200" fill="none" stroke="url(#arcG)" strokeWidth="1.5">
        <animate attributeName="stroke-dasharray" values="0 600;300 600;600 0" dur="3s" repeatCount="indefinite"/>
      </path>
      <path d="M 140 280 Q 260 100 380 260" fill="none" stroke="url(#arcG2)" strokeWidth="1.5">
        <animate attributeName="stroke-dasharray" values="0 600;300 600;600 0" dur="4s" repeatCount="indefinite"/>
      </path>
      <path d="M 200 320 Q 280 200 420 290" fill="none" stroke="url(#arcG)" strokeWidth="1.5">
        <animate attributeName="stroke-dasharray" values="0 600;300 600;600 0" dur="3.5s" repeatCount="indefinite"/>
      </path>
    </svg>
  );
}

function FeedRow({ time, ip, country, token, risk, status }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'70px 1fr 80px 90px 80px 90px', gap:12, padding:'10px 0', borderTop:'1px solid var(--ink-line)', fontSize:12, alignItems:'center'}} className="mono">
      <span className="line-dim">{time}</span>
      <span style={{color:'#fff'}}>{ip}</span>
      <span className="line-dim">{country}</span>
      <span style={{color:'var(--aurora-2)'}}>{token}</span>
      <span style={{color: risk >= 0.9 ? 'var(--signal-bad)' : risk >= 0.7 ? 'var(--signal-warn)' : 'var(--signal-info)'}}>{risk.toFixed(2)}</span>
      <span style={{color: status==='contained' ? 'var(--signal-ok)' : status==='watching' ? 'var(--signal-info)' : 'var(--signal-warn)'}}>● {status}</span>
    </div>
  );
}

function IntelSection() {
  const rows = [
    { time:'14:33:11', ip:'185.220.101.47', country:'NL-TOR', token:'aws-iam', risk:0.97, status:'contained' },
    { time:'14:31:02', ip:'94.16.122.10',   country:'RU-MSC', token:'dns-tkn', risk:0.82, status:'contained' },
    { time:'14:28:55', ip:'41.205.18.9',    country:'NG-LAG', token:'pdf-tkn', risk:0.71, status:'review' },
    { time:'14:24:09', ip:'45.227.255.4',   country:'PA-PTY', token:'db-cred', risk:0.94, status:'contained' },
    { time:'14:18:42', ip:'103.151.232.7',  country:'VN-HAN', token:'llm-key', risk:0.88, status:'watching' },
    { time:'14:11:08', ip:'5.188.10.224',   country:'RU-SPB', token:'aws-iam', risk:0.93, status:'contained' },
  ];

  return (
    <section data-screen-label="06 Intel" className="bg-ink" style={{position:'relative', padding:'140px 0 130px', borderTop:'1px solid var(--ink-line)'}}>
      <div className="grid-fine" style={{position:'absolute', inset:0, opacity:.35}}/>
      <div className="wrap" style={{position:'relative'}}>
        <div className="intel-grid" style={{display:'grid', gridTemplateColumns:'minmax(0,1.05fr) minmax(0,1fr)', gap:64, alignItems:'center'}}>
          <div>
            <div className="chip" style={{marginBottom:18}}>FILE № 05 · COLLECTIVE</div>
            <h2 className="display" style={{fontSize:'clamp(44px, 5.6vw, 88px)', margin:0, color:'#fff', fontWeight:700, letterSpacing:'-.025em'}}>
              An attack on one tenant<br/>
              <span className="display-italic txt-grad">vaccinates all of them.</span>
            </h2>
            <p style={{fontSize:16, lineHeight:1.6, color:'var(--txt-2)', maxWidth:520, marginTop:22, marginBottom:32}}>
              Every triggered trap, every classified actor, every observed C2 — anonymised, normalised, and shared across the Vantuz network within 120 seconds. Your defence gets stronger with every breach attempted on somebody else.
            </p>

            <div className="card" style={{padding:20}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6}}>
                <div className="mono" style={{fontSize:10, letterSpacing:'.2em', color:'var(--txt-3)'}}>// LIVE FEED · SAMPLE</div>
                <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--signal-ok)'}}><span className="live-dot" style={{marginRight:6}}/>STREAMING</div>
              </div>
              <div className="intel-feed-scroll">
                <div>
                  <div style={{display:'grid', gridTemplateColumns:'70px 1fr 80px 90px 80px 90px', gap:12, paddingBottom:4, fontSize:10, color:'var(--txt-4)'}} className="mono">
                    <span>TIME</span><span>SOURCE</span><span>ASN</span><span>TOKEN</span><span>RISK</span><span>STATUS</span>
                  </div>
                  {rows.map((r,i) => <FeedRow key={i} {...r}/>)}
                </div>
              </div>
            </div>
          </div>

          <div style={{position:'relative'}}>
            <div style={{position:'absolute', inset:'-30px', background:'radial-gradient(circle, rgba(255,92,92,.15), transparent 60%)', filter:'blur(40px)'}}/>
            <div style={{position:'relative'}}>
              <ArcGlobe/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.IntelSection = IntelSection;