/* 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 = "Join Systemizers" }) {
  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: "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"
  }];


  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, 4);
  const rowB = items.slice(4);

  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" style={{ textWrap: "balance" }}>These are from the consulting work that became the AIOS, installed for founders across e-com, agencies and coaching. Founding-member results from the 30-day install are coming, and you'd be among the first.</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>
      </div>

      {active && ReactDOM.createPortal(
        <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>, document.body)}

    </section>);

}

Object.assign(window, { Testimonials });