import ThreeDScrollTriggerRow, {
  ThreeDScrollTriggerContainer,
} from "../lightswind/ThreeDScrollTrigger";
import React, { useState } from "react";
const reviews = [
  {
    name: "Aria Thompson",
    company: "CreativePixel Studio",
    image:
      "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "Lightswind UI has completely changed how we design modern interfaces. Every component feels elegant, responsive, and intuitive.",
  },
  {
    name: "Ethan Rivera",
    company: "CodeLoom Technologies",
    image:
      "https://images.unsplash.com/photo-1465101162946-4377e57745c3?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "The customization options in Lightswind UI are unmatched. We built an entire SaaS dashboard in days instead of weeks.",
  },
  {
    name: "Liam Patel",
    company: "NextGen Interfaces",
    image:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
  },
  {
    name: "Liam Patel",
    company: "NextGen Interfaces",
    image:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
  },
  {
    name: "Liam Patel",
    company: "NextGen Interfaces",
    image:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
  },
  {
    name: "Liam Patel",
    company: "NextGen Interfaces",
    image:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
  },
  {
    name: "Liam Patel",
    company: "NextGen Interfaces",
    image:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "From landing pages to complex dashboards, Lightswind UI makes building visually consistent UIs effortless and fun.",
  },
];

export default function ThreeScrollTrigger() {
  // Split reviews across 3 rows for masonry feel
  // Split reviews across 3 rows
  const row1 = [reviews[0], reviews[1]];
  const row2 = [reviews[2], reviews[3]];
  const row3 = [reviews[4], reviews[5], reviews[6]];
  const [paused, setPaused] = useState(false);
  return (
    <div className="w-full mx-auto max-w-[1300px] overflow-hidden">
      <ThreeDScrollTriggerContainer className="py-8 space-y-8">
       

        <ThreeDScrollTriggerRow baseVelocity={2} direction={1} paused={paused}>
          <div className="flex flex-row gap-6 px-3 py-1">
            {row1.map((rev, idx) => (
              <ReviewCard
                key={idx}
                {...rev}
                onMouseEnter={() => setPaused(true)}
                onMouseLeave={() => setPaused(false)}
              />
            ))}
          </div>
        </ThreeDScrollTriggerRow>

        <ThreeDScrollTriggerRow baseVelocity={2} direction={-1}>
          <div className="flex flex-row gap-6 px-3 py-1">
            {row2.map((rev, idx) => (
              <ReviewCard key={idx} {...rev}   onMouseEnter={() => setPaused(true)}
                onMouseLeave={() => setPaused(false)}  />
            ))}
          </div>
        </ThreeDScrollTriggerRow>

        <ThreeDScrollTriggerRow baseVelocity={2} direction={1}>
          <div className="flex flex-row gap-6 px-3 py-1">
            {row3.map((rev, idx) => (
              <ReviewCard key={idx} {...rev}   onMouseEnter={() => setPaused(true)}
                onMouseLeave={() => setPaused(false)} />
            ))}
          </div>
        </ThreeDScrollTriggerRow>
      </ThreeDScrollTriggerContainer>
    </div>
  );
}

// Card component for clarity and reuse
function ReviewCard({ name, company, image, review ,onMouseEnter, onMouseLeave}) {
  return (
    <div className="bg-[#fbfbfb] rounded-xl shadow-md p-5 w-72 "  onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}>
      <div className="flex items-center mb-2">
        <img
          src={image}
          alt={name}
          className="w-10 h-10 rounded-full mr-3 object-cover"
          loading="lazy"
        />
        <div>
          <div className="font-semibold text-gray-900">{name}</div>
          <div className="text-xs text-gray-400">{company}</div>
        </div>
      </div>
      <div className="text-sm text-gray-700 break-words text-wrap">
        {review}
      </div>
    </div>
  );
}
