);
}
/* ───────────────────── Testimonial stack (home view) ─────────────────────
3 fanned cards, top one is on top. Hover any card => it animates to the
top of the stack (mowaotun.com behavior). Click => open modal. */
function TestimonialStack({ testimonials, readLabel, onOpen }) {
// Track which card is currently "on top" (hovered). null = default order.
const [topIdx, setTopIdx] = useState(testimonials.length - 1);
// Pre-computed transform per slot — slot index, not card index.
const slots = [
{ x: 0, y: 24, rot: -8 },
{ x: 36, y: 12, rot: 5 },
{ x: 78, y: 0, rot: -2 },
];
// Build order: every non-top card keeps its base slot; top card gets the
// last (front) slot. We swap by moving topIdx to the LAST slot position
// and shifting the others up.
const order = testimonials.map((_, i) => i).filter((i) => i !== topIdx);
order.push(topIdx);
// slotForCard[cardIdx] = slot index
const slotForCard = [];
order.forEach((cardIdx, slotIdx) => { slotForCard[cardIdx] = slotIdx; });
return (
);
}
/* ───────────────────── Squiggle / decoration ───────────────────── */
function Squiggle() {
return (
);
}
/* ───────────────────── "selected work ↑" arrow ───────────────────── */
function SelectedWorkArrow({ label, labelX, labelY, tipX, tipY }) {
// Geometry
const LABEL_W = 240;
const LABEL_H = 30;
// Arrow starts just under the label center; ends at the tip target.
const sx = labelX;
const sy = labelY + LABEL_H + 4;
const ex = tipX;
const ey = tipY;
// SVG bounding box covers both points + padding for stroke & arrowhead.
const PAD = 28;
const minX = Math.min(sx, ex) - PAD;
const minY = Math.min(sy, ey) - PAD;
const maxX = Math.max(sx, ex) + PAD;
const maxY = Math.max(sy, ey) + PAD;
const svgW = maxX - minX;
const svgH = maxY - minY;
// Local coords inside the SVG
const lsx = sx - minX, lsy = sy - minY;
const lex = ex - minX, ley = ey - minY;
// Build a graceful arc from the label DOWN-LEFT to the tip. The curve
// descends gently — its lowest point stays roughly at tip-Y so it does
// not dip into the giant PRODUCT / DESIGNER centerpiece below.
const dx = lex - lsx; // negative — tip is left of start
const dy = ley - lsy; // small positive — tip is slightly lower than start
const cp1x = lsx - 30; // pull start tangent gently LEFT
const cp1y = lsy + 32; // …and DOWN (so the arrow leaves the label heading toward the tip)
const cp2x = lex + Math.max(80, Math.abs(dx) * 0.35); // come in from the upper-right of the tip
const cp2y = ley - 30; // …above the tip so the arrowhead points DOWN-LEFT
const path = `M ${lsx} ${lsy} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${lex} ${ley}`;
// Arrowhead: oriented along the tangent at the end of the cubic
// (from cp2 → end). Two short ticks rotated ±28° back from the tip.
const tdx = lex - cp2x;
const tdy = ley - cp2y;
const tlen = Math.hypot(tdx, tdy) || 1;
const tnx = tdx / tlen;
const tny = tdy / tlen;
const AH = 16; // arrowhead length
const ANG = (28 * Math.PI) / 180;
const cos = Math.cos(ANG), sin = Math.sin(ANG);
// Two rotated unit vectors
const ax1 = lex - AH * (tnx * cos - tny * sin);
const ay1 = ley - AH * (tnx * sin + tny * cos);
const ax2 = lex - AH * (tnx * cos + tny * sin);
const ay2 = ley - AH * (-tnx * sin + tny * cos);
const headPath = `M ${ax1} ${ay1} L ${lex} ${ley} L ${ax2} ${ay2}`;
// Unique filter id so multiple instances don't collide
const fid = "pencil-" + Math.abs((labelX * 31 + tipX) | 0);
return (
{/* The label */}
{label}
{/* The hand-drawn arrow */}
);
}
/* ───────────────────── Static card (mobile, no drag) ─────────────────────
Renders the same visual envelope as but without pointer-drag
wiring — used in the mobile vertical layout where dragging would
conflict with page scrolling. */
function StaticCard({ rotation = 0, className = "", children, style = {} }) {
return (
{children}
);
}
/* ───────────────────── Section divider (mobile) ─────────────────────
Small-caps label on the left, hand-drawn horizontal line trailing off
to the right — used to separate sections on mobile / tablet. */
function SectionDivider({ label }) {
return (