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: "Sarah Mitchell",
    company: "DesignFlow Co",
    image:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "The component library is extensive and well-documented. Saved us months of development time.",
  },
  {
    name: "James Chen",
    company: "TechVision Labs",
    image:
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "Outstanding support and continuous updates. Lightswind UI keeps getting better every release.",
  },
  {
    name: "Emma Davis",
    company: "PixelPerfect Studios",
    image:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=facearea&w=96&h=96&facepad=2",
    review:
      "Responsive by default and looks amazing on all devices. This is exactly what we needed.",
  },
];

export default function ThreeScrollTrigger() {
  // Split reviews into 2 rows with 3 cards each
  const row1 = reviews.slice(0, 3);
  const row2 = reviews.slice(3, 6);
  const [paused, setPaused] = useState(false);

  return (
    <div className="w-full mx-auto max-w-[1400px] overflow-hidden">
      <ThreeDScrollTriggerContainer className="py-8 space-y-8">
        {/* Row 1 - 3 Cards scrolling right */}
        <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>

        {/* Row 2 - 3 Cards scrolling left */}
        <ThreeDScrollTriggerRow baseVelocity={2} direction={-1} paused={paused}>
          <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>
      </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-6 w-80 min-w-80 flex-shrink-0 hover:shadow-lg transition-shadow"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <div className="flex items-center gap-3 mb-4">
        <img
          src={image}
          alt={name}
          className="w-12 h-12 rounded-full object-cover flex-shrink-0"
          loading="lazy"
        />
        <div className="flex-1 min-w-0">
          <div className="font-semibold text-gray-900 truncate">{name}</div>
          <div className="text-xs text-gray-500 truncate">{company}</div>
        </div>
      </div>
      <div className="text-sm text-gray-700 line-clamp-4">
        "{review}"
      </div>
    </div>
  );
}