/* eslint-disable */
// Section 07 — Project Lifecycle. Dark. 6-column timeline.
// Scroll-tied domino flip: section is a 200vh scroll track; the content
// sticks for one viewport while progress runs 0→1, then releases. Each card
// owns a 1/6 slice of that progress and flips on its left edge in sequence.
// Hovering a card zooms the photo in.

const STAGES = [
  {
    n: '01', title: 'Project planning', tone: 'detail', src: 'assets/uc-plans-bw.jpeg', items: [
      'Project briefing & scope review',
      'Procurement scheduling',
      'Project timeline scheduling',
      'Approval of materials & finishes',
    ],
  },
  {
    n: '02', title: 'Engineering & production', tone: 'workshop', src: 'assets/uc-planer.jpeg', items: [
      'Detailed shop drawings & material optimisation',
      'Job orders & cutting lists issued',
      'Mock-ups & prototype approvals prior to production',
    ],
  },
  {
    n: '03', title: 'QA / QC', tone: 'grain', src: 'assets/uc-finishing-grain.jpeg', items: [
      'In-process inspections during fabrication',
      'Quality checks on dimensions, joinery, finish',
      'Assembly & high-precision finishing in controlled environment',
      'Corrective actions & stage approvals',
      'Final inspection before packaging',
    ],
  },
  {
    n: '04', title: 'Packaging & logistics', tone: 'ash', src: 'assets/uc-sanding-round.jpeg', items: [
      'Custom crating & protective wrapping for all units',
      'Labelling by zone & project reference',
      'Coordination of transport, delivery schedules, storage',
    ],
  },
  {
    n: '05', title: 'Installation', tone: 'raking', src: 'assets/uc-heritage-table.jpeg', items: [
      'Site delivery & unloading supervision',
      'Installation by certified carpentry team',
      'Alignment, fixing, finishing on site',
      'Inspection with consultant & client representatives',
    ],
  },
  {
    n: '06', title: 'Handover', tone: 'detail', src: 'assets/uc-interior-armchair.jpeg', items: [
      'Final snagging & rectifications',
      'As-built drawings & maintenance manual',
      'Warranty issuance & project close-out documentation',
    ],
  },
];

// eased clamp helper
const clamp01 = (v) => Math.max(0, Math.min(1, v));
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);

const Lifecycle = () => {
  const sectionRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    let raf = 0;

    const update = () => {
      raf = 0;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // total scrollable range inside this section while it is pinned
      const range = rect.height - vh;
      if (range <= 0) { setProgress(1); return; }
      // -rect.top is how far the section's top has scrolled past the viewport top
      const p = clamp01(-rect.top / range);
      setProgress(p);
    };

    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };

    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Each card owns a slot in the [0,1] progress. We give each slot some
  // overlap with the next so the domino keeps cascading without dead air.
  const N = STAGES.length;
  const slot = 1 / (N + 1);          // each card gets ~14% of the track
  const overlap = slot * 0.45;       // the next card starts a bit early

  return (
    <section
      id="process"
      ref={sectionRef}
      data-screen-label="07 project lifecycle"
      style={{
        background: 'var(--color-deep-brown)',
        color: 'var(--color-off-white)',
        position: 'relative',
        // 200vh track: 100vh of pinned content + 100vh of scroll for the animation
        height: '200vh',
      }}
    >
      <div
        style={{
          position: 'sticky',
          top: 0,
          height: '100vh',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '80px 0',
          boxSizing: 'border-box',
          overflow: 'hidden',
        }}
      >
        <div className="uc-shell">
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, marginBottom: 40 }}>
            <div className="uc-eyebrow uc-eyebrow--dark">How the work is made</div>
            <div style={{ flex: 1, height: 1, background: 'rgba(253,254,120,0.22)', marginTop: 9 }} />
            <div className="uc-eyebrow uc-eyebrow--dark">06 stages</div>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'clamp(36px, 4.6vw, 60px)',
            lineHeight: 0.98,
            letterSpacing: '-0.03em',
            textTransform: 'none',
            color: 'var(--color-off-white)',
            margin: '0 0 56px',
            maxWidth: '20ch',
          }}>The Unicraft <span className="uc-bracket">project life cycle</span>.</h2>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(6, 1fr)',
            gap: 18,
            perspective: '1400px',
          }}>
            {STAGES.map((s, i) => {
              // local progress for this card within its slot
              const start = i * slot;
              const end = start + slot + overlap;
              const local = clamp01((progress - start) / (end - start));
              const eased = easeOutCubic(local);
              // domino: from edge-on (folded back-left, invisible) to flat
              const angle = -95 * (1 - eased);
              const opacity = 0.05 + 0.95 * eased;

              return (
                <div key={s.n} style={{ display: 'flex', flexDirection: 'column' }}>
                  <div
                    className="uc-domino"
                    style={{
                      transform: `rotateY(${angle}deg)`,
                      transformOrigin: 'left center',
                      opacity,
                      willChange: 'transform, opacity',
                      transformStyle: 'preserve-3d',
                    }}
                  >
                    <div className="uc-domino__inner">
                      <Photo tone={s.tone} src={s.src} alt={s.title} aspect="4 / 3" />
                    </div>
                  </div>

                  {/* connector line + node */}
                  <div style={{
                    position: 'relative',
                    height: 28,
                    display: 'flex', alignItems: 'center',
                  }}>
                    <div style={{
                      position: 'absolute', left: i === 0 ? '50%' : 0,
                      right: i === STAGES.length - 1 ? '50%' : 0,
                      top: '50%', height: 1,
                      background: 'rgba(253,254,120,0.4)',
                    }} />
                    <div style={{
                      position: 'absolute', left: '50%', top: '50%',
                      transform: 'translate(-50%, -50%)',
                      width: 8, height: 8,
                      background: 'var(--color-acid-yellow)',
                    }} />
                  </div>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontWeight: 800, fontSize: 18,
                    letterSpacing: '-0.02em',
                    color: 'var(--color-acid-yellow)',
                    marginTop: 12, marginBottom: 6,
                  }}>{s.n}</div>
                  <h4 style={{
                    fontFamily: 'var(--font-display)',
                    fontWeight: 700, fontSize: 14.5,
                    lineHeight: 1.2, letterSpacing: '-0.01em',
                    textTransform: 'none',
                    color: 'var(--color-acid-yellow)',
                    margin: '0 0 12px',
                    minHeight: '2.4em',
                  }}>{s.title}</h4>
                  <ul style={{
                    listStyle: 'none', padding: 0, margin: 0,
                    display: 'flex', flexDirection: 'column', gap: 5,
                  }}>
                    {s.items.map((it) => (
                      <li key={it} style={{
                        fontFamily: 'var(--font-body)',
                        fontSize: 11.5, lineHeight: 1.5,
                        color: 'rgba(229,229,222,0.78)',
                        paddingLeft: 12, position: 'relative',
                      }}>
                        <span style={{
                          position: 'absolute', left: 0, top: '0.6em',
                          width: 4, height: 1, background: 'rgba(253,254,120,0.5)',
                        }} />
                        {it}
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Lifecycle });