/* ===== How it works (sticky), Product showcase (sticky), Features ===== */

const STEPS = [
  {
    n: '01',
    title: 'Scan — no plaster casts',
    body: 'A 90-second 3D phone scan captures your residual limb. No clinic visit, no casts, no weeks of waiting.',
    label: '3D phone scan',
    chip: 'Day 1',
  },
  {
    n: '02',
    title: 'We print your socket',
    body: 'Our engineers tune the fit in software and 3D-print a socket matched to the millimetre — light, comfortable, yours alone.',
    label: 'custom socket print',
    chip: 'Day 3–5',
  },
  {
    n: '03',
    title: 'Fit, tune, stride',
    body: 'A certified prosthetist fits the limb and tunes the grip to your muscle signals. You walk out the same day.',
    label: 'fitting & tuning',
    chip: 'Day 7',
  },
];

function HowItWorks() {
  const wrapRef = useRef(null);
  const progress = useScrollProgress(wrapRef);
  const active = Math.min(STEPS.length - 1, Math.floor(progress * STEPS.length * 0.999));

  return (
    <section id="story" ref={wrapRef} className="relative bg-[#f0f0ee]" style={{ height: '2880px' }}>
      <div className="sticky top-0 flex items-center" style={{ height: '900px' }}>
        <div className="w-full max-w-7xl mx-auto px-6 sm:px-12 lg:px-20 grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
          {/* left: copy */}
          <div>
            <p className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-6">How it works</p>
            <h2 className="text-[2rem] sm:text-[2.6rem] leading-[1.05] font-medium tracking-tight text-gray-900 mb-10 max-w-md">
              From scan to stride in <span className="text-blue-500">7 days.</span>
            </h2>
            <div className="space-y-1">
              {STEPS.map((s, i) => {
                const on = i === active;
                return (
                  <div
                    key={s.n}
                    className="flex gap-5 py-4 border-t border-black/10 transition-all duration-500"
                    style={{ opacity: on ? 1 : 0.32 }}
                  >
                    <div
                      className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-[12px] font-semibold transition-all duration-500"
                      style={{
                        backgroundColor: on ? '#3b82f6' : 'transparent',
                        color: on ? '#fff' : '#9ca3af',
                        border: on ? '1px solid #3b82f6' : '1px solid #d1d5db',
                      }}
                    >
                      {s.n}
                    </div>
                    <div>
                      <div className="flex items-center gap-3">
                        <h3 className="text-[16px] sm:text-[18px] font-medium text-gray-900">{s.title}</h3>
                        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-[#d97757]/12 text-[#c5613f]">{s.chip}</span>
                      </div>
                      <div
                        className="overflow-hidden transition-all duration-500"
                        style={{ maxHeight: on ? 120 : 0, opacity: on ? 1 : 0 }}
                      >
                        <p className="text-[14px] text-gray-500 leading-relaxed pt-2 max-w-sm">{s.body}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            {/* progress bar */}
            <div className="mt-8 h-0.5 w-full bg-black/10 rounded-full overflow-hidden max-w-md">
              <div className="h-full bg-blue-500 rounded-full" style={{ width: `${progress * 100}%`, transition: 'width 0.15s linear' }} />
            </div>
          </div>

          {/* right: changing visual */}
          <div className="relative max-h-[520px]" style={{ height: '520px' }}>
            {STEPS.map((s, i) => {
              const on = i === active;
              return (
                <div
                  key={s.n}
                  className="absolute inset-0 transition-all duration-700"
                  style={{
                    opacity: on ? 1 : 0,
                    transform: on ? 'scale(1)' : 'scale(0.96)',
                    pointerEvents: on ? 'auto' : 'none',
                  }}
                >
                  <Striped label={s.label} variant={i === 1 ? 'blue' : ''} className="w-full h-full rounded-3xl border border-black/5">
                    <div className="absolute top-6 left-6 text-[5rem] font-semibold text-black/5 leading-none select-none">{s.n}</div>
                  </Striped>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

const CALLOUTS = [
  { title: 'Myoelectric grip',     body: 'Reads muscle signals to open and close in under 400ms.',           side: 'left',  top: '14%' },
  { title: 'Carbon-fibre frame',   body: '38% lighter than aluminium, built for daily loads.',              side: 'right', top: '34%' },
  { title: 'All-day battery',      body: 'A single charge lasts 18 hours of active use.',                   side: 'left',  top: '58%' },
  { title: 'Splash resistant',     body: 'Safe from rain, sweat and hand-washing. Rated IP54.',            side: 'right', top: '76%' },
];

function Product() {
  const wrapRef = useRef(null);
  const progress = useScrollProgress(wrapRef);
  return (
    <section id="products" ref={wrapRef} className="relative bg-[#101010]" style={{ height: '2700px' }}>
      <div className="sticky top-0 flex items-center justify-center" style={{ height: '900px' }}>
        <div className="text-center absolute inset-x-0 px-6" style={{ top: '72px' }}>
          <p className="text-[11px] uppercase tracking-[0.25em] text-white/40 mb-3">The SendiBionik One</p>
          <h2 className="text-[2rem] sm:text-[2.8rem] font-medium tracking-tight text-white leading-[1.05]">
            Engineered down to the gram.
          </h2>
        </div>

        {/* center product */}
        <div
          className="relative w-[58vw] max-w-[360px] aspect-[3/4]"
          style={{ transform: `scale(${1 + progress * 0.08}) rotate(${progress * 4 - 2}deg)` }}
        >
          <Striped label="product render — SendiBionik One" variant="dark" className="w-full h-full rounded-[2rem] border border-white/10" />
        </div>

        {/* callouts reveal sequentially with scroll */}
        {CALLOUTS.map((c, i) => {
          const appear = progress > (i + 0.5) / (CALLOUTS.length + 1);
          const isLeft = c.side === 'left';
          return (
            <div
              key={c.title}
              className="absolute max-w-[210px] sm:max-w-[240px] transition-all duration-500"
              style={{
                top: c.top,
                [isLeft ? 'left' : 'right']: 'clamp(16px, 8vw, 140px)',
                textAlign: isLeft ? 'right' : 'left',
                opacity: appear ? 1 : 0,
                transform: appear ? 'translateX(0)' : `translateX(${isLeft ? -24 : 24}px)`,
              }}
            >
              <div className="flex items-center gap-2 mb-1.5" style={{ justifyContent: isLeft ? 'flex-end' : 'flex-start' }}>
                <span className="w-1.5 h-1.5 rounded-full bg-[#d97757]" />
                <h3 className="text-[14px] font-medium text-white">{c.title}</h3>
              </div>
              <p className="text-[12.5px] text-white/50 leading-relaxed">{c.body}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

const FEATURES = [
  { icon: 'hand', title: 'Intuitive control', body: 'Sensors learn your patterns, so the grip feels like a reflex — not a gadget you operate.' },
  { icon: 'feather', title: 'Feather-light', body: 'A full arm weighs under 460g. You forget it is there.' },
  { icon: 'shield-check', title: 'Built to last', body: 'Field-tested to 2 million cycles and backed by a 3-year warranty.' },
  { icon: 'smartphone', title: 'Tune from your phone', body: 'Adjust grip strength, speed and modes in the companion app.' },
  { icon: 'heart-handshake', title: 'Lifetime support', body: 'Free re-tuning and a prosthetist ready to help any time.' },
  { icon: 'wallet', title: 'Affordable', body: 'A fraction of the price of imported limbs, with interest-free instalments for every family.' },
];

function Features() {
  return (
    <section id="features" className="bg-[#f0f0ee] py-24 sm:py-32">
      <div className="max-w-7xl mx-auto px-6 sm:px-12 lg:px-20">
        <div className="max-w-2xl mb-14 sm:mb-20" data-reveal>
          <p className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-5">Why SendiBionik</p>
          <h2 className="text-[2rem] sm:text-[2.8rem] leading-[1.05] font-medium tracking-tight text-gray-900">
            Smart where it counts. Simple everywhere else.
          </h2>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px bg-black/10 rounded-3xl overflow-hidden border border-black/10">
          {FEATURES.map((f, i) => (
            <div
              key={f.title}
              className="bg-[#f0f0ee] p-8 sm:p-10 hover:bg-white transition-colors duration-300 group"
              data-reveal
              data-reveal-delay={(i % 3) * 90}
            >
              <div className="w-11 h-11 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500 transition-colors duration-300">
                <i data-lucide={f.icon} className="w-5 h-5 text-blue-500 group-hover:text-white transition-colors duration-300"></i>
              </div>
              <h3 className="text-[17px] font-medium text-gray-900 mb-2">{f.title}</h3>
              <p className="text-[14px] text-gray-500 leading-relaxed">{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Product, Features });