/* PIXYcal — "Poznáváte se v tomhle?" pain-point carousel
Smooth fan-stack animation, click any visible card to bring it front.
Uses shared primitives from window (set by app.jsx). */
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP, useCallback: useCallbackP } = React;
/* ── icons local to this file ─────────────────────────────────────────────── */
function PIcon({ name, size = 20 }) {
const paths = {
mail: <>,
cart: <>,
target: <>,
sparkles: <>,
megaphone: <>,
chevL: <>,
chevR: <>,
};
const p = paths[name]; if (!p) return null;
return (
);
}
/* ── data ─────────────────────────────────────────────────────────────────── */
const PAIN_CARDS = [
{ id: "poptavky", icon: "mail", label: "Poptávky bez reakce", quote: `„Poptávky z formulářů leží dny v systému, nikdo je neřeší, případně se ozve po pár dnech a zákazník nakoupí jinde."` },
{ id: "kosik", icon: "cart", label: "Opuštěné košíky", quote: `„Lidi si projdou produkty, vyberou si, naházejí věci do košíku... a pak odejdou."` },
{ id: "reklama", icon: "target", label: "Reklama je labyrint", quote: `„Ztrácím se v rozhraní Mety a nastavení kampaní mě děsí."` },
{ id: "obsah", icon: "sparkles", label: "Obsah žere čas", quote: `„Tvorba obsahu a vymýšlení příspěvků mi bere všechen čas."` },
{ id: "databaze", icon: "mail", label: "Databáze leží ladem", quote: `„Naše e-mailová databáze leží ladem a nikdo s ní nepracuje."` },
{ id: "lajky", icon: "megaphone", label: "Lajky bez objednávek", quote: `„Příspěvky sice mají lajky, ale nepřináší nám žádné objednávky."` },
];
const N = PAIN_CARDS.length;
/* slot definitions: distance from active → visual transform */
const SLOT = {
0: { x: 0, y: -68, rot: 0, z: 20, op: 1, pointer: "auto", scale: 1 },
1: { x: 250, y: 14, rot: 3, z: 10, op: 0.72, pointer: "auto", scale: 0.97 },
2: { x: 480, y: -14, rot: -2.5, z: 1, op: 0, pointer: "none", scale: 0.94 },
"-1":{ x: -250, y: 14, rot: -3, z: 10, op: 0.72, pointer: "auto", scale: 0.97 },
"-2":{ x: -480, y: -14, rot: 2.5, z: 1, op: 0, pointer: "none", scale: 0.94 },
};
function getSlot(activeIdx, cardIdx) {
let d = ((cardIdx - activeIdx) % N + N) % N; // 0..N-1
if (d > N / 2) d -= N; // fold to -(N/2)..N/2
return SLOT[d] || SLOT[2]; // default to hidden far-right
}
/* ── single card ─────────────────────────────────────────────────────────── */
function PainCard({ card, slot, isActive, onClick }) {
const t = `translate(-50%, -50%) translateX(${slot.x}px) translateY(${slot.y}px) rotate(${slot.rot}deg) scale(${slot.scale})`;
return (
);
}
/* ── dot indicators ──────────────────────────────────────────────────────── */
function Dots({ count, active, onGo }) {
return (
{Array.from({ length: count }, (_, i) => (
);
}
/* ── main section ─────────────────────────────────────────────────────────── */
function PainSection({ t: tweaks }) {
const [active, setActive] = useStateP(0);
const timerRef = useRefP(null);
const go = useCallbackP((idx) => {
setActive(((idx % N) + N) % N);
}, []);
const prev = () => go(active - 1);
const next = () => go(active + 1);
/* auto-advance */
useEffectP(() => {
timerRef.current = setInterval(() => setActive((a) => (a + 1) % N), 4800);
return () => clearInterval(timerRef.current);
}, []);
/* reset timer on manual pick */
const pick = (idx) => {
clearInterval(timerRef.current);
go(idx);
timerRef.current = setInterval(() => setActive((a) => (a + 1) % N), 4800);
};
/* keyboard */
useEffectP(() => {
const onKey = (e) => {
if (e.key === "ArrowRight") pick(active + 1);
if (e.key === "ArrowLeft") pick(active - 1);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [active]);
const Reveal = window.Reveal;
const Eyebrow = window.Eyebrow;
return (
{/* header */}
{Reveal && Eyebrow ? (
{tweaks?.painHeadline || "Poznáváte se"}{" "}
{tweaks?.painAccent || "v tomhle?"}
{tweaks?.painSubtitle || "Tyhle situace řešíme každý den. Možná i vy."}
) : null}
{/* carousel */}
{/* dot-grid bg */}
{/* radial glow behind active */}
{/* cards */}
{PAIN_CARDS.map((card, i) => (
pick(i)} />
))}
{/* nav + dots */}