// product-card-progressive-assemble — Progressive Assemble fields landing one by one (motion-lab final cut ported to native Remotion)
// the detail card builds itself as if each field is grabbed into place: image → title → breadcrumb pills
// popping in one by one → the price appears then gets demoted with a strikethrough,
// while the accent-colored new price springs out → body text reveals line by line + accent highlight
// blocks sweep left to right → swatches light up.
// The whole card slowly pushes forward in scale to keep breathing. Design coordinates 480×270 (DesignStage scales proportionally).
import React from 'react';
import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';

export const PRODUCT_CARD_PROGRESSIVE_ASSEMBLE_DURATION = 150; // 5000ms @30fps

const ACCENT = '#ff6a1f';
const ACCENT_SOFT = 'rgba(255,122,26,.42)';

const F = (f: number) => f / 60; // recipe frames → t

// field landing style: rise = moves up 6px + fade in; pop = outBack bounces from 0.4 to 1
const fieldStyle = (t: number, f0: number, mode: 'rise' | 'pop' = 'rise'): React.CSSProperties => {
  const k = seg(t, F(f0), F(f0) + 0.1, E.outCubic);
  return {
    opacity: Math.min(1, k * 2),
    transform:
      mode === 'pop'
        ? `scale(${lerp(E.outBack(Math.min(1, k)), 0.4, 1)})`
        : `translateY(${lerp(k, 6, 0)}px)`,
  };
};

// description lines: [text, whether marker-highlighted]
const LINES: [string, boolean?][][] = [
  [['Placeholder copy for '], ['a key highlight', true], [' in the']],
  [['product body. '], ['Second highlight', true], [' sits here on']],
  [['the third line of neutral sample text.']],
];

export const ProductCardProgressiveAssemble: React.FC = () => {
  const t = useT();
  // whole-card breathing push
  const push = seg(t, 0, 0.75, E.outQuad);
  // price demotion (f=26): old price strikethrough, shrinks and turns gray; new price springs out
  const cut = t >= F(26);
  const nk = seg(t, F(26), F(26) + 0.12);
  return (
    <DesignStage bg="#0d0e13" raster="zoom">
      <div
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          width: '78%',
          height: '74%',
          transform: `translate(-50%,-50%) scale(${lerp(push, 1, 1.06)})`,
          background: '#f6f5f2',
          borderRadius: 12,
          boxShadow: '0 18px 50px rgba(0,0,0,.5)',
          fontFamily: '-apple-system,Helvetica,sans-serif',
          display: 'flex',
          padding: '4.5%',
          boxSizing: 'border-box',
          gap: '5%',
        }}
      >
        {/* left: product image placeholder (rises into place at f=0) */}
        <div
          style={{
            flex: '0 0 38%',
            background: '#e2e0da',
            borderRadius: 8,
            position: 'relative',
            overflow: 'hidden',
            ...fieldStyle(t, 0),
          }}
        >
          <div
            style={{
              position: 'absolute',
              left: '18%',
              top: '14%',
              width: '64%',
              height: '72%',
              background: 'linear-gradient(160deg,#2b3040,#171a24)',
              borderRadius: '40% 40% 14% 14%/26% 26% 10% 10%',
            }}
          >
            {/* zipper */}
            <div style={{ position: 'absolute', left: '49%', top: '20%', width: '2%', height: '58%', background: '#525a70' }} />
          </div>
        </div>
        {/* right column */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          {/* title (f=4) */}
          <div style={{ fontSize: 19, fontWeight: 800, color: '#17181c', letterSpacing: '-.3px', ...fieldStyle(t, 4) }}>
            Sample Product Title
          </div>
          {/* breadcrumb pills (one pop every 2 frames from f=8) */}
          <div style={{ display: 'flex', gap: 6, margin: '8px 0 10px' }}>
            {['Category', 'Subgroup', 'Detail'].map((txt, i) => (
              <div
                key={txt}
                style={{
                  fontSize: 9,
                  fontWeight: 600,
                  color: '#5a5e6b',
                  background: '#e9e7e1',
                  padding: '3px 9px',
                  borderRadius: 99,
                  ...fieldStyle(t, 8 + i * 2, 'pop'),
                }}
              >
                {txt}
              </div>
            ))}
          </div>
          {/* price row (f=16): from f=26 the old price is demoted and the new price springs out */}
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginBottom: 11, ...fieldStyle(t, 16) }}>
            <span
              style={{
                fontSize: cut ? 15 : 21,
                fontWeight: 800,
                color: cut ? '#9a9da6' : '#17181c',
                textDecoration: cut ? 'line-through' : 'none',
              }}
            >
              $249
            </span>
            <span
              style={{
                fontSize: 21,
                fontWeight: 800,
                color: ACCENT,
                opacity: Math.min(1, nk * 3),
                transform: `scale(${lerp(E.spring(nk, 0.35), 1.15, 1)})`,
              }}
            >
              $189
            </span>
          </div>
          {/* description lines (one every 2 frames from f=30) + marker highlight (sweeps left to right from row f0+4) */}
          <div style={{ fontSize: 10.5, lineHeight: 1.75, color: '#494d58' }}>
            {LINES.map((segs, li) => (
              <div key={li} style={{ whiteSpace: 'nowrap', ...fieldStyle(t, 30 + li * 2) }}>
                {segs.map(([txt, isMark], si) =>
                  !isMark ? (
                    <span key={si}>{txt}</span>
                  ) : (
                    <span key={si} style={{ position: 'relative', display: 'inline-block' }}>
                      <span
                        style={{
                          position: 'absolute',
                          left: -2,
                          right: -2,
                          top: '8%',
                          bottom: '4%',
                          background: ACCENT_SOFT,
                          borderRadius: 2,
                          transform: `scaleX(${seg(t, F(30 + li * 2 + 4), F(30 + li * 2 + 4) + 0.085, E.outCubic)})`,
                          transformOrigin: 'left center',
                        }}
                      />
                      <span style={{ position: 'relative', fontWeight: 700, color: '#26282f' }}>{txt}</span>
                    </span>
                  ),
                )}
              </div>
            ))}
          </div>
          {/* swatches (one pop every 2 frames from f=40) */}
          <div style={{ display: 'flex', gap: 7, marginTop: 'auto' }}>
            {['#191b20', '#8b8f99', '#3a5b8c'].map((cclr, i) => (
              <div
                key={cclr}
                style={{
                  width: 16,
                  height: 16,
                  borderRadius: 4,
                  background: cclr,
                  outline: '1.5px solid rgba(0,0,0,.12)',
                  outlineOffset: 1.5,
                  ...fieldStyle(t, 40 + i * 2, 'pop'),
                }}
              />
            ))}
          </div>
        </div>
      </div>
    </DesignStage>
  );
};