/* hermon-hero-pipeline.jsx — animated client journey: first opt-in → client success
   globals: Icon, Avatar */

const PIPE = [
  { ic:"users",    t:"Opt-in",         tool:"Meta Ads · DM",     c:"#0A77F2", card:"Opted in",          zone:"acquire" },
  { ic:"calendar", t:"Call booked",     tool:"Calendly",          c:"#0A6CFF", card:"Call booked · 2:00", zone:"acquire" },
  { ic:"contract", t:"Signed",          tool:"eSignatures",       c:"#1F9D6B", card:"Contract signed",    zone:"acquire" },
  { ic:"card",     t:"Paid",            tool:"Stripe · Mollie",   c:"#635BFF", card:"€12,500 cleared",    zone:"acquire" },
  { ic:"flag",     t:"Onboarding",      tool:"Kickoff & tasks",   c:"#7C5CFF", card:"Onboarding started", zone:"deliver" },
  { ic:"trophy",   t:"Client success",  tool:"Results · Renewal", c:"#1F9D6B", card:"Delivered · 5.0 ★",   zone:"deliver" },
];
const PN = PIPE.length;
const CLIENT = "Amara Khan";

function PipelineStage() {
  const reduce = typeof window !== "undefined" && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [active, setActive] = React.useState(reduce ? PN - 1 : -1);
  const [noAnim, setNoAnim] = React.useState(false);

  React.useEffect(()=>{
    if (reduce) return;
    let i = 0, t;
    const step = ()=>{
      setNoAnim(false);
      setActive(i);
      i++;
      if (i < PN) { t = setTimeout(step, 1250); }
      else {
        t = setTimeout(()=>{
          setNoAnim(true);
          setActive(-1);
          i = 0;
          t = setTimeout(step, 480);
        }, 2600);
      }
    };
    t = setTimeout(step, 520);
    return ()=> clearTimeout(t);
  }, []);

  const pct = active <= 0 ? 0 : (active / (PN - 1)) * 100;
  const cur = active >= 0 ? PIPE[active] : null;

  return (
    <div className="pipe-stage reveal" data-d="3">
      <div className="cjpipe">
        <div className="pipe__zones">
          <div className="pz pz--acquire"><span>Acquire</span></div>
          <div className="pz pz--deliver"><span>Deliver</span><span className="pz__new">New</span></div>
        </div>

        <div className="pipe__track">
          <div className="pipe__rail">
            <div className={"pipe__fill"+(noAnim?" no-anim":"")} style={{ width: pct + "%" }}></div>
            <div className={"pipe__client"+(noAnim?" no-anim":"")+(active<0?" hide":"")} style={{ left: pct + "%" }}>
              <div className="pclient__card">
                <Avatar name={CLIENT} hue={324} className="pclient__av"/>
                <div className="pclient__txt">
                  <div className="pclient__nm">{CLIENT}</div>
                  <div className="pclient__st">{cur ? cur.card : "Opted in"}</div>
                </div>
              </div>
              <span className="pclient__stem"></span>
            </div>
          </div>

          <div className="pipe__nodes">
            {PIPE.map((s,i)=>{ const Ic = Icon[s.ic] || Icon.zap;
              const lit = i <= active;
              return (
                <div className={"pnode"+(lit?" lit":"")+(s.zone==="deliver"?" deliver":"")} key={i}>
                  <div className="pnode__dot" style={lit?{background:s.c, borderColor:s.c}:undefined}><Ic width={24} height={24}/></div>
                  <div className="pnode__t">{s.t}</div>
                  <div className="pnode__tool"><span className="d" style={{background:s.c}}></span>{s.tool}</div>
                </div>
              );})}
          </div>
        </div>

        <div className="pipe__cap">
          <span className="pipe__capdot"></span>
          One connected record — from the first opt-in to a renewed, successful client.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PipelineStage });