import { ArrowRight } from "lucide-react";
import room1 from "../assets/room-1.jpg";
import room2 from "../assets/room-2.jpg";
import room3 from "../assets/room-3.jpg";

const BrandWorlds = () => {
  const worlds = [
    {
      id: 1,
      image: room1,
      title: "style2own",
      description: "Für kreative, lifestyle-orientierte Wohnkonzepte und moderne Lebensräume.",
      link: "/about"
    },
    {
      id: 2,
      image: room2,
      title: "stileigentum",
      description: "Für exklusive Premium-Immobilien und zeitlose Eleganz mit höchsten Ansprüchen.",
      link: "/rooms"
    },
    {
      id: 3,
      image: room3,
      title: "B2A Export",
      description: "Unser B2B-Arm für den Export von europäischem Design in die USA.",
      link: "/partner"
    }
  ];

  return (
    <section className="section-padding">
      <div className="container-padding">
        {/* Section Title */}
        <div className="text-center mb-16">
          <h2 className="text-section-title">Unsere Markenwelten</h2>
          <p className="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
            Entdecken Sie die Welten von B2in – drei Bereiche, ein Ökosystem.
          </p>
        </div>

        {/* Brand Cards */}
        <div className="grid md:grid-cols-3 gap-8">
          {worlds.map((world) => (
            <div key={world.id} className="card-elevated overflow-hidden group hover:shadow-[var(--shadow-elevated)] transition-all duration-300">
              <div className="relative">
                <img
                  src={world.image}
                  alt={world.title}
                  className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
              </div>

              <div className="p-6 spacing-small">
                <h3 className="text-xl font-medium">{world.title}</h3>
                <p className="text-muted-foreground leading-relaxed">
                  {world.description}
                </p>

                <a
                  href={world.link}
                  className="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300"
                >
                  Mehr erfahren
                  <ArrowRight className="w-4 h-4" />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default BrandWorlds;
