// SCREEN 2 — Skill Path (hex-node tree)
function ScreenPath({ accent, accentDeep, onBack, onNodeTap }) {
  const nodes = [
    { id: 1, label: 'Dasar ChatGPT', status: 'done' },
    { id: 2, label: 'Prompt Dasar', status: 'done' },
    { id: 3, label: 'Output Format', status: 'done' },
    { id: 4, label: 'Prompt Patterns', status: 'done' },
    { id: 5, label: 'Persona Technique', status: 'current' },
    { id: 6, label: 'Content Generation', status: 'locked' },
    { id: 7, label: 'Iklan Copy', status: 'locked' },
    { id: 8, label: 'Riset Audience', status: 'locked' },
    { id: 9, label: 'A/B Test dgn AI', status: 'locked' },
    { id: 10, label: 'Otomasi Email', status: 'locked' },
    { id: 11, label: 'Zapier + AI', status: 'locked' },
    { id: 12, label: 'Certification', status: 'locked', boss: true },
  ];

  // zigzag positions — 3 columns
  const cols = [52, 140, 228];
  const positioned = nodes.map((n, i) => {
    const pattern = [1, 2, 1, 0, 1, 2, 1, 0, 1, 2, 1, 1]; // 0=left, 1=center, 2=right
    return { ...n, x: cols[pattern[i]], y: 30 + i * 86 };
  });

  const HexNode = ({ node }) => {
    const isCurrent = node.status === 'current';
    const isDone = node.status === 'done';
    const isLocked = node.status === 'locked';
    const isBoss = node.boss;

    const size = isBoss ? 72 : 62;
    const half = size / 2;

    let fill, stroke, iconColor, labelColor;
    if (isDone) {
      fill = accent; stroke = accentDeep; iconColor = '#0B0F14'; labelColor = '#EAEEF3';
    } else if (isCurrent) {
      fill = accent; stroke = accentDeep; iconColor = '#0B0F14'; labelColor = accent;
    } else {
      fill = '#1E2631'; stroke = '#2A3442'; iconColor = '#5A6472'; labelColor = '#5A6472';
    }

    return (
      <div
        onClick={() => !isLocked && onNodeTap(node)}
        style={{
          position: 'absolute',
          left: node.x - half, top: node.y - half,
          width: size, height: size,
          cursor: isLocked ? 'default' : 'pointer',
        }}
      >
        {/* pulse ring on current */}
        {isCurrent && <div className="pulse-ring" style={{
          position: 'absolute', inset: -8,
          borderRadius: '50%',
          border: `2px solid ${accent}`,
        }} />}
        {/* drop shadow under hex */}
        {!isLocked && (
          <div style={{
            position: 'absolute', top: 6, left: 0, right: 0, bottom: -6,
            background: accentDeep,
            clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
            opacity: 0.9,
          }} />
        )}
        {/* hex body */}
        <div style={{
          position: 'absolute', inset: 0,
          background: fill,
          clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
          border: isLocked ? `1px solid ${stroke}` : 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: iconColor,
        }}>
          {isDone && Icon.check(isBoss ? 30 : 26, iconColor)}
          {isCurrent && Icon.play(isBoss ? 28 : 24, iconColor)}
          {isLocked && !isBoss && Icon.lock(22, iconColor)}
          {isLocked && isBoss && Icon.trophy(28, iconColor)}
        </div>
        {/* inner highlight */}
        {!isLocked && (
          <div style={{
            position: 'absolute', inset: 0,
            clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
            background: `linear-gradient(180deg, rgba(255,255,255,0.25), transparent 50%)`,
            pointerEvents: 'none',
          }} />
        )}
        {/* label */}
        <div style={{
          position: 'absolute',
          top: size + 6,
          left: '50%', transform: 'translateX(-50%)',
          whiteSpace: 'nowrap',
          fontFamily: "'Inter', sans-serif",
          fontSize: 10, fontWeight: 600,
          color: labelColor,
          textAlign: 'center',
          lineHeight: 1.1,
        }}>{node.label}</div>
      </div>
    );
  };

  // Dotted connectors between nodes
  const connectors = [];
  for (let i = 0; i < positioned.length - 1; i++) {
    const a = positioned[i];
    const b = positioned[i + 1];
    connectors.push(
      <line
        key={i}
        x1={a.x} y1={a.y} x2={b.x} y2={b.y}
        stroke={i < 4 ? accentDeep : '#2A3442'}
        strokeWidth="2" strokeDasharray="3 5" strokeLinecap="round"
      />
    );
  }

  const totalHeight = positioned[positioned.length - 1].y + 100;

  const currentNode = positioned.find(n => n.status === 'current');

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      color: '#EAEEF3',
      fontFamily: "'Inter', sans-serif",
      overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: '12px 16px 14px',
        background: 'rgba(11,15,20,0.9)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        borderBottom: '1px solid rgba(255,255,255,0.04)',
        zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <button onClick={onBack} style={{
            width: 32, height: 32, borderRadius: 10,
            background: '#141A22', border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#EAEEF3', cursor: 'pointer', padding: 0,
          }}>{Icon.arrow_left(18, '#EAEEF3')}</button>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: "'Space Grotesk', sans-serif",
              fontSize: 15, fontWeight: 700, letterSpacing: -0.3, lineHeight: 1,
            }}>AI untuk Marketer</div>
            <div style={{ fontSize: 10, color: '#8A93A0', marginTop: 2 }}>
              4 dari 12 pelajaran selesai
            </div>
          </div>
          <div style={{
            fontFamily: "'Space Grotesk', sans-serif",
            fontSize: 14, fontWeight: 700, color: accent,
          }}>40%</div>
        </div>
        <div style={{
          height: 5, borderRadius: 4,
          background: 'rgba(255,255,255,0.06)', overflow: 'hidden',
        }}>
          <div style={{
            height: '100%', width: '40%',
            background: `linear-gradient(90deg, ${accentDeep}, ${accent})`,
            borderRadius: 4,
            boxShadow: `0 0 8px ${accent}88`,
          }} />
        </div>
      </div>

      {/* Path canvas — scrolls */}
      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', position: 'relative' }}>
        <div style={{
          position: 'relative',
          width: 280,
          height: totalHeight,
          margin: '0 auto',
        }}>
          {/* background glow behind path */}
          <div style={{
            position: 'absolute',
            left: 140 - 80, top: 0,
            width: 160, height: totalHeight,
            background: `radial-gradient(ellipse at center top, ${accent}12, transparent 60%)`,
            pointerEvents: 'none',
          }} />

          <svg width="280" height={totalHeight} style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
          }}>
            {connectors}
          </svg>

          {positioned.map(n => <HexNode key={n.id} node={n} />)}

          {/* Encouragement bubble under current node */}
          {currentNode && (
            <div style={{
              position: 'absolute',
              left: currentNode.x,
              top: currentNode.y + 56,
              transform: 'translateX(-50%)',
              background: '#1E2631',
              border: `1px solid ${accent}33`,
              borderRadius: 12,
              padding: '8px 12px',
              fontSize: 10.5,
              color: '#EAEEF3',
              whiteSpace: 'nowrap',
              boxShadow: `0 8px 20px rgba(0,0,0,0.5), 0 0 0 3px ${accent}11`,
              zIndex: 5,
            }}>
              {/* arrow */}
              <div style={{
                position: 'absolute', top: -5, left: '50%',
                transform: 'translateX(-50%) rotate(45deg)',
                width: 10, height: 10,
                background: '#1E2631',
                borderLeft: `1px solid ${accent}33`,
                borderTop: `1px solid ${accent}33`,
              }} />
              <span style={{ fontWeight: 600 }}>Tinggal 3 lesson lagi</span>
              <span style={{ color: '#8A93A0' }}> sampai unlock level berikutnya</span> 💪
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenPath });