/* Systemiz site — Testimonials section.
   Real client testimonials pulled from Senja (chris-notion project),
   ordered by relevance to the ICP (founders / operators getting custom
   systems, CRMs and dashboards built). Presented as two auto-sliding
   rows ("wall of proof"); click any card to read the full quote. */

function Testimonials({ onBook, ctaCopy = "Book a Free AI OS Audit" }) {
  const { useState, useEffect } = React;

  // Ordered most→least relevant to the ICP (business owners systemizing ops).
  const items = [
  {
    quote: "I run an email agency where systems are one of the most important things. Since I don't have much Notion expertise, my systems weren't the best they could be. Jack and Chris came in, audited my whole structure and gave me a brand new way of functioning that was 10x more efficient even though they hadn't seen my type of agency before. They spotted the leaks and fixed them with ease, and built a new structure that worked for ME. Amazing service, 10/10 would recommend.",
    name: "Luca Fontana",
    role: "Founder · The Art of Scale",
    avatar: "https://cdn.senja.io/public/media/afb9bd41-a875-4694-a9bf-3507f7c4d49f_62260543-7e3e-4a29-9e92-3f6fbdb228b4_Luca%20Fon.png"
  },
  {
    quote: "This has been an absolutely incredible boon to my CRM and customer portals, as well as for my teams. I've used modified versions to help my team better manage their workflows within our Notion ecosystem, and as a framework for our own custom customer-facing user profiles. Thanks so much!",
    name: "Simeon",
    role: "Small Business Owner",
    avatar: "https://cdn.senja.io/public/avatar/618dfe75-daad-4ff4-a517-930fdc8f39ff_mood_mnky_chibi_monkey_modern_confident_CEO_company_logo_sticke_f06763a1-72da-415f-aa4f-00d738335c06.png"
  },
  {
    quote: "What a great experience working with Chris on developing my custom dashboard in Notion! I had a bunch of ideas and tasks that I didn't know how to build into something streamlined and useful. Not only was Chris able to help me build something functional, he improved on my ideas and shared suggestions that took it to the next level. I wouldn't hesitate to work with him again.",
    name: "Margarete Miller",
    role: "Online Artist",
    avatar: "https://cdn.senja.io/public/avatar/298b318b-75b2-4e09-b4d9-233783dd04c9_avatar.png"
  },
  {
    quote: "Chris has been instrumental in my Notion learning journey! His expertise simplifies even the most advanced and complex functions. As a result I've built a workspace that lets me access vital information about my business and life in an organised, clutter-free dashboard. The best Notion expert and coach I know, I highly recommend Chris's expertise to other business owners.",
    name: "Romit Jethwaney",
    role: "Founder · High Ticket Society®",
    avatar: "https://cdn.senja.io/public/avatar/a36b3a8f-580d-45d1-b629-a9f6fe87c6e0_Romit%20Display%20Picture%20Upscaled.jpg"
  },
  {
    quote: "I needed Chris' help for the dashboard I use with my clients. He helped me make it look and perform better, but also to make it more user friendly. Would definitely recommend!",
    name: "Jordi Jager",
    role: "Entrepreneur"
  },
  {
    quote: "Chris was amazing! He understood the issue I was having and what I was trying to achieve, and helped add features to my Notion CRM to make it fit for purpose for my business needs. I would highly recommend working with him!",
    name: "Jayac Heal",
    role: "Creative Director"
  },
  {
    quote: "Chris has an absolute gift! His understanding of systems, data management and Notion itself blew me away. Not only did he helped me create exactly what I needed for my Ecom business, but explains everything he's doing so you aren't left confused and you actually understand the system he's building, he teaches you how to fish so you can do it on your own! I would 200% recommend Chris to anyone looking to improve their lives or business with Notion.",
    name: "Tom",
    role: "Online Fitness Coach",
    avatar: "https://cdn.senja.io/public/avatar/911e6cd4-31da-447c-985d-8d205aa870d8_1cd71870-5457-405f-9d94-3d52611423d3.JPG"
  },
  {
    quote: "So glad I met Chris and grateful he invested the time to master Notion so he could help people like me cut down the learning curve and consolidate my understanding in a simple way. I have a property business which will be adopting Notion moving forward. Big up yourself Chris!",
    name: "Kenan",
    role: "Director · Real Estate"
  },
  {
    quote: "Great service! I got everything answered. Chris is super friendly and competent, on time and well prepared. It helped a lot to solve some problems and get recommendations on topics related to Notion. Everything from booking the call to hopping on it was handy.",
    name: "Leon",
    role: "Entrepreneur"
  },
  {
    quote: "He is the BEST! Worth it, and will definitely work with him again.",
    name: "Jeerah",
    role: "Entrepreneur"
  },
  {
    quote: "Incredible value for money. Chris definitely knows his stuff and is good at teaching it too!",
    name: "Joel",
    role: "B2B Consulting"
  }];


  const [active, setActive] = useState(null);

  // Esc closes the modal
  useEffect(() => {
    if (!active) return;
    const onKey = (e) => {if (e.key === "Escape") setActive(null);};
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active]);

  const initials = (n) => n.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();

  const Avatar = (it, cls) =>
  it.avatar ?
  <img className={`${cls}`} src={it.avatar} alt={it.name} loading="lazy" /> :
  <span className={`${cls} ${cls}-mono`} aria-hidden="true">{initials(it.name)}</span>;


  // Split into two rows; each row is duplicated for a seamless loop.
  const rowA = items.slice(0, 6);
  const rowB = items.slice(6);

  const Card = (it, key) =>
  <button className="tm-card" key={key} type="button" onClick={() => setActive(it)}>
      <span className="tm-card-open" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7" /><path d="M7 7h10v10" /></svg>
      </span>
      <p className="tm-card-quote">{it.quote}</p>
      <span className="tm-card-foot">
        {Avatar(it, "tm-av")}
        <span className="tm-card-id">
          <span className="tm-card-name">{it.name}</span>
          <span className="tm-card-role">{it.role}</span>
        </span>
      </span>
    </button>;


  const Row = (rowItems, rev, dur) =>
  <div className="tm-row">
      <div className={`tm-track tm-anim${rev ? " tm-rev" : ""}`} style={{ animationDuration: `${dur}s` }}>
        {rowItems.map((it, i) => Card(it, `a-${i}`))}
        {rowItems.map((it, i) => Card(it, `b-${i}`))}
      </div>
    </div>;


  return (
    <section className="section testimonials-section" id="testimonials" data-screen-label="09b Testimonials">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">TESTIMONIALS</span>
          <h2>What clients say</h2>
          <p className="lede" data-comment-anchor="44938c9b02-p-133-11" style={{ textWrap: "balance" }}>Feedback from founders and operators across multiple industries.</p>
        </div>

        <div className="tm-rail reveal" aria-label="Client testimonials. Hover to pause, click a card to read more.">
          {Row(rowA, false, 56)}
          {Row(rowB, true, 46)}
        </div>

        {window.CTAPanel && <window.CTAPanel
          eyebrow="Your story next"
          title="Become our next success story"
          sub="Book a free audit and let's map the exact systems and AI automations that would move your business forward."
          ctaCopy={ctaCopy}
          onBook={onBook} />}
      </div>

      {active &&
      <div className="tm-modal-overlay" onClick={() => setActive(null)} role="dialog" aria-modal="true">
          <div className="tm-modal" onClick={(e) => e.stopPropagation()}>
            <button className="tm-modal-close" type="button" aria-label="Close" onClick={() => setActive(null)}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18" /><path d="M6 6l12 12" /></svg>
            </button>
            <div className="tm-modal-mark" aria-hidden="true">"</div>
            <p className="tm-modal-quote">{active.quote}</p>
            <div className="tm-modal-foot">
              {Avatar(active, "tm-av")}
              <div>
                <div className="tm-modal-name">{active.name}</div>
                <div className="tm-modal-role">{active.role}</div>
              </div>
            </div>
          </div>
        </div>}

    </section>);

}

Object.assign(window, { Testimonials });