// Capability Rich Map — show all 8 domains + all skills at once.
// No clicks, no modal. The whole picture at a glance, like a constellation.

function CapabilityWheel() {
  const caps = window.CAPABILITIES;
  const N = caps.length;             // 8
  const SIZE = 1100;                 // SVG viewBox
  const cx = SIZE/2, cy = SIZE/2;
  const rCore   = 110;               // inner "Wealth Advisor" disc
  const rWedge  = 230;               // domain wedge outer
  const rSkillsIn  = 295;            // inner skill ring
  const rSkillsOut = 440;            // outer skill ring
  const rArc    = 510;               // arc text label radius
  const sweep   = 360 / N;           // 45°
  const gap     = 1.6;               // wedge gap (deg)

  // Pre-flatten all skills with their absolute angle so we can assign a
  // strictly-alternating radius per global index. This guarantees adjacent
  // skills (within a wedge AND across wedge boundaries) never share a radius.
  const flatSkills = [];
  caps.forEach((c, i) => {
    const M = c.skills.length;
    const wedgeStart = i * sweep + gap/2 + 1.6;
    const wedgeEnd   = (i+1) * sweep - gap/2 - 1.6;
    const range = wedgeEnd - wedgeStart;
    c.skills.forEach((s, k) => {
      const t = M === 1 ? 0.5 : (k + 0.5) / M;
      const ang = wedgeStart + t * range;
      flatSkills.push({ cap: c, skill: s, ang, idx: flatSkills.length });
    });
  });

  function deg2xy(angDeg, r) {
    const a = (angDeg - 90) * Math.PI / 180;
    return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
  }
  function wedgePath(startDeg, endDeg, rOut, rIn) {
    const p1 = deg2xy(startDeg, rOut);
    const p2 = deg2xy(endDeg,   rOut);
    const p3 = deg2xy(endDeg,   rIn);
    const p4 = deg2xy(startDeg, rIn);
    const large = (endDeg - startDeg) > 180 ? 1 : 0;
    return `M ${p1.x} ${p1.y} A ${rOut} ${rOut} 0 ${large} 1 ${p2.x} ${p2.y} L ${p3.x} ${p3.y} A ${rIn} ${rIn} 0 ${large} 0 ${p4.x} ${p4.y} Z`;
  }
  // path along an arc — for arc text labels
  function arcPath(startDeg, endDeg, r) {
    const p1 = deg2xy(startDeg, r);
    const p2 = deg2xy(endDeg, r);
    const large = (endDeg - startDeg) > 180 ? 1 : 0;
    return `M ${p1.x} ${p1.y} A ${r} ${r} 0 ${large} 1 ${p2.x} ${p2.y}`;
  }

  return (
    <section className="caprich-section" id="capabilities">
      <div className="caprich-bg-aurora"></div>

      <div className="wrap" style={{position:'relative', zIndex:3}}>
        <div className="section-head section-head--center" style={{textAlign:'center'}}>
          <p className="eyebrow-strong" style={{color:'#FFBA00', justifyContent:'center'}}>05 · CAPABILITY MAP</p>
          <h2 className="headline-lg" style={{color:'#fff'}}>
            One advisor. <span style={{color:'rgba(255,255,255,0.55)'}}>Eight domains.</span><br/>
            Forty observable skills.
          </h2>
          <p className="lede" style={{marginTop:20, color:'rgba(255,255,255,0.72)', marginLeft:'auto', marginRight:'auto'}}>
            Each domain has its own competency anchors and rubric. Every skill is observable, coachable, and scored consistently across teams and regions.
          </p>
        </div>
      </div>

      <div className="caprich-stage">
        {/* Background image-slot — faint, framed inside the wheel */}
        <div className="caprich-bg-image">
          <image-slot
            id="caprich-bg"
            shape="circle"
            fit="cover"
            placeholder="Drop client / advisor photo"
            style={{position:'absolute', inset:0, width:'100%', height:'100%'}}
          ></image-slot>
        </div>
        <div className="caprich-bg-tint"></div>

        <svg viewBox={`0 0 ${SIZE} ${SIZE}`} className="caprich-svg">
          <defs>
            {caps.map(c => (
              <radialGradient key={c.id} id={'cap-g-'+c.id} cx="0.5" cy="0.5" r="0.7">
                <stop offset="0%"   stopColor={c.color} stopOpacity="0.92"/>
                <stop offset="100%" stopColor={c.color} stopOpacity="0.72"/>
              </radialGradient>
            ))}
            <radialGradient id="caprich-core" cx="0.3" cy="0.3" r="0.9">
              <stop offset="0%"  stopColor="#ffffff"/>
              <stop offset="60%" stopColor="#f6f9fb"/>
              <stop offset="100%" stopColor="#dde7ec"/>
            </radialGradient>
            <filter id="cap-glow" x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="6" result="b"/>
              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
          </defs>

          {/* faint guide rings — slow counter-rotation for depth */}
          <g>
            <circle cx={cx} cy={cy} r={rWedge + 12} fill="none" stroke="rgba(255,255,255,0.10)" strokeDasharray="2 6"/>
            <circle cx={cx} cy={cy} r={rSkillsIn - 10} fill="none" stroke="rgba(255,255,255,0.06)" strokeDasharray="2 8"/>
            <circle cx={cx} cy={cy} r={rSkillsOut + 10} fill="none" stroke="rgba(255,255,255,0.05)" strokeDasharray="2 10"/>
            <circle cx={cx} cy={cy} r={rArc} fill="none" stroke="rgba(255,255,255,0.10)"/>
            <animateTransform attributeName="transform" type="rotate"
              from={`360 ${cx} ${cy}`} to={`0 ${cx} ${cy}`}
              dur="180s" repeatCount="indefinite"/>
          </g>

          {/* arc-text band labels — slow orbit, elegant rotation */}
          <g>
            {[
              { from: -22.5,  to: 112.5,  text: 'AMBIZ  LADDER  ·  AMBIZ  LADDER  ·' , id: 'arc-ladder' },
              { from: 112.5,  to: 247.5,  text: 'SCALE  &  CONTROL  ·  SCALE  &  CONTROL  ·' , id: 'arc-scale' },
              { from: 247.5,  to: 337.5,  text: 'STANDARD  OF  EXCELLENCE  ·' , id: 'arc-standard' },
            ].map(a => (
              <g key={a.id}>
                <path id={a.id} d={arcPath(a.from, a.to, rArc)} fill="none"/>
                <text fill="rgba(255,255,255,0.55)" fontSize="14" fontWeight="700"
                  style={{letterSpacing:'0.36em'}}>
                  <textPath href={'#'+a.id} startOffset="2%">{a.text}</textPath>
                </text>
              </g>
            ))}
            <animateTransform attributeName="transform" type="rotate"
              from={`0 ${cx} ${cy}`} to={`360 ${cx} ${cy}`}
              dur="120s" repeatCount="indefinite"/>
          </g>

          {/* 8 wedges — each capability */}
          {caps.map((c, i) => {
            const start = i * sweep + gap/2;
            const end   = (i+1) * sweep - gap/2;
            const mid   = (start + end) / 2;
            const labelR = (140 + rWedge) / 2 + 10;
            const lp = deg2xy(mid, labelR);
            // Multi-line title — short label up top, then a thin divider
            const lines = c.name.split(' ');
            // group words into 2 lines roughly
            const half = Math.ceil(lines.length / 2);
            const line1 = lines.slice(0, half).join(' ');
            const line2 = lines.slice(half).join(' ');
            return (
              <g key={c.id} className="caprich-wedge" style={{ '--wedge-delay': `${-i * 2}s` }}>
                <path
                  className="caprich-wedge-path"
                  d={wedgePath(start, end, rWedge, rCore + 6)}
                  fill={'url(#cap-g-'+c.id+')'}
                  stroke="rgba(255,255,255,0.18)"
                  strokeWidth="1"
                />
                {/* tick line out toward skills */}
                {(() => {
                  const a1 = deg2xy(mid, rWedge + 6);
                  const a2 = deg2xy(mid, rSkillsIn - 50);
                  return <line x1={a1.x} y1={a1.y} x2={a2.x} y2={a2.y} stroke="rgba(255,255,255,0.18)" strokeDasharray="3 3" strokeWidth="1"/>;
                })()}
                <text
                  x={lp.x} y={lp.y - 8}
                  textAnchor="middle" fill="#fff"
                  fontSize="13" fontWeight="700"
                  style={{letterSpacing:'-0.005em', textShadow:'0 1px 2px rgba(0,0,0,0.35)'}}>
                  <tspan x={lp.x} dy="0">{line1}</tspan>
                  <tspan x={lp.x} dy="15">{line2}</tspan>
                </text>
              </g>
            );
          })}

          {/* Core circle — gently breathing */}
          <g className="caprich-core-group" style={{ transformOrigin: `${cx}px ${cy}px` }}>
            <circle cx={cx} cy={cy} r={rCore + 8} fill="rgba(255,255,255,0.06)" className="caprich-core-halo"/>
            <circle cx={cx} cy={cy} r={rCore} fill="url(#caprich-core)" stroke="rgba(15,23,42,0.18)"/>
            <circle cx={cx} cy={cy} r={rCore - 10} fill="none" stroke="rgba(15,23,42,0.08)"/>
            <text x={cx} y={cy - 14} textAnchor="middle" fontSize="11" fontWeight="700"
              fill="#475569" style={{letterSpacing:'0.20em'}}>THE STANDARD</text>
            <text x={cx} y={cy + 12} textAnchor="middle" fontSize="24" fontWeight="700"
              fill="#0f172a" style={{letterSpacing:'-0.02em'}}>Wealth</text>
            <text x={cx} y={cy + 38} textAnchor="middle" fontSize="24" fontWeight="700"
              fill="#0f172a" style={{letterSpacing:'-0.02em'}}>Advisor</text>
          </g>
        </svg>

        {/* HTML skill labels — flat list with strictly-alternating radii by global index.
            Guarantees no two adjacent labels share a radius slot, eliminating
            wedge-boundary collisions. */}
        {flatSkills.map(({ cap: c, skill: s, ang, idx }) => {
          const r = (idx % 2 === 0) ? rSkillsIn : rSkillsOut;
          const pos = deg2xy(ang, r);
          const pctX = (pos.x / SIZE) * 100;
          const pctY = (pos.y / SIZE) * 100;
          const normalized = ((ang % 360) + 360) % 360;
          const leftHalf = normalized > 180;
          return (
            <div
              key={c.id+'-'+idx}
              className="caprich-skill"
              data-side={leftHalf ? 'right' : 'left'}
              style={{
                left: pctX + '%',
                top: pctY + '%',
                '--accent': c.color,
              }}
            >
              <span className="caprich-skill-dot" style={{ background: c.color, animationDelay: `${(idx * 0.31) % 4.2}s` }}></span>
              <span className="caprich-skill-text">{s}</span>
            </div>
          );
        })}
      </div>

      {/* Legend strip — total at a glance */}
      <div className="wrap" style={{position:'relative', zIndex:3, marginTop:32}}>
        <div className="caprich-legend">
          {caps.map((c, i) => (
            <div key={c.id} className="caprich-legend-item">
              <span className="caprich-legend-dot" style={{background:c.color}}></span>
              <span className="caprich-legend-num">0{i+1}</span>
              <span className="caprich-legend-name">{c.short}</span>
              <span className="caprich-legend-count">{c.skills.length} skills</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CapabilityWheel = CapabilityWheel;