// Experience — week-by-week onboarding timeline. Sticky pinned, synced media.

function Experience() {
  const outerRef = React.useRef(null);
  const p = usePinnedProgress(outerRef);

  const steps = [
    { n: "01", t: "The Conversation", tag: "15-min call · no pitch",
      img: "assets/experience/01-conversation.jpg",
      d: "15-minute video call. Not a sales pitch. We want to know where you are, what's frustrating you, what you've tried. We'll tell you honestly whether we can help.",
      accent: true },
    { n: "02", t: "Week 1 — Strategy & Setup", tag: "Audit + Dashboard Live",
      img: "assets/experience/02-strategy.jpg",
      d: "Deep dive into your page, audience, and niche. Custom strategy built for you — not a template. Profile audit. Your creator dashboard goes live on day one." },
    { n: "03", t: "Week 2 — Team Training", tag: "Chat + Social Trained",
      img: "assets/experience/03-team-training.jpg",
      d: "Chat team assigned and trained on your voice. Social accounts connected. First inspo feed built. Posting schedule set around when your audience is actually online." },
    { n: "04", t: "Week 3 — Full Launch", tag: "Everything Live",
      img: "assets/experience/04-launch.jpg",
      d: "Everything goes live — chatting, posting, outreach, traffic campaigns. Your account manager is monitoring daily." },
    { n: "05", t: "Week 4 — Strategy Call", tag: "Real numbers, real talk",
      img: "assets/experience/05-recap.jpg",
      d: "Full recap of month one. Real numbers, real talk. What worked, what didn't, what we're adjusting for month two.",
      accent: true },
  ];
  const active = Math.min(steps.length - 1, Math.floor(p * steps.length * 0.98));

  return (
    <section id="experience" className="relative" data-screen-label="Experience">
      <div ref={outerRef} style={{ height: `${steps.length * 80}vh` }}>
        <div className="sticky top-0 h-screen overflow-hidden flex items-center">
          <div className="max-w-[1600px] mx-auto px-6 md:px-10 w-full grid grid-cols-12 gap-10 items-center">
            <div className="col-span-12 md:col-span-6 relative">
              <div className="relative aspect-[4/5] max-h-[72vh] rounded-[4px] overflow-hidden border border-white/[0.06]">
                {steps.map((s, i) => (
                  <img key={s.n} src={s.img} alt={s.t}
                    className="absolute inset-0 w-full h-full object-cover transition-opacity duration-700"
                    style={{ opacity: i === active ? 1 : 0 }} />
                ))}
                {/* gradient bottom overlay so caption stays readable */}
                <div className="absolute inset-0 pointer-events-none" style={{
                  background: "linear-gradient(to top, rgba(6,6,6,0.85) 0%, rgba(6,6,6,0.35) 35%, transparent 60%)"
                }}></div>
                <div className="absolute left-6 bottom-6 right-6 flex items-end justify-between">
                  <div>
                    <span className="text-[10px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.7)]">{steps[active].tag}</span>
                    <h4 className="mt-2 font-display text-[22px] font-semibold tracking-tight">{steps[active].t}</h4>
                  </div>
                  <div className="text-right text-[10px] tracking-[0.3em] uppercase text-white/30">Step {active+1}/{steps.length}</div>
                </div>
              </div>
              <div className="mt-6 flex gap-2">
                {steps.map((_, i) => (
                  <div key={i} className="h-[2px] flex-1 bg-white/5 overflow-hidden">
                    <div className="h-full bg-[#E8A0A0] transition-all duration-500" style={{ width: i < active ? "100%" : i === active ? `${(p*steps.length - i)*100}%` : "0%" }}></div>
                  </div>
                ))}
              </div>
              <p className="mt-6 text-[11px] tracking-[0.2em] uppercase text-white/30">
                After month 1: Daily chat · Weekly strategy calls · Monthly reviews · Quarterly content houses
              </p>
            </div>

            <div className="col-span-12 md:col-span-6 md:pl-10">
              <SecLabel num="02 / 09">How it works</SecLabel>
              <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95] mb-6" style={{ fontSize: "clamp(40px, 4.6vw, 72px)" }}>
                How this <GradientText>actually goes.</GradientText>
              </h2>
              <p className="text-[#7a7a7a] font-light leading-relaxed max-w-md text-[14px] mb-12">
                No one in this industry explains this part. Here's exactly what working with Palm looks like — week by week.
              </p>
              <div className="space-y-3">
                {steps.map((s, i) => (
                  <div key={s.n} className={`exp-step ${i === active ? "active" : ""} flex gap-6 py-5 border-t border-white/[0.05]`}>
                    <span className={`font-display text-[28px] font-bold shrink-0 w-14 leading-none tracking-tight ${s.accent ? "gradient-text-pink" : "text-white/15"}`}>{s.n}</span>
                    <div className="flex-1">
                      <div className="flex items-baseline justify-between gap-3">
                        <h3 className="font-display text-[20px] font-semibold tracking-tight">{s.t}</h3>
                        <span className="text-[9px] tracking-[0.25em] uppercase text-white/30 shrink-0">{s.tag}</span>
                      </div>
                      <p className={`mt-2 text-[13px] text-[#7a7a7a] font-light leading-relaxed max-w-md ${i === active ? "" : "line-clamp-1"}`}>{s.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Experience = Experience;