// Realistic SaaS-style dashboard mockup — "Advisory Readiness Center"
// Shows learner cohort readiness, gamification leaderboard, ladder progress.

function DashboardMockup() {
  // Animated KPI counters
  const targets = { ready: 78, ladder: 4.6, drills: 312, conduct: 0 };
  const [kpi, setKpi] = React.useState({ ready: 0, ladder: 0, drills: 0, conduct: 0 });

  React.useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        const start = performance.now();
        const dur = 1200;
        function frame(now) {
          const t = Math.min(1, (now - start) / dur);
          const ease = 1 - Math.pow(1 - t, 3);
          setKpi({
            ready:   Math.round(targets.ready * ease),
            ladder:  +(targets.ladder * ease).toFixed(1),
            drills:  Math.round(targets.drills * ease),
            conduct: targets.conduct,
          });
          if (t < 1) requestAnimationFrame(frame);
        }
        requestAnimationFrame(frame);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    const el = document.getElementById('dashboard-frame');
    if (el) obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Readiness rings data — 7 ladder rungs
  const readiness = [
    { lbl: 'Pre-Read',    pct: 100 },
    { lbl: 'Case',        pct: 96 },
    { lbl: 'Simulation',  pct: 88 },
    { lbl: 'Mimicking',   pct: 74 },
    { lbl: 'Shadow',      pct: 62 },
    { lbl: 'Supervise',   pct: 48 },
    { lbl: 'Independent', pct: 31 },
  ];

  // Leaderboard
  const lb = [
    { name: 'Maria S.',    sub: 'Private Banking · Jakarta',   score: 92.4, delta: '+8.6', top: true },
    { name: 'Daniel R.',   sub: 'Wealth Advisory · Surabaya',  score: 89.7, delta: '+5.2', top: true },
    { name: 'Aisyah N.',   sub: 'Securities · Bandung',        score: 86.1, delta: '+7.0' },
    { name: 'Henry P.',    sub: 'Insurance · Medan',           score: 83.3, delta: '+3.4' },
    { name: 'Rina T.',     sub: 'Private Banking · Jakarta',   score: 79.8, delta: '+4.9' },
  ];

  // Capability mastery
  const mastery = [
    { lbl: 'Finance',     pct: 84 },
    { lbl: 'Business',    pct: 76 },
    { lbl: 'Macro',       pct: 68 },
    { lbl: 'Products',    pct: 81 },
    { lbl: 'Value',       pct: 72 },
    { lbl: 'Acquisition', pct: 65 },
    { lbl: 'Reactivation',pct: 58 },
    { lbl: 'Execution',   pct: 79 },
  ];

  return (
    <section className="section dashboard-section" id="dashboard">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow-strong">07 · ADVISORY READINESS CENTER</p>
          <h2 className="headline-lg" style={{color:'#fff'}}>
            Track readiness before it reaches the client.
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Every drill, score, and supervised case rolls into one operational view. Managers see who is ready, who needs another rung, and what to coach next — without waiting for the post-mortem.
          </p>
        </div>

        <div className="dashboard-frame" id="dashboard-frame">
          <div className="dashboard-window">
            {/* Title bar */}
            <div className="dashboard-titlebar">
              <span className="dashboard-dot" style={{background:'#ff5f57'}}></span>
              <span className="dashboard-dot" style={{background:'#febc2e'}}></span>
              <span className="dashboard-dot" style={{background:'#28c840'}}></span>
              <span className="dashboard-url">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <rect x="3" y="11" width="18" height="11" rx="2"/>
                  <path d="M7 11V7a5 5 0 0110 0v4"/>
                </svg>
                metrix.ambiz.com / wealth-advisory · cohort-2026-A
              </span>
            </div>

            <div className="dashboard-body">
              {/* Sidebar */}
              <aside className="dash-side">
                <div className="dash-side-logo">
                  <img src="/bwa/assets/ambiz-new-logo.png" alt="AMBIZ"/>
                </div>
                <div className="dash-side-label">Cohort</div>
                <div className="dash-nav-item dash-nav-item--active">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                  </span>
                  Readiness Overview
                </div>
                <div className="dash-nav-item">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                  </span>
                  Ladder Progress
                </div>
                <div className="dash-nav-item">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                  </span>
                  Learners
                </div>
                <div className="dash-nav-item">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                  </span>
                  Capabilities
                </div>
                <div className="dash-nav-item">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
                  </span>
                  Leaderboard
                </div>
                <div className="dash-nav-item">
                  <span className="dash-nav-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H2a2 2 0 110-4h.09A1.65 1.65 0 004.6 8a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V2a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H22a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
                  </span>
                  Reports
                </div>

                <div className="dash-side-label">Cohort Status</div>
                <div style={{padding:'8px 10px'}}>
                  <div style={{fontSize:12, fontWeight:700, marginBottom:6}}>2026-A Wealth</div>
                  <div style={{fontSize:11, color:'var(--ambiz-text-dim)', marginBottom:10}}>Week 6 of 9</div>
                  <div className="dash-progress-bar">
                    <div className="dash-progress-fill" style={{width:'66%'}}></div>
                  </div>
                </div>
              </aside>

              {/* Main */}
              <div className="dash-main">
                <div className="dash-top">
                  <div>
                    <div className="dash-top-title">Readiness Overview</div>
                    <div className="dash-top-sub">42 advisors · 8 capabilities · 7 rungs · live</div>
                  </div>
                  <div className="dash-top-actions">
                    <span className="dash-pill">Last sync 3 min</span>
                    <span className="dash-cta">Export Report</span>
                  </div>
                </div>

                <div className="dash-kpis">
                  <div className="dash-kpi">
                    <div className="dash-kpi-lbl">Cohort Readiness</div>
                    <div className="dash-kpi-num">{kpi.ready}<span style={{fontSize:'0.5em', fontWeight:600, color:'var(--ambiz-text-dim)'}}>%</span></div>
                    <div className="dash-kpi-delta up">▲ +6.2 wk</div>
                  </div>
                  <div className="dash-kpi">
                    <div className="dash-kpi-lbl">Avg. Ladder Rung</div>
                    <div className="dash-kpi-num">{kpi.ladder}<span style={{fontSize:'0.5em', fontWeight:600, color:'var(--ambiz-text-dim)'}}>/6</span></div>
                    <div className="dash-kpi-delta up">▲ +0.8 wk</div>
                  </div>
                  <div className="dash-kpi">
                    <div className="dash-kpi-lbl">Drills Logged</div>
                    <div className="dash-kpi-num">{kpi.drills}</div>
                    <div className="dash-kpi-delta up">▲ +48 wk</div>
                  </div>
                  <div className="dash-kpi">
                    <div className="dash-kpi-lbl">Conduct Flags</div>
                    <div className="dash-kpi-num">{kpi.conduct}</div>
                    <div className="dash-kpi-delta" style={{color:'var(--ambiz-text-dim)'}}>—</div>
                  </div>
                </div>

                <div className="dash-grid">
                  {/* Readiness rings */}
                  <div className="dash-card">
                    <div className="dash-card-head">
                      <div>
                        <div className="dash-card-title">Ladder Readiness</div>
                        <div className="dash-card-sub">Share of cohort that has cleared each rung</div>
                      </div>
                      <span className="dash-pill">Week 6</span>
                    </div>
                    <div className="dash-readiness">
                      {readiness.map(r => (
                        <div key={r.lbl} className="dash-readiness-cell">
                          <div className="dash-readiness-ring">
                            <Ring pct={r.pct} />
                          </div>
                          <div className="dash-readiness-pct">{r.pct}%</div>
                          <div className="dash-readiness-lbl">{r.lbl}</div>
                        </div>
                      ))}
                    </div>

                    <div style={{marginTop:18, paddingTop:14, borderTop:'1px solid rgba(15,23,42,0.04)'}}>
                      <div className="dash-card-head" style={{marginBottom:8}}>
                        <div className="dash-card-title" style={{fontSize:12}}>Capability Mastery</div>
                        <div className="dash-card-sub" style={{fontSize:10}}>Avg score</div>
                      </div>
                      {mastery.map(m => (
                        <div key={m.lbl} className="dash-progress-row">
                          <div style={{fontSize:11, fontWeight:600}}>{m.lbl}</div>
                          <div className="dash-progress-bar"><div className="dash-progress-fill" style={{width:m.pct+'%'}}></div></div>
                          <div className="dash-progress-pct">{m.pct}</div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Leaderboard */}
                  <div className="dash-card">
                    <div className="dash-card-head">
                      <div>
                        <div className="dash-card-title">Top Performers</div>
                        <div className="dash-card-sub">Composite score · drills + supervised + independent</div>
                      </div>
                      <span className="dash-pill">Cohort 2026-A</span>
                    </div>
                    <div className="dash-leaderboard">
                      {lb.map((p, i) => {
                        const avatarColors = ['#0D903A','#1A549F','#246BB2','#057430','#19519C'];
                        return (
                          <div key={p.name} className={'dash-lb-row' + (p.top ? ' dash-lb-row--top' : '')}>
                            <div className="dash-lb-rank">#{i+1}</div>
                            <div style={{display:'flex', gap:8, alignItems:'center'}}>
                              <div className="dash-avatar" style={{background:avatarColors[i % avatarColors.length]}}>
                                {p.name.split(' ').map(n=>n[0]).join('')}
                              </div>
                              <div>
                                <div className="dash-lb-name">{p.name}</div>
                                <div className="dash-lb-sub">{p.sub}</div>
                              </div>
                            </div>
                            <div className="dash-lb-score">{p.score}</div>
                            <div style={{fontSize:10, fontWeight:700, color:'var(--ok-text)'}}>{p.delta}</div>
                          </div>
                        );
                      })}
                    </div>

                    <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid rgba(15,23,42,0.04)'}}>
                      <div className="dash-card-head" style={{marginBottom:10}}>
                        <div className="dash-card-title" style={{fontSize:12}}>Live Gamification</div>
                        <div className="dash-card-sub" style={{fontSize:10}}>This week</div>
                      </div>
                      <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                        <Badge label="Roleplay streak" value="14 days" tint="#0D903A" />
                        <Badge label="Case streak"     value="8 days"  tint="#1A549F" />
                        <Badge label="Shadow reviews"  value="62"      tint="#246BB2" />
                        <Badge label="Mentor praise"   value="29"      tint="#FFBA00" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="macbook-base">
            <div className="macbook-notch"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ring({ pct }) {
  const r = 16, c = 2 * Math.PI * r;
  const offset = c - (pct / 100) * c;
  return (
    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle cx="20" cy="20" r={r} fill="none" stroke="rgba(15,23,42,0.08)" strokeWidth="3.5"/>
      <circle cx="20" cy="20" r={r} fill="none" stroke="url(#ring-grad)" strokeWidth="3.5" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={offset}
        transform="rotate(-90 20 20)"
      />
      <defs>
        <linearGradient id="ring-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#0D903A"/>
          <stop offset="100%" stopColor="#1A549F"/>
        </linearGradient>
      </defs>
    </svg>
  );
}

function Badge({ label, value, tint }) {
  return (
    <div style={{
      padding: '8px 12px',
      borderRadius: 10,
      background: tint + '12',
      border: '1px solid ' + tint + '30',
      minWidth: 110,
    }}>
      <div style={{fontSize:10, fontWeight:600, color:'var(--ambiz-text-dim)', textTransform:'uppercase', letterSpacing:'0.06em'}}>{label}</div>
      <div style={{fontSize:14, fontWeight:700, color: tint, marginTop:2}}>{value}</div>
    </div>
  );
}

window.DashboardMockup = DashboardMockup;
