/* ISonTrack Landing — Animated demo tiles (CSS/SVG only, 6 mocks) */

const DemoDashboard = () => (
  <div className="demo-stage demo-dashboard">
    <div className="dm-chrome">
      <span className="dm-dot r"></span><span className="dm-dot y"></span><span className="dm-dot g"></span>
      <div className="dm-url">app.isontrack.com / dashboard</div>
    </div>
    <div className="dm-body">
      <div className="dm-row">
        <div className="dm-kpi"><div className="k">ON TRACK</div><div className="v grad">74%</div><div className="spark s1"></div></div>
        <div className="dm-kpi"><div className="k">AT RISK</div><div className="v" style={{color:'#F59E0B'}}>12</div><div className="spark s2"></div></div>
        <div className="dm-kpi"><div className="k">TCO₂e</div><div className="v">−38%</div><div className="spark s3"></div></div>
      </div>
      <div className="dm-chart">
        <svg viewBox="0 0 320 100" preserveAspectRatio="none" style={{width:'100%',height:'100%'}}>
          <defs>
            <linearGradient id="dmg1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#02E3A7" stopOpacity="0.4"/>
              <stop offset="100%" stopColor="#02E3A7" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path className="dm-area" d="M0,80 L40,70 L80,72 L120,55 L160,48 L200,40 L240,32 L280,25 L320,20 L320,100 L0,100 Z" fill="url(#dmg1)"/>
          <polyline className="dm-line" points="0,80 40,70 80,72 120,55 160,48 200,40 240,32 280,25 320,20"
            fill="none" stroke="#02E3A7" strokeWidth="2"/>
        </svg>
      </div>
    </div>
  </div>
);

const DemoAIChat = () => (
  <div className="demo-stage demo-ai">
    <div className="ai-head">
      <span className="ai-avatar">AI</span>
      <div>
        <div className="ai-title">ISonTrack AI</div>
        <div className="ai-sub">Sustainability assistant</div>
      </div>
    </div>
    <div className="ai-msgs">
      <div className="ai-msg user">Draft the monthly ESG update for the M5 highway extension.</div>
      <div className="ai-msg bot">
        <span className="typing"><i></i><i></i><i></i></span>
      </div>
    </div>
  </div>
);

const DemoCredits = () => (
  <div className="demo-stage demo-credits">
    <div className="cr-head">
      <div className="cr-title">IS v2.1 · Environmental</div>
      <div className="cr-pill">24 credits</div>
    </div>
    <div className="cr-list">
      {[
        {id:'Ene-1', name:'Energy modelling', s:'on', p:92},
        {id:'Wat-2', name:'Water reduction',  s:'on', p:76},
        {id:'Mat-4', name:'Material selection', s:'behind', p:54},
        {id:'Eco-3', name:'Ecological value', s:'risk', p:28},
      ].map((c, i) => (
        <div key={c.id} className="cr-row" style={{animationDelay: `${0.1 * i}s`}}>
          <div className="cr-id">{c.id}</div>
          <div className="cr-name">{c.name}</div>
          <div className={`cr-bar ${c.s}`}><span style={{width: `${c.p}%`}}></span></div>
          <div className={`cr-status ${c.s}`}>
            {c.s === 'on' ? 'On track' : c.s === 'behind' ? 'Behind' : 'At risk'}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const DemoDocs = () => (
  <div className="demo-stage demo-docs">
    <div className="dc-head">
      <span>Evidence library</span>
      <span className="dc-count">348 files</span>
    </div>
    <div className="dc-grid">
      {Array.from({length: 8}).map((_, i) => (
        <div key={i} className="dc-tile" style={{animationDelay: `${i * 0.08}s`}}>
          <div className="dc-ic">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <path d="M14 2v6h6"/>
            </svg>
          </div>
          <div className="dc-lines">
            <span style={{width: `${60 + (i%3)*12}%`}}></span>
            <span style={{width: `${40 + (i%4)*10}%`}}></span>
          </div>
        </div>
      ))}
    </div>
    <div className="dc-scan">
      <span></span>
    </div>
  </div>
);

const DemoMap = () => (
  <div className="demo-stage demo-map">
    <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice" style={{width:'100%',height:'100%'}}>
      <rect width="320" height="200" fill="#091122"/>
      {/* grid lines */}
      <g stroke="rgba(255,255,255,0.04)" strokeWidth="1">
        {Array.from({length: 12}).map((_, i) => (
          <line key={`h${i}`} x1="0" y1={i * 18} x2="320" y2={i * 18}/>
        ))}
        {Array.from({length: 18}).map((_, i) => (
          <line key={`v${i}`} x1={i * 20} y1="0" x2={i * 20} y2="200"/>
        ))}
      </g>
      {/* abstract infra network */}
      <path d="M30,140 L100,120 L180,135 L260,100 L300,95" stroke="#02E3A7" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M40,60 L120,80 L200,60 L280,70" stroke="#2563EB" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M60,160 L150,170 L220,150 L290,160" stroke="rgba(139,92,246,0.7)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* pins */}
      {[{x:100,y:120,c:'#02E3A7'},{x:200,y:60,c:'#2563EB'},{x:260,y:100,c:'#02E3A7'},{x:150,y:170,c:'#F59E0B'},{x:40,y:60,c:'#2563EB'}].map((p, i) => (
        <g key={i} className="mp-pin" style={{transformOrigin: `${p.x}px ${p.y}px`, animationDelay: `${i * 0.3}s`}}>
          <circle cx={p.x} cy={p.y} r="12" fill={p.c} opacity="0.15"/>
          <circle cx={p.x} cy={p.y} r="6" fill={p.c} opacity="0.35"/>
          <circle cx={p.x} cy={p.y} r="3" fill={p.c}/>
        </g>
      ))}
    </svg>
    <div className="mp-chip">23 active projects · 7 countries</div>
  </div>
);

const DemoReport = () => (
  <div className="demo-stage demo-report">
    <div className="rp-pages">
      <div className="rp-page p1">
        <div className="rp-head"></div>
        <div className="rp-row"></div>
        <div className="rp-row short"></div>
        <div className="rp-row"></div>
        <div className="rp-chart"></div>
      </div>
      <div className="rp-page p2">
        <div className="rp-head"></div>
        <div className="rp-row"></div>
        <div className="rp-row short"></div>
        <div className="rp-img"></div>
      </div>
      <div className="rp-page p3">
        <div className="rp-head"></div>
        <div className="rp-row"></div>
        <div className="rp-row short"></div>
        <div className="rp-row"></div>
      </div>
    </div>
    <div className="rp-pdf-badge">Report.pdf · Generated</div>
  </div>
);

const DemoReel = () => {
  const items = [
    { type: 'video', src: 'assets/reports.mp4',      cat: 'AI · Reporting',  ttl: 'Reports drafted for you',      desc: 'A board pack or audit response in seconds — every claim cited from your evidence, on-brand.' },
    { type: 'video', src: 'assets/ai-assistant.mp4', cat: 'AI · Assistant',  ttl: 'Draft updates in seconds',     desc: 'Ask in plain language. Get monthly updates, audit answers, and summaries grounded in your evidence.' },
    { type: 'video', src: 'assets/energy.mp4',       cat: 'Live dashboard',  ttl: 'See every data point, live',   desc: 'All water, carbon, and material impact in a single live view — no spreadsheets.' },
    { type: 'mock',  comp: DemoCredits,              cat: 'Credit tracker',  ttl: 'IS rating progress at a glance', desc: 'Every credit, owner, and status — auto-scored against targets and deadlines.' },
    { type: 'video', src: 'assets/ai-report.mp4',    cat: 'Reporting module', ttl: 'Reports that write themselves', desc: 'Generate IS submissions, monthly updates, and audit responses in one click — branded, sourced, done.' },
    { type: 'mock',  comp: DemoDocs,                 cat: 'Evidence vault',  ttl: 'Evidence, auto-filed',         desc: 'Drop a PDF — our AI extracts, classifies, and links it to the right credit. No more folder archaeology.' },
  ];
  return (
    <div className="reel-grid">
      {items.map((it, i) => (
        <article key={i} className="reel-card" data-reveal>
          <div className="stage">
            {it.type === 'video' ?
              <video src={it.src} autoPlay muted loop playsInline preload="metadata" aria-label={it.ttl} /> :
              <it.comp />
            }
          </div>
          <div className="meta">
            <div className="cat">{it.cat}</div>
            <div className="ttl">{it.ttl}</div>
            <div className="desc">{it.desc}</div>
          </div>
        </article>
      ))}
    </div>
  );
};

Object.assign(window, { DemoReel });