// pastel-cards.jsx — kartlar dokunulduğunda 3D ile çevrilir, bağlı film bilgisi gelir
const { useState: pUseState, useEffect: pUseEffect, useRef: pUseRef } = React;
const PC = {
PAPER: '#FBF3DC',
INK: '#1F1812', // daha derin mürekkep
INK2: '#5C4A3D',
INK3: 'rgba(31,24,18,0.42)',
LINE: 'rgba(31,24,18,0.14)',
HAIR: 'rgba(31,24,18,0.32)', // ince çerçeve hattı
ACCENT: '#B85A4A', // daha derin, daha az parlak mercan
GOLD: '#B89765', // pirinç/altın — editöryel aksan
GOLD2: '#8E6F42', // daha derin pirinç (vurgu için)
BACK: '#15100C',
BACK2: '#0E0A07',
T_PAPER: '#FBF3DC',
T_SKY: '#DCE7EE',
T_PLUM: '#ECDDEA',
T_SAGE: '#DCE5D2',
T_SUN: '#F4E5C0',
T_CORAL: '#F2D5CC',
T_CREAM: '#EFE3C2',
T_ROSE: '#F0D8CF',
};
const mmFmt = (m) => {
const h = Math.floor(m/60), r = m%60;
return `${h}s ${String(r).padStart(2,'0')}d`;
};
// Dokunmatik / dar ekran tespiti — perf ve uzun-bas davranışı için
const IS_TOUCH = !!(window.matchMedia &&
window.matchMedia('(max-width: 768px), (pointer: coarse)').matches);
window.IS_TOUCH = IS_TOUCH;
// Uzun bas: karta basılı tutunca tam ekran detay aç. Kaydırma/sürükleme iptal eder.
function useLongPress(getPayload, ms = 380) {
const tRef = pUseRef(null);
const firedRef = pUseRef(false);
const onStart = (e) => {
firedRef.current = false;
const sx = e.clientX, sy = e.clientY;
const cancel = () => {
if (tRef.current) { clearTimeout(tRef.current); tRef.current = null; }
window.removeEventListener('pointermove', mv, true);
window.removeEventListener('pointerup', up, true);
window.removeEventListener('pointercancel', up, true);
};
const mv = (ev) => {
if (Math.hypot(ev.clientX - sx, ev.clientY - sy) > 9) cancel();
};
const up = () => cancel();
window.addEventListener('pointermove', mv, true);
window.addEventListener('pointerup', up, true);
window.addEventListener('pointercancel', up, true);
tRef.current = setTimeout(() => {
firedRef.current = true;
try { navigator.vibrate && navigator.vibrate(14); } catch (_) {}
const p = getPayload();
if (p && window.__sorraDetail) window.__sorraDetail(p);
cancel();
}, ms);
};
return { fired: firedRef, onStart };
}
// Mobilde ağır gölgeleri hafiflet (Android repaint maliyeti)
const sh = (mobileVal, deskVal) => (IS_TOUCH ? mobileVal : deskVal);
// Toggleable tap state
function useFlip() {
const [flipped, setFlipped] = pUseState(false);
const toggle = pUseRef(null);
if (!toggle.current) {
toggle.current = (e) => {
e && e.stopPropagation && e.stopPropagation();
setFlipped(f => !f);
};
}
return [flipped, toggle.current];
}
// ─── FLIP SURFACE ─────────────────────────────────────────────────────────
// 3D çevirme. Front auto-yüksekliği belirler; back absolute, aynı boyutu kapsar.
function FlipSurface({ flipped, onTap, tint, frontPad='14px 12px', children, backChildren, backTint=PC.BACK, edition='BEN İZLEDİM ED. 014' }) {
const lp = useLongPress(() => ({ tint, front: children, back: backChildren, edition }));
const handleTap = (e) => {
if (lp.fired.current) { lp.fired.current = false; e && e.stopPropagation && e.stopPropagation(); return; }
onTap(e);
};
// ön yüzde ince çerçeve + iç gölge, arka yüzde derin pirinç çerçeve
return (
{/* ÖN YÜZ */}
{children}
{edition}
⤺ ÇEVİR
{/* ARKA YÜZ */}
{backChildren && (
{backChildren}
{edition} · VERSO
← GERİ
)}
);
}
// ─── FILM BACK ─────────────────────────────────────────────────────────────
// Her kartın arka yüzünde gösterilecek küçük film özeti.
function FilmBack({ film, w }) {
if (!film) return null;
const posterW = Math.min(68, w * 0.44);
const posterH = Math.round(posterW * 1.32);
return (