/* Testimonials — unified rotator: written quotes + video testimonials in one loop.
──────────────────────────────────────────────────────────────────────────
ADDING A TESTIMONIAL:
Append an entry to the `TESTIMONIAL_ITEMS` array below. Two types:
WRITTEN:
{
type: "quote",
name: "Sarah K.",
role: "VP Engineering · Tech",
photo: "img/testimonials/sarah.png", // optional — null for initials
quote: "What they said.",
}
VIDEO (YouTube):
{
type: "video",
id: "abc123", // YouTube video ID
name: "Sarah K.",
role: "VP Engineering · Tech",
thumb: "img/testimonials/sarah-thumb.jpg", // optional — YT default used otherwise
}
The rotator auto-cycles every 12s, pauses on hover, and pauses indefinitely
while a video is playing. Order = display order; mix freely.
──────────────────────────────────────────────────────────────────────────
*/
const { useState, useEffect, useRef } = React;
const TESTIMONIAL_ITEMS = [
{
type: "video",
id: "6KtUjm7j-GM",
name: "Gabrielle Doran",
role: "Data Science · Tech",
},
{
type: "video",
id: "K4CTB91uabw",
name: "Yu Li",
role: "Systems Engineering · Biotech",
},
{
type: "video",
id: "xWz6lyA65vc",
name: "Sara Song",
role: "Data Science · Tech",
},
{
type: "quote",
name: "Christine Siu",
role: "VP of Product · Net Purpose",
photo: "img/testimonials/christine-siu.png",
quote: "I received coaching sessions from Hojeong and we worked through unpacking the tensions between my professional and personal lives. I found Hojeong to be adaptive in her coaching style and resourceful in her methods. She does just the right amount of push and pull, at times uncomfortable (remember, all growth experiences are!) and I always left with food for thought. One notable exercise we did was the visualisation of my future self. The sheer awareness gained over the one-hour session propelled me to launch my own business in a matter of weeks post, which has been growing strong since. Thank you, Hojeong! I highly recommend Hojeong's coaching.",
},
{
type: "quote",
name: "Giovanni Vazquez",
role: "Director, Technical Program Management · nXu (EdTech)",
photo: "img/testimonials/giovanni-vazquez.png",
quote: "I had always suffered from simultaneously feeling like I wasn't really achieving my full potential, but never being able to put together a plan that I was confident in. It wasn't until I underwent a series of self-discovery and goal setting sessions with Hojeong that I was able to turn my self-doubt and imposter syndrome into self-actualization. I wholeheartedly believe it is what allowed me to take my ideas for process frameworks and my passion for building things to the next level. Not only did I find myself doing much better with work, I found that I was able to compartmentalize my personal life in a more meaningful, purposeful way. Rather than feeling like I'm spinning my wheels, I feel much more well-minded to do anything.",
},
{
type: "quote",
name: "Flor",
role: "Operations Manager · Non-profit",
photo: "img/testimonials/flor-saluzzo.png",
quote: "Hojeong has been an absolute gift to have in my life. Our sessions are always insightful and full of introspection. The biggest impact she has had on me was on giving me back the confidence I had lost through bad experiences and impostor syndrome. Believing in my own capabilities and thoughts, understanding myself and feeling good about it rather than question it. They are not about reaching a career goal or a milestone, but rather being ok with who I really am now. She has also given me loads of practical career and life advices which I have followed to give me much more clarity.",
},
{
type: "quote",
name: "Ingrid O.",
role: "Software Engineer · Tech",
photo: null,
quote: "I highly recommend Kim Coaching Group's Women Leaders Club! I found the sessions to be enlightening and thought-provoking, teaching useful self-reflection tools. It helped to clarify vision and purpose, and helped to find actionable paths to reaching my goal.",
},
{
type: "quote",
name: "Anonymous",
role: "Senior leader · Tech",
photo: null,
quote: "I was impressed by the effectiveness of the session. Hojeong made me realize how attainable my goals are. They are no longer just in my imagination. I am extremely grateful for her authentic and effective coaching.",
},
];
const Testimonials = ({
num = "05",
eyebrow = "In their words",
heading = "What clients say after the work.",
screenLabel = "05 Testimonials",
bg = "var(--paper)",
} = {}) => {
const items = TESTIMONIAL_ITEMS;
const total = items.length;
const [idx, setIdx] = useState(0);
const [paused, setPaused] = useState(false);
const [videoPlaying, setVideoPlaying] = useState(false);
const next = () => { setVideoPlaying(false); setIdx((i) => (i + 1) % total); };
const prev = () => { setVideoPlaying(false); setIdx((i) => (i - 1 + total) % total); };
const goTo = (i) => { if (i !== idx) { setVideoPlaying(false); setIdx(i); } };
// Auto-cycle — paused on hover or while a video is playing
useEffect(() => {
if (paused || videoPlaying) return;
const id = setInterval(next, 12000);
return () => clearInterval(id);
}, [paused, videoPlaying, total]);
// Keyboard nav
useEffect(() => {
const onKey = (e) => {
if (e.key === "ArrowRight") next();
if (e.key === "ArrowLeft") prev();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [total]);
const item = items[idx];
return (