import { Button } from "@/components/ui/button";
import { Star, Phone, Compass, Heart, Search } from "lucide-react";

const PlacesSection = () => {
  const places = [
    {
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/place/01.jpg",
      title: "Green Mart Apartment",
      description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor.",
      rating: 4.5,
      reviews: "2,391 reviews",
      badges: ["Featured", "$100 off $399: eblwc"],
      phone: "(123) 456-7890",
      verified: true
    },
    {
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/place/02.jpg",
      title: "Chuijhal Hotel And Restaurant",
      description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor.",
      rating: 4.5,
      reviews: "2,391 reviews",
      badges: ["10% OFF", "$100 off $399: eblwc"],
      phone: "(123) 456-7890",
      verified: false
    },
    {
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/place/03.jpg",
      title: "The Barber's Lounge",
      description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor.",
      rating: 4.5,
      reviews: "2,391 reviews",
      badges: ["10% OFF", "$100 off $399: eblwc"],
      phone: "(123) 456-7890",
      verified: false
    },
    {
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/place/04.jpg",
      title: "Gaming Expo Spectacle",
      description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor.",
      rating: 4.5,
      reviews: "2,391 reviews",
      badges: ["10% OFF", "$100 off $399: eblwc"],
      phone: "(123) 456-7890",
      verified: false
    },
    {
      image: "https://themes.easital.com/html/liston/v2.3/assets/images/place/05.jpg",
      title: "Fitness Petrol Gym and Health Club",
      description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor.",
      rating: 4.5,
      reviews: "2,391 reviews",
      badges: ["10% OFF", "$100 off $399: eblwc"],
      phone: "(123) 456-7890",
      verified: false
    }
  ];

  return (
    <section className="py-20 bg-gray-50 relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 py-4">
        <div className="grid lg:grid-cols-12 gap-8">
          {/* Sidebar */}
          <div className="lg:col-span-4 sidebar">
            <div className="text-center lg:text-left mb-12">
              <div className="inline-block font-caveat text-5xl font-medium text-primary mb-4 capitalize">
                Places
              </div>
              <h2 className="text-4xl md:text-5xl font-semibold mb-6 capitalize">
                Discover Your Favourite Place
              </h2>
              <p className="text-gray-600 mb-6">
                Our publications can provide quality and useful tips and advice for companies on how to evaluate SaaS providers and choose the best one for their needs, taking into account factors such as price, features and support.
              </p>
              <Button asChild className="mt-3">
                <a href="/explore">View All Places</a>
              </Button>
              
              {/* Decorative SVG */}
              <svg 
                className="text-primary mt-4 hidden lg:block" 
                width="200" 
                height="211" 
                viewBox="0 0 200 211" 
                fill="none" 
                xmlns="http://www.w3.org/2000/svg"
              >
                <path 
                  d="M198.804 194.488C189.279 189.596 179.529 185.52 169.407 182.07L169.384 182.049C169.227 181.994 169.07 181.939 168.912 181.884C166.669 181.139 165.906 184.546 167.669 185.615C174.053 189.473 182.761 191.837 189.146 195.695C156.603 195.912 119.781 196.591 91.266 179.049C62.5221 161.368 48.1094 130.695 56.934 98.891C84.5539 98.7247 112.556 84.0176 129.508 62.667C136.396 53.9724 146.193 35.1448 129.773 30.2717C114.292 25.6624 93.7109 41.8875 83.1971 51.3147C70.1109 63.039 59.63 78.433 54.2039 95.0087C52.1221 94.9842 50.0776 94.8683 48.0703 94.6608C30.1803 92.8027 11.2197 83.6338 5.44902 65.1074C-1.88449 41.5699 14.4994 19.0183 27.9202 1.56641C28.6411 0.625793 27.2862 -0.561638 26.5419 0.358501C13.4588 16.4098 -0.221091 34.5242 0.896608 56.5659C1.8218 74.6941 14.221 87.9401 30.4121 94.2058C37.7076 97.0203 45.3454 98.5003 53.0334 98.8449C47.8679 117.532 49.2961 137.487 60.7729 155.283C87.7615 197.081 139.616 201.147 184.786 201.155L174.332 206.827C172.119 208.033 174.345 211.287 176.537 210.105C182.06 207.125 187.582 204.122 193.084 201.144C193.346 201.147 195.161 199.887 195.423 199.868C197.08 198.548 193.084 201.144 195.528 199.81C196.688 199.192 197.846 198.552 199.006 197.935C200.397 197.167 200.007 195.087 198.804 194.488ZM60.8213 88.0427C67.6894 72.648 78.8538 59.1566 92.1207 49.0388C98.8475 43.9065 106.334 39.2953 114.188 36.1439C117.295 34.8947 120.798 33.6609 124.168 33.635C134.365 33.5511 136.354 42.9911 132.638 51.031C120.47 77.4222 86.8639 93.9837 58.0983 94.9666C58.8971 92.6666 59.783 90.3603 60.8213 88.0427Z" 
                  fill="currentColor"
                />
              </svg>
            </div>
          </div>

          {/* Content */}
          <div className="lg:col-span-8 content lg:pl-8">
            <div className="space-y-6">
              {places.map((place, index) => (
                <a href={`/offer/${index + 1}`} key={index} className="bg-white rounded-xl overflow-hidden border-0 shadow-soft hover:shadow-medium transition-all duration-300 group cursor-pointer block">
                  <div className="grid md:grid-cols-12 gap-0">
                    {/* Image */}
                    <div className="md:col-span-5 relative bg-white">
                      <div className="overflow-hidden relative h-64 md:h-full">
                        <img 
                          src={place.image} 
                          alt={place.title}
                          className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                        {/* Badges */}
                        <div className="absolute top-4 left-4 space-y-2">
                          {place.badges.map((badge, badgeIndex) => (
                            <div key={badgeIndex} className="bg-primary px-3 py-1 text-xs font-semibold text-white uppercase rounded">
                              {badge.includes("Featured") && <Star className="inline w-3 h-3 mr-1" />}
                              {badge}
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    {/* Content */}
                    <div className="md:col-span-7 p-6 flex flex-col">
                      {/* Action buttons */}
                      <div className="flex gap-2 justify-end mb-4">
                        <button className="w-10 h-10 bg-white shadow-sm rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                          <Heart className="w-4 h-4" />
                        </button>
                        <button className="w-10 h-10 bg-white shadow-sm rounded-full flex items-center justify-content-center text-primary hover:bg-primary hover:text-white transition-colors">
                          <Search className="w-4 h-4" />
                        </button>
                      </div>

                      {/* Rating */}
                      <div className="flex items-center gap-2 text-primary mb-3">
                        <Star className="w-4 h-4 fill-current" />
                        <span className="font-medium">
                          <span className="text-lg font-semibold mr-1">({place.rating})</span>
                          {place.reviews}
                        </span>
                      </div>

                      {/* Title */}
                      <h3 className="text-xl font-semibold mb-0 flex items-center gap-2">
                        {place.title}
                        {place.verified && (
                          <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
                            <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                            </svg>
                          </div>
                        )}
                      </h3>

                      {/* Description */}
                      <p className="text-gray-600 mt-3 mb-6">{place.description}</p>

                      {/* Contact */}
                      <div className="flex flex-wrap gap-6 mt-auto">
                        <a href={`tel:${place.phone}`} className="flex items-center gap-2 text-sm font-semibold text-gray-600 hover:text-primary transition-colors">
                          <Phone className="w-4 h-4" />
                          <span>{place.phone}</span>
                        </a>
                        <a href="#" className="flex items-center gap-2 text-sm font-semibold text-gray-600 hover:text-primary transition-colors">
                          <Compass className="w-4 h-4" />
                          <span>Directions</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      
      {/* Decorative blur */}
      <div className="absolute bottom-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl opacity-30"></div>
    </section>
  );
};

export default PlacesSection;