// story2.jsx — scenes 4-6: the save, the grateful family, the CTA.
// Relies on theme.jsx, ui.jsx (BrandMark), phone.jsx, story.jsx helpers, animations.jsx.

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — SCAM PROTECT STEPS IN
// ═══════════════════════════════════════════════════════════════════════════
function SaveScene({ lt, dur }) {
  // warm grade returns as relief lands
  const relief = clamp((lt - 1.4) / 1.5, 0, 1);
  const bg = `rgb(${12 + relief * 235}, ${9 + relief * 232}, ${6 + relief * 222})`;
  const zoom = 1.06 - Easing.easeOutCubic(clamp(lt / 1.2, 0, 1)) * 0.06;
  return (
    <CineScene lt={lt} dur={dur} bg={bg}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(80% 80% at 50% 46%, rgba(28,107,87,${0.10 + relief * 0.06}), rgba(0,0,0,0) 60%)` }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: `scale(${zoom})` }}>
        <div style={{ perspective: 1500 }}>
          <PhoneFrame tilt={1} glow={`rgba(46,157,113,${0.25 + relief * 0.3})`}>
            <TransferScreen t={6.0} />
            <InterceptOverlay t={lt} />
          </PhoneFrame>
        </div>
      </div>

      {/* copy appears once blocked, on the warm side */}
      <div style={{ position: 'absolute', left: 120, top: 360, maxWidth: 640, opacity: clamp((lt - 1.6) / 0.7, 0, 1), transform: `translateY(${(1 - clamp((lt - 1.6) / 0.7, 0, 1)) * 18}px)` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <span style={{ width: 40, height: 2, background: T.brand }} />
          <span style={{ fontFamily: T.mono, fontSize: 15, letterSpacing: '0.22em', textTransform: 'uppercase', color: T.brand }}>Saved</span>
        </div>
        <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 62, color: T.ink, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
          Scam Protect<br />stepped in.
        </div>
        <div style={{ fontFamily: T.display, fontSize: 25, color: T.inkSoft, marginTop: 20, lineHeight: 1.4 }}>
          Before the tap. Before the money moved.<br />Because he was a subscriber.
        </div>
      </div>
    </CineScene>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — THE GRATEFUL FAMILY
// ═══════════════════════════════════════════════════════════════════════════
function FamilyScene({ lt, dur }) {
  const imgIn = Easing.easeOutCubic(clamp(lt / 0.9, 0, 1));
  return (
    <CineScene lt={lt} dur={dur} bg={T.bg}>
      <div style={{ position: 'absolute', inset: 0, display: 'flex' }}>
        {/* left: family photo slot */}
        <div style={{ position: 'relative', width: '54%', height: '100%', overflow: 'hidden', opacity: imgIn }}>
          <KenBurns lt={lt} dur={dur} from={1.04} to={1.12} ox={55} oy={45}>
            <Slot id="scene-family" src={PHOTOS.family} placeholder="Drop a photo: the happy family together" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
          </KenBurns>
          <Scrim from="right" strength={0.5} />
        </div>
        {/* right: gratitude */}
        <div style={{ flex: 1, padding: '0 110px 0 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Rise lt={lt} at={0.6}><div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <span style={{ width: 40, height: 2, background: T.brand }} />
            <span style={{ fontFamily: T.mono, fontSize: 15, letterSpacing: '0.22em', textTransform: 'uppercase', color: T.brand }}>Home safe</span>
          </div></Rise>
          <Rise lt={lt} at={0.9} dur={0.8}>
            <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 50, color: T.ink, letterSpacing: '-0.025em', lineHeight: 1.12, textWrap: 'pretty' }}>
              "It would've taken everything.<br />Scam Protect gave us<br />our peace of mind back."
            </div>
          </Rise>
          <Rise lt={lt} at={1.7} dy={14} style={{ marginTop: 26 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Slot id="fam-avatar" src={PHOTOS.person} shape="circle" position="50% 42%" placeholder="" style={{ width: 56, height: 56, flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 20, color: T.ink }}>The Garcia family</div>
                <div style={{ fontFamily: T.mono, fontSize: 14, color: T.muted }}>Scam Protect subscribers</div>
              </div>
            </div>
          </Rise>
          <Rise lt={lt} at={2.4} dy={14} style={{ marginTop: 34 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, background: T.safeSoft, border: `1px solid ${T.brandSoft}`, borderRadius: 14, padding: '16px 22px' }}>
              <Shield size={34} fill={T.brand}><Check size={18} color="#fff" weight={2.8} /></Shield>
              <div>
                <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 28, color: T.brand, letterSpacing: '-0.01em' }}>$8,740 saved</div>
                <div style={{ fontFamily: T.display, fontSize: 15, color: T.inkSoft }}>in a single tap that never happened</div>
              </div>
            </div>
          </Rise>
        </div>
      </div>
    </CineScene>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 6 — CTA
// ═══════════════════════════════════════════════════════════════════════════
function StoryCTAScene({ lt, dur }) {
  return (
    <CineScene lt={lt} dur={dur} bg={T.bg}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(110% 80% at 50% 8%, rgba(28,107,87,0.07), rgba(28,107,87,0) 55%)' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <Rise lt={lt} at={0.2} dur={0.7}><BrandMark scale={1.6} /></Rise>
        <Rise lt={lt} at={0.6} dur={0.8} dy={22}>
          <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 82, color: T.ink, letterSpacing: '-0.035em', marginTop: 42, lineHeight: 1.04, textAlign: 'center' }}>
            Protect the people<br />you love.
          </div>
        </Rise>
        <Rise lt={lt} at={1.2} dy={16}>
          <div style={{ fontFamily: T.display, fontSize: 27, color: T.muted, marginTop: 24, textAlign: 'center' }}>
            Scam Protect watches every call, text and transfer — so they don't have to.
          </div>
        </Rise>
        <Rise lt={lt} at={1.7} dur={0.6} dy={18} style={{ marginTop: 46 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 23, color: '#fff', background: T.brand, borderRadius: 14, padding: '19px 38px', boxShadow: '0 16px 36px -16px rgba(28,107,87,0.7)' }}>
              Start protecting your family
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 19, color: T.inkSoft, letterSpacing: '0.02em' }}>s-security.io</div>
          </div>
        </Rise>
      </div>
    </CineScene>
  );
}

Object.assign(window, { SaveScene, FamilyScene, StoryCTAScene });