import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';

function Stage({ label, value, sub, accent, to }) {
  const body = (
    <div className="text-center sm:text-left">
      <div className="text-[11px] font-medium uppercase tracking-wider text-[#94A3B8]">{label}</div>
      <div className={`text-[20px] sm:text-[26px] font-semibold mt-1 tracking-tight ${accent ? 'text-[#0A39DF]' : 'text-[#0F172A]'}`}>
        {value}
      </div>
      {sub && <div className="text-[13px] text-[#64748B] mt-0.5">{sub}</div>}
    </div>
  );
  return to ? (
    <Link to={to} className="hover:opacity-80 transition-opacity">{body}</Link>
  ) : body;
}

export default function CareerTrajectory({ profile, nextPath, nextReady, futureRole, futureIncome }) {
  const current = profile?.current_position || profile?.desired_position || 'Starting Out';
  const next = nextPath?.target_role || nextPath?.name || 'Next Role';
  return (
    <section className="text-center pt-4 pb-12 sm:pt-8 sm:pb-20">
      <span className="text-[12px] font-medium tracking-wide text-[#0A39DF] uppercase">Your Career</span>
      <h1 className="text-[32px] sm:text-[44px] font-bold tracking-tight text-[#0F172A] mt-4 leading-[1.05]">
        Everything revolves around your future.
      </h1>
      <p className="text-[15px] text-[#64748B] mt-4 max-w-sm mx-auto">
        Not a university. A Career Acceleration Engine.
      </p>

      <div className="mt-12 sm:mt-16 flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-10">
        <Stage label="Current" value={current} />
        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
        <Stage label="Next Role" value={next} sub={`${nextReady}% ready`} accent to={nextPath ? '/university' : null} />
        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
        <Stage label="Future" value={futureRole} sub={futureIncome || ' '} />
      </div>
    </section>
  );
}