// How — pinned scrollytelling: the mountain-trail SVG stays fixed while you scroll the stages.

function HowSection() {
  const stages = [
    { n: '01', name: 'Conversation',   desc: 'A 15-minute call. No deck, no pitch. We ask what your business actually needs, and whether we\'re the right fit to build it.',         duration: '~15 minutes',  delivers: ['Written brief', 'Mutual fit check', 'Zero commitment'] },
    { n: '02', name: 'Scope',          desc: 'A short written document. What we\'ll make, what we won\'t, when, and for how much. You sign it before anything else.',                duration: 'Within the day', delivers: ['Scope document', 'Fixed price', 'Signed timeline'] },
    { n: '03', name: 'Design & Build', desc: 'No mockup detours. We go straight from scope to a first-draft working site, hand-written in clean code. You see a preview link; you read it, test it, live with it. One round of feedback, then another.', duration: '2–7 days', delivers: ['Preview link', 'Performance audit', 'Two feedback rounds'] },
    { n: '04', name: 'Launch & hold',  desc: 'We deploy. Then we stay. Monitoring, updates, and a concierge line you can reach any time. Launch is not the end. It is the first day.', duration: 'Ongoing',  delivers: ['Live deployment', 'Uptime monitoring', 'Ongoing concierge'] },
  ];

  const stageRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!stageRef.current) return;
      const r = stageRef.current.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const p = Math.max(0, Math.min(1, -r.top / total));
      setActive(Math.min(3, Math.floor(p * 4)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const dots = [
    { x: 60, y: 600, l: '01' },
    { x: 150, y: 490, l: '02' },
    { x: 260, y: 380, l: '03' },
    { x: 380, y: 240, l: '04' },
  ];

  return (
    <section id="how" ref={stageRef} className="relative how-stage-wrap" style={{ background: 'var(--parchment-dark)' }}>
      <div className="sticky top-0 h-screen flex flex-col overflow-hidden how-sticky">
        <div className="max-w-[1680px] mx-auto px-6 md:px-10 w-full pt-24 md:pt-28 pb-6">
          <div className="flex items-center gap-4 mb-4">
            <span className="h-px w-10" style={{ background: 'var(--summit)' }} />
            <span className="mono-label" style={{ color: 'rgba(26,36,54,0.55)' }}>Process · four stages, in order</span>
          </div>
          <h2 className="font-display font-extrabold" style={{ fontSize: 'clamp(2.5rem, 6.5vw, 5.5rem)', lineHeight: 1.0, letterSpacing: '-0.022em', color: 'var(--abyss)' }}>
            How <span className="italic font-normal" style={{ color: 'var(--summit)' }}>we</span> climb.
          </h2>
        </div>

        <div className="max-w-[1680px] mx-auto px-6 md:px-10 w-full flex-1 grid grid-cols-1 lg:grid-cols-[460px_1fr] gap-10 lg:gap-20 items-center min-h-0">
          {/* Pinned mountain + trail */}
          <div className="relative how-mountain-col">
            <svg viewBox="0 0 420 640" width="100%" height="auto" preserveAspectRatio="xMidYMid meet" style={{ maxHeight: '60vh' }}>
              <defs>
                <linearGradient id="trailMtn" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#1F5E7A" />
                  <stop offset="1" stopColor="#0D3044" />
                </linearGradient>
              </defs>
              <path d="M0 640 L20 540 L80 480 L140 520 L200 380 L260 420 L320 260 L400 340 L420 300 L420 640 Z" fill="url(#trailMtn)" opacity="0.15" />
              <path d="M200 380 L220 400 L210 410 L240 405 L260 420 L232 415 Z" fill="#F5F0EB" opacity="0.4" />
              <path d="M320 260 L348 295 L330 305 L365 300 L390 330 L355 325 L328 330 Z" fill="#F5F0EB" opacity="0.5" />
              <path d="M60 600 Q 100 560 120 520 Q 150 480 180 470 Q 210 460 220 420 Q 240 370 260 360 Q 285 350 300 320 Q 315 295 340 280 Q 360 270 380 240"
                    fill="none" stroke="#1A2436" strokeOpacity="0.25" strokeWidth="1.5" strokeDasharray="4 7" />
              {dots.map((d, i) => {
                const on = i <= active;
                return (
                  <g key={d.l}>
                    <circle cx={d.x} cy={d.y} r={i === active ? 10 : 7} fill="#F5F0EB"
                            stroke={on ? '#B8715A' : 'rgba(26,36,54,0.2)'} strokeWidth={i === active ? 2 : 1.5}
                            style={{ transition: 'r 0.6s var(--ease-out), stroke 0.6s var(--ease-out)' }} />
                    <circle cx={d.x} cy={d.y} r="2.8" fill={on ? '#B8715A' : 'rgba(26,36,54,0.2)'} style={{ transition: 'fill 0.6s var(--ease-out)' }} />
                    <text x={d.x + 16} y={d.y + 4} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2" fill="#1A2436" opacity={on ? 0.75 : 0.3} style={{ transition: 'opacity 0.6s var(--ease-out)' }}>{d.l}</text>
                  </g>
                );
              })}
              {/* Climber at active dot */}
              <g style={{ transition: 'transform 0.7s var(--ease-out)', transform: `translate(${dots[active].x}px, ${dots[active].y - 16}px)` }}>
                <circle r="3" fill="#B8715A" />
                <line x1="0" y1="3" x2="0" y2="9" stroke="#1A2436" strokeWidth="1.2" />
                <line x1="-4" y1="9" x2="4" y2="9" stroke="#1A2436" strokeWidth="1.2" />
              </g>
            </svg>
            <div className="mt-6 glass rounded-2xl p-4 flex items-center gap-4 max-w-[420px]">
              <svg width="22" height="20" viewBox="0 0 32 28" fill="none"><path d="M16 1L31 27H1L16 1Z" fill="#3A8CA8" /><path d="M16 9L24 23H8L16 9Z" fill="#1F5E7A" /></svg>
              <span className="font-display italic font-light" style={{ fontSize: '0.98rem', color: 'rgba(26,36,54,0.75)' }}>
                "Launch is not the end."
              </span>
            </div>
          </div>

          {/* Stage — swaps in place */}
          <div className="relative grid min-h-[60vh] how-stack" style={{ gridTemplateAreas: '"stack"' }}>
            {stages.map((s, i) => (
              <div key={s.n} className="transition-all how-stage" style={{
                gridArea: 'stack',
                opacity: active === i ? 1 : 0,
                transform: `translateY(${active === i ? 0 : 20}px)`,
                pointerEvents: active === i ? 'auto' : 'none',
                transitionDuration: '0.7s',
                transitionTimingFunction: 'cubic-bezier(0.22,1,0.36,1)',
                alignSelf: 'center',
              }}>
                <div className="grid grid-cols-[auto_1fr] gap-8 items-start max-w-[700px]">
                  <span className="font-display italic font-light shrink-0" style={{ fontSize: 'clamp(3rem, 6vw, 5rem)', lineHeight: 1, color: 'var(--summit)' }}>
                    {s.n}
                  </span>
                  <div>
                    <span className="mono-label block mb-3" style={{ color: 'rgba(26,36,54,0.45)' }}>Stage {s.n} of 04</span>
                    <h3 className="font-display font-extrabold mb-5" style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)', lineHeight: 1.08, letterSpacing: '-0.015em', color: 'var(--abyss)' }}>{s.name}</h3>
                    <p className="font-body max-w-[58ch]" style={{ fontSize: '1.08rem', lineHeight: 1.65, color: 'var(--ridge)' }}>{s.desc}</p>
                    <div className="mt-7 pt-6" style={{ borderTop: '1px solid rgba(26,36,54,0.1)' }}>
                      <div className="flex items-center gap-2 mb-5">
                        <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
                          <circle cx="7" cy="7" r="6" stroke="rgba(26,36,54,0.3)" strokeWidth="1.3"/>
                          <path d="M7 4v3l1.8 1.3" stroke="rgba(26,36,54,0.3)" strokeWidth="1.3" strokeLinecap="round"/>
                        </svg>
                        <span className="font-display font-semibold" style={{ fontSize: '0.9rem', color: 'rgba(26,36,54,0.55)' }}>{s.duration}</span>
                        <span style={{ color: 'rgba(26,36,54,0.18)', margin: '0 2px' }}>·</span>
                        <span className="mono-label" style={{ color: 'rgba(26,36,54,0.35)' }}>typical duration</span>
                      </div>
                      <span className="mono-label block mb-2.5" style={{ color: 'rgba(26,36,54,0.4)' }}>YOU RECEIVE</span>
                      <div className="flex flex-wrap gap-2">
                        {s.delivers.map((d, di) => (
                          <span key={di} style={{
                            padding: '0.3rem 0.9rem',
                            borderRadius: '999px',
                            fontSize: '0.83rem',
                            fontFamily: 'var(--font-display)',
                            fontWeight: 500,
                            letterSpacing: '-0.01em',
                            background: 'rgba(26,36,54,0.07)',
                            color: 'var(--abyss)',
                            border: '1px solid rgba(26,36,54,0.1)',
                          }}>{d}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}

            {/* dot nav */}
            <div className="mt-10 flex items-center gap-3 how-stage-dotnav" style={{ gridArea: 'stack', alignSelf: 'end', justifySelf: 'start', position: 'relative', zIndex: 5 }}>
              {stages.map((_, i) => (
                <span key={i} className="rounded-full transition-all" style={{
                  width: i === active ? 28 : 10, height: 10,
                  background: i === active ? 'var(--summit)' : 'rgba(26,36,54,0.2)',
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.HowSection = HowSection;