const { useState: jUseState } = React;

/* zig-zag node positions on a 1200x720 viewBox */
const NODES = [
  { x: 70,    y: 560, side: "below" },
  { x: 210,   y: 470, side: "above" },
  { x: 345,   y: 545, side: "below" },
  { x: 480,   y: 395, side: "above" },
  { x: 615,   y: 470, side: "below" },
  { x: 750,   y: 320, side: "above" },
  { x: 885,   y: 395, side: "below" },
  { x: 1020,  y: 220, side: "above" },
  { x: 1140,  y: 145, side: "below" },
];

function monthLabel(m){ return m[0]===m[1] ? `Month ${m[0]}` : `Month ${m[0]}–${m[1]}`; }
function firstSentence(s){ const i = s.indexOf("."); return i>0 ? s.slice(0,i+1) : s; }

function Journey(){
  const [active, setActive] = jUseState(3);
  const phases = window.PHASES;
  const linePath = NODES.map((n,i)=>`${i===0?"M":"L"}${n.x} ${n.y}`).join(" ");

  return (
    <div className="journey-inner">
      <div className="s-head reveal">
        <span className="eyebrow" style={{color:"var(--yellow-l)"}}><span className="bar" style={{background:"linear-gradient(135deg,#FFBA00,#FFD356)"}}></span>Section 03 · The journey</span>
        <h2 style={{color:"#fff"}}>The High-Flyer <em style={{fontFamily:"var(--serif)",fontWeight:400,color:"rgba(255,255,255,.85)"}}>Program Journey.</em></h2>
        <p>A 12-month program: 3 months preparation and selection, 1 month onboarding, 6 months OJT, and 1 month final project — followed by placement. Enough time for repeated real delivery and feedback.</p>
      </div>

      <div className="zz-stage">
        <svg className="zz-svg" viewBox="0 0 1200 720" preserveAspectRatio="xMidYMid meet">
          <defs>
            <linearGradient id="zz-grad" x1="0" y1="1" x2="1" y2="0">
              <stop offset="0" stopColor="#0EA34A" stopOpacity=".9"/>
              <stop offset=".55" stopColor="#246BB2"/>
              <stop offset="1" stopColor="#FFBA00"/>
            </linearGradient>
            <radialGradient id="zz-glow" cx=".5" cy=".5" r=".5">
              <stop offset="0" stopColor="#FFBA00" stopOpacity=".55"/>
              <stop offset="1" stopColor="#FFBA00" stopOpacity="0"/>
            </radialGradient>
          </defs>

          {/* dashed bg line */}
          <path d={linePath} fill="none" stroke="rgba(255,255,255,.16)" strokeWidth="1.4" strokeDasharray="2 7"/>
          {/* live gradient line */}
          <path d={linePath} fill="none" stroke="url(#zz-grad)" strokeWidth="2.4" strokeLinecap="round" opacity=".9"/>

          {/* active glow */}
          <ellipse cx={NODES[active].x} cy={NODES[active].y} rx="44" ry="44" fill="url(#zz-glow)"/>

          {NODES.map((n,i)=>{
            const isA = i===active;
            return (
              <g key={i} onClick={()=>setActive(i)} style={{cursor:"pointer"}}>
                <circle cx={n.x} cy={n.y} r="34" fill="transparent"/>
                <circle cx={n.x} cy={n.y} r={isA?22:18}
                        fill="#0B1220" stroke={isA?"#FFBA00":"rgba(255,255,255,.6)"}
                        strokeWidth={isA?2.5:1.3}
                        style={{transition:"all .3s cubic-bezier(.2,.8,.2,1)"}}/>
                <text x={n.x} y={n.y+1} textAnchor="middle" dominantBaseline="central"
                      fontSize={isA?13:12} fontWeight="600" fontFamily="Open Sans Condensed"
                      fill={isA?"#FFBA00":"#fff"}>{i}</text>
              </g>
            );
          })}
        </svg>

        {NODES.map((n,i)=>{
          const p = phases[i];
          const isA = i===active;
          const labelTop = n.side === "above" ? n.y - 96 : n.y + 26;
          const cardTop  = n.side === "above" ? n.y - 215 : n.y + 96;
          return (
            <React.Fragment key={i}>
              <div className={`zz-label ${isA?"active":""}`}
                   style={{ left:`${(n.x/1200)*100}%`, top:`${(labelTop/720)*100}%` }}
                   onClick={()=>setActive(i)}>
                <div className="zz-phase">PHASE {i}</div>
                <div className="zz-name">{p.name}</div>
                <div className="zz-month">{monthLabel(p.m)}</div>
              </div>
              <div className={`zz-card ${isA?"active":""}`}
                   style={{ left:`${(n.x/1200)*100}%`, top:`${(cardTop/720)*100}%` }}
                   onClick={()=>setActive(i)}>
                {firstSentence(p.desc)}
              </div>
            </React.Fragment>
          );
        })}
      </div>

      <div className="zz-foot">
        <div className="zz-foot-l">
          <div className="eyebrow" style={{color:"rgba(255,255,255,.55)"}}><span className="bar" style={{background:"#FFBA00"}}></span>Phase {active} · selected</div>
          <div className="zz-foot-title">{phases[active].name}</div>
          <p className="zz-foot-desc">{phases[active].desc}</p>
          <div className="phase-arts">
            {phases[active].arts.map((a,i)=>(<span key={i} className="phase-art">{a}</span>))}
          </div>
        </div>
        <div className="zz-foot-r">
          <button className="zz-btn" disabled={active===0} onClick={()=>setActive(Math.max(0,active-1))}>← Previous</button>
          <div className="zz-counter"><b>{String(active+1).padStart(2,"0")}</b> / 09</div>
          <button className="zz-btn primary" disabled={active===8} onClick={()=>setActive(Math.min(8,active+1))}>Next →</button>
        </div>
      </div>
    </div>
  );
}

const jel = document.getElementById("journey-root");
if(jel){ ReactDOM.createRoot(jel).render(<Journey/>); }