// rec_content.jsx — the screen-recording is an INTERACTIVE clip:
// Kyoto list page → tap the yellow "Gion district" card → it zooms open into
// a second-level detail page. Driven by `rt` (recording time, seconds 0..10).
// An optional annotation ("click here" + blue tap ring) sits on the yellow
// card, before the zoom — added later in the editor.

const REC_NATIVE = 320;
const REC_W = 264;                                  // recording screen width
const REC_SCALE = REC_W / REC_NATIVE;
const REC_SCREEN_H = Math.round(690 * REC_SCALE);   // 569

// the yellow Gion card rect, in 264×569 screen coords
const GION_CARD = { x: 14, y: 286, w: 112, h: 104 };

// timing of the in-recording interaction (recording seconds) — the "click here"
// moment is held a good while before the tap so it reads clearly at constant speed
const REC_TAP = 3.0;     // press the card
const REC_ZOOM0 = 3.25;  // expand starts
const REC_ZOOM1 = 4.5;   // expand done

function rlerp(a, b, t) { return a + (b - a) * t; }
function rpulse(t, c, r, f) {
  if (t < c - r || t > c + f) return 0;
  if (t <= c) return Easing.easeOutQuad((t - (c - r)) / r);
  return 1 - Easing.easeInQuad((t - c) / f);
}

/* ── level 1: Kyoto list page ── */
function KyotoList({ tapPress = 0 }) {
  const F = 'Geist, sans-serif';
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#fff8f3', fontFamily: F, overflow: 'hidden' }}>
      {/* header */}
      <div style={{ position: 'absolute', left: 16, top: 48, right: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 11, color: '#c2724a', fontWeight: 600 }}>Explore</div>
          <div style={{ fontSize: 20, fontWeight: 700, color: '#3a2a1f', letterSpacing: '-0.03em', marginTop: 1 }}>Kyoto, Japan</div>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: 17, background: 'linear-gradient(135deg,#ff9a62,#ff6a3d)' }} />
      </div>
      {/* hero card */}
      <div style={{ position: 'absolute', left: 14, top: 100, width: 236, height: 170, borderRadius: 14, overflow: 'hidden', background: 'linear-gradient(160deg,#ff8a5c,#e6492d)' }}>
        <div style={{ position: 'absolute', top: 12, right: 12, width: 28, height: 28, borderRadius: 14, background: 'rgba(255,255,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14 }}>♥</div>
        <div style={{ position: 'absolute', left: 14, bottom: 14, color: '#fff' }}>
          <div style={{ fontSize: 10, fontWeight: 600, opacity: 0.9, letterSpacing: '0.04em' }}>4.9 ★ · 2,310 reviews</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>Fushimi Inari Shrine</div>
        </div>
      </div>
      {/* grid — yellow Gion (with press feedback) + Arashiyama */}
      <div style={{ position: 'absolute', left: GION_CARD.x, top: GION_CARD.y, width: GION_CARD.w, height: GION_CARD.h, borderRadius: 12, overflow: 'hidden', background: 'linear-gradient(150deg,#ffd27a,#ff9e45)', transform: `scale(${1 - tapPress * 0.045})`, transformOrigin: 'center', filter: `brightness(${1 - tapPress * 0.08})`, transition: 'none' }}>
        <div style={{ position: 'absolute', left: 10, bottom: 9, color: '#5a3712', fontWeight: 700, fontSize: 12.5 }}>Gion district</div>
      </div>
      <div style={{ position: 'absolute', left: 138, top: 286, width: 112, height: 104, borderRadius: 12, overflow: 'hidden', background: 'linear-gradient(150deg,#ffb38a,#ef6f50)' }}>
        <div style={{ position: 'absolute', left: 10, bottom: 9, color: '#fff', fontWeight: 700, fontSize: 12.5 }}>Arashiyama</div>
      </div>
      {/* more list */}
      {[['Nishiki Market', '15 min'], ['Kiyomizu-dera', '22 min']].map(([n, d], i) => (
        <div key={i} style={{ position: 'absolute', left: 14, top: 408 + i * 46, width: 236, height: 40, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 40, height: 40, borderRadius: 9, background: i === 0 ? 'linear-gradient(135deg,#ffe0a3,#ffb45e)' : 'linear-gradient(135deg,#ffcabe,#ff7e63)' }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#3a2a1f' }}>{n}</div>
            <div style={{ fontSize: 10.5, color: '#a98c79' }}>{d} away</div>
          </div>
          <span style={{ color: '#c9a98f', fontSize: 15 }}>›</span>
        </div>
      ))}
      {/* CTA */}
      <div style={{ position: 'absolute', left: 14, top: 506, width: 236, height: 44, borderRadius: 22, background: 'linear-gradient(135deg,#ff8a5c,#e6492d)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 13 }}>Plan this trip</div>
    </div>
  );
}

/* ── level 2: Gion district detail (revealed by the expanding card) ── */
function GionDetail({ z }) {
  const F = 'Geist, sans-serif';
  const head = clamp((z - 0.25) / 0.45, 0, 1);
  const body = clamp((z - 0.5) / 0.5, 0, 1);
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#fff', fontFamily: F, overflow: 'hidden' }}>
      {/* hero (continues the yellow card gradient) */}
      <div style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: 244, background: 'linear-gradient(150deg,#ffd27a,#ff9e45)' }}>
        <div style={{ position: 'absolute', top: 46, left: 14, width: 30, height: 30, borderRadius: 15, background: 'rgba(255,255,255,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 16, opacity: head }}>‹</div>
        <div style={{ position: 'absolute', left: 18, bottom: 18, color: '#5a3712' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', opacity: 0.8 }}>KYOTO · HISTORIC</div>
          <div style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-0.03em', marginTop: 2 }}>Gion district</div>
        </div>
      </div>
      {/* body */}
      <div style={{ position: 'absolute', left: 0, top: 244, right: 0, bottom: 0, padding: '16px 18px', opacity: body, transform: `translateY(${(1 - body) * 14}px)` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: '#3a2a1f', fontWeight: 600 }}>
          4.8 ★ <span style={{ color: '#a98c79', fontWeight: 400 }}>· 1,820 reviews · 0.4 mi</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 12.5, lineHeight: 1.55, color: '#6b5648' }}>
          Kyoto's historic geisha quarter — wooden machiya teahouses, lantern-lit lanes, and the chance to spot a geiko at dusk.
        </div>
        <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
          {['linear-gradient(135deg,#ffe0a3,#ff9e45)', 'linear-gradient(135deg,#ffc1a6,#ef6f50)', 'linear-gradient(135deg,#f6d59a,#e0a23c)'].map((g, i) => (
            <div key={i} style={{ flex: 1, height: 62, borderRadius: 10, background: g }} />
          ))}
        </div>
        <div style={{ marginTop: 16, height: 44, borderRadius: 22, background: 'linear-gradient(135deg,#ff9e45,#e6492d)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 13 }}>Get directions</div>
      </div>
    </div>
  );
}

/* ── the recording clip (264×569 content) ── */
function RecordingClip({ rt = 0, annoOn = false, annoType = 0, annoDraw = 1, annoIn = 1, clock = 0 }) {
  const tapPress = rpulse(rt, REC_TAP, 0.22, 0.18);
  const z = Easing.easeInOutCubic(clamp((rt - REC_ZOOM0) / (REC_ZOOM1 - REC_ZOOM0), 0, 1));

  // expanding card rect → full screen
  const ex = rlerp(GION_CARD.x, 0, z);
  const ey = rlerp(GION_CARD.y, 0, z);
  const ew = rlerp(GION_CARD.w, REC_W, z);
  const eh = rlerp(GION_CARD.h, REC_SCREEN_H, z);
  const erad = rlerp(12, 0, z);

  // annotation visible from early in the clip until just before the tap (long hold)
  const annoVis = annoOn ? clamp((rt - 0.8) / 0.4, 0, 1) * (1 - clamp((rt - (REC_TAP - 0.05)) / 0.25, 0, 1)) : 0;
  const ccx = GION_CARD.x + GION_CARD.w / 2;
  const ccy = GION_CARD.y + GION_CARD.h / 2;
  const label = 'Click here';
  const typed = label.slice(0, Math.round(clamp(annoType, 0, 1) * label.length));
  const caretOn = (Math.floor(clock * 2.2) % 2) === 0;

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#fff8f3', overflow: 'hidden' }}>
      {/* level 1 list, dims slightly as the card expands */}
      <div style={{ position: 'absolute', inset: 0, opacity: 1 - z * 0.5, transform: `scale(${1 - z * 0.05})`, transformOrigin: '50% 42%' }}>
        <KyotoList tapPress={tapPress} />
      </div>

      {/* expanding card → detail page */}
      {z > 0.001 && (
        <div style={{ position: 'absolute', left: ex, top: ey, width: ew, height: eh, borderRadius: erad, overflow: 'hidden', background: 'linear-gradient(150deg,#ffd27a,#ff9e45)', boxShadow: `0 ${rlerp(6, 0, z)}px ${rlerp(24, 0, z)}px rgba(0,0,0,0.25)` }}>
          <GionDetail z={z} />
        </div>
      )}

      {/* annotation overlay on the yellow card (fades in) */}
      {annoVis > 0.001 && (
      <div style={{ position: 'absolute', inset: 0, zIndex: 6, pointerEvents: 'none', fontFamily: 'Geist, sans-serif', opacity: annoIn }}>
          {/* selection marquee — drawn by dragging from top-left to bottom-right */}
          {(() => {
            const pad = 5;
            const tlx = GION_CARD.x - pad, tly = GION_CARD.y - pad;
            const fullW = GION_CARD.w + pad * 2, fullH = GION_CARD.h + pad * 2;
            const w = Math.max(0, fullW * annoDraw), h = Math.max(0, fullH * annoDraw);
            return (
              <div style={{ position: 'absolute', left: tlx, top: tly, width: w, height: h, border: '2px solid #ff3b30', background: 'transparent', borderRadius: 6 }} />
            );
          })()}
          {/* "Click here" in red, centered under the red selection box */}
          {annoType > 0.001 && (
            <div style={{ position: 'absolute', left: GION_CARD.x - 5, top: GION_CARD.y + GION_CARD.h + 12, textAlign: 'center', width: GION_CARD.w + 10 }}>
              <span style={{ color: '#ff3b30', fontWeight: 800, fontSize: 17, letterSpacing: '-0.01em' }}>
                {typed}{annoType < 0.999 && <span style={{ opacity: caretOn ? 0.9 : 0.15, fontWeight: 400 }}>|</span>}
              </span>
            </div>
          )}
      </div>
      )}
    </div>
  );
}

/* Preview phone: bezel + the recording clip + island + REC chip. */
function RecPhone({ recDot = true, rt = 0, annoOn = false, annoType = 0, annoDraw = 1, annoIn = 1, clock = 0 }) {
  return (
    <div style={{ position: 'relative', width: REC_W + 16, height: REC_SCREEN_H + 16, borderRadius: 38, background: 'linear-gradient(150deg,#34343a,#161618 40%)', padding: 8, boxShadow: '0 8px 30px rgba(0,0,0,0.18)', flexShrink: 0 }}>
      <div style={{ position: 'relative', width: REC_W, height: REC_SCREEN_H, borderRadius: 30, overflow: 'hidden', background: '#fff' }}>
        <RecordingClip rt={rt} annoOn={annoOn} annoType={annoType} annoDraw={annoDraw} annoIn={annoIn} clock={clock} />
        {/* dynamic island */}
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 72, height: 19, borderRadius: 11, background: '#000', zIndex: 8 }} />
        {/* recording chip */}
        {recDot && (
          <div style={{ position: 'absolute', top: 9, right: 12, zIndex: 8, display: 'flex', alignItems: 'center', gap: 4, background: 'rgba(0,0,0,0.55)', padding: '2px 7px', borderRadius: 8, fontFamily: 'Geist Mono, monospace', fontSize: 9.5, color: '#fff' }}>
            <span style={{ width: 7, height: 7, borderRadius: 4, background: '#e5484d', display: 'inline-block' }} />REC
          </div>
        )}
      </div>
    </div>
  );
}

// A filmstrip frame at recording time `rt` (so the strip shows the action progressing).
function FilmFrame({ w = 46, h = 66, rt = 0 }) {
  const sc = w / REC_W;
  return (
    <div style={{ width: w, height: h, overflow: 'hidden', background: '#fff', position: 'relative' }}>
      <div style={{ width: REC_W, height: REC_SCREEN_H, transform: `scale(${sc})`, transformOrigin: 'top left' }}>
        <RecordingClip rt={rt} />
      </div>
    </div>
  );
}

Object.assign(window, { RecordingClip, RecPhone, FilmFrame, REC_W, REC_SCREEN_H, REC_NATIVE, REC_SCALE, GION_CARD, REC_TAP, REC_ZOOM0, REC_ZOOM1 });