Gallery 3

"use client";

import { cn } from "@/lib/utils";

const galleryImages = [
  {
    id: "1",
    position: "top-left",
    rotation: "-6deg",
    src: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&h=300&fit=crop",
  },
  {
    id: "2",
    position: "top-center",
    rotation: "0deg",
    src: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=450&h=350&fit=crop",
  },
  {
    id: "3",
    position: "top-right",
    rotation: "5deg",
    src: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=400&h=280&fit=crop",
  },
  {
    id: "4",
    position: "bottom-left",
    rotation: "-4deg",
    src: "https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?w=350&h=420&fit=crop",
  },
  {
    id: "5",
    position: "bottom-center",
    rotation: "3deg",
    src: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=380&h=300&fit=crop",
  },
  {
    id: "6",
    position: "bottom-right",
    rotation: "0deg",
    src: "https://images.unsplash.com/photo-1552196563-55cd4e45efb3?w=350&h=400&fit=crop",
  },
];

// Decorative leaf component
function LeafDecoration({ className }: { className?: string }) {
  return (
    <svg className={cn("h-16 w-12", className)} fill="none" viewBox="0 0 60 80">
      <path
        d="M30 5 Q45 20 40 45 Q35 65 30 75 Q25 65 20 45 Q15 20 30 5"
        fill="#a8c9b5"
        opacity="0.7"
      />
      <path
        d="M30 10 Q30 40 30 70"
        fill="none"
        stroke="#7ba88e"
        strokeWidth="1.5"
      />
    </svg>
  );
}

// Decorative arc line
function ArcLine({ className }: { className?: string }) {
  return (
    <svg
      className={cn("pointer-events-none absolute h-48 w-48", className)}
      fill="none"
      viewBox="0 0 200 200"
    >
      <circle
        cx="100"
        cy="100"
        fill="none"
        opacity="0.5"
        r="80"
        stroke="#d4d0c8"
        strokeDasharray="4 6"
        strokeWidth="1"
      />
    </svg>
  );
}

export function Gallery3() {
  return (
    <section className="relative min-h-200 w-full overflow-hidden bg-gray-50 py-16 md:py-20 dark:bg-neutral-900">
      {/* Decorative leaves */}
      <LeafDecoration className="absolute top-20 left-8 rotate-[-30deg]" />
      <LeafDecoration className="absolute top-16 right-12 rotate-25" />
      <LeafDecoration className="absolute bottom-32 left-24 rotate-[-15deg]" />
      <LeafDecoration className="absolute right-16 bottom-24 rotate-20" />

      {/* Decorative arcs */}
      <ArcLine className="top-10 left-20 opacity-30" />
      <ArcLine className="top-40 right-40 opacity-20" />
      <ArcLine className="bottom-20 left-1/3 opacity-25" />

      {/* Center Text */}
      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
        <div className="px-6 text-center">
          <span className="mb-4 block text-gray-600 text-sm tracking-wide dark:text-gray-400">
            Our Gallery
          </span>

          <h2 className="font-normal text-3xl text-gray-900 leading-tight md:text-4xl lg:text-5xl dark:text-gray-100">
            Step gently into our space of
            <br />
            <span className="text-violet-600 italic dark:text-violet-400">
              harmony and calm.
            </span>
          </h2>
        </div>
      </div>

      {/* Gallery Images - Positioned absolutely for scattered effect */}
      <div className="relative mx-auto h-175 w-full max-w-7xl md:h-150">
        {/* Top Left */}
        <div
          className="absolute top-0 left-0 w-64 md:left-8 md:w-72"
          style={{ transform: `rotate(${galleryImages[0].rotation})` }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Yoga"
              className="h-44 w-full rounded-lg object-cover grayscale md:h-48"
              src={galleryImages[0].src}
            />
          </div>
        </div>

        {/* Top Center */}
        <div
          className="absolute top-0 left-1/2 w-72 -translate-x-1/2 md:w-80"
          style={{
            transform: `translateX(-50%) rotate(${galleryImages[1].rotation})`,
          }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Meditation"
              className="h-52 w-full rounded-lg object-cover grayscale md:h-56"
              src={galleryImages[1].src}
            />
          </div>
        </div>

        {/* Top Right */}
        <div
          className="absolute top-8 right-0 w-64 md:right-8 md:w-72"
          style={{ transform: `rotate(${galleryImages[2].rotation})` }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Wellness"
              className="h-40 w-full rounded-lg object-cover grayscale md:h-44"
              src={galleryImages[2].src}
            />
          </div>
        </div>

        {/* Bottom Left */}
        <div
          className="absolute bottom-0 left-4 w-60 md:left-24 md:w-64"
          style={{ transform: `rotate(${galleryImages[3].rotation})` }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Yoga pose"
              className="h-64 w-full rounded-lg object-cover grayscale md:h-72"
              src={galleryImages[3].src}
            />
          </div>
        </div>

        {/* Bottom Center */}
        <div
          className="absolute bottom-8 left-1/2 w-56 -translate-x-1/2 md:w-64"
          style={{
            transform: `translateX(-50%) rotate(${galleryImages[4].rotation})`,
          }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Stretching"
              className="h-44 w-full rounded-lg object-cover grayscale md:h-48"
              src={galleryImages[4].src}
            />
          </div>
        </div>

        {/* Bottom Right */}
        <div
          className="absolute right-4 bottom-4 w-56 md:right-20 md:w-60"
          style={{ transform: `rotate(${galleryImages[5].rotation})` }}
        >
          <div className="relative overflow-hidden rounded-xl bg-white p-2 shadow-lg">
            <img
              alt="Mindfulness"
              className="h-56 w-full rounded-lg object-cover grayscale md:h-64"
              src={galleryImages[5].src}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export default Gallery3;