import { FileText, Search, Rocket } from "lucide-react";
import { Link } from "react-router-dom";
import room1Image from "../assets/room-1.jpg";
import room2Image from "../assets/room-2.jpg";
import room3Image from "../assets/room-3.jpg";

const PartnerProcess = () => {
  const steps = [
    {
      step: "1",
      title: "Bewerben",
      description: "Senden Sie uns Ihre Bewerbungsunterlagen und stellen Sie sich sowie Ihr Unternehmen vor. Wir prüfen Ihre Qualifikationen.",
      icon: FileText,
      image: room1Image
    },
    {
      step: "2",
      title: "Prüfung",
      description: "Unser Expertenteam überprüft Ihre Bewerbung sorgfältig. Bei positivem Ergebnis laden wir Sie zu einem persönlichen Gespräch ein.",
      icon: Search,
      image: room2Image
    },
    {
      step: "3",
      title: "Onboarding",
      description: "Nach erfolgreicher Aufnahme erhalten Sie Zugang zu unserer Plattform und umfassende Schulungen für einen erfolgreichen Start.",
      icon: Rocket,
      image: room3Image
    }
  ];

  return (
    <section className="py-16 px-4 bg-accent">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-section-title text-foreground mb-6">
            So werden Sie <span className="text-primary">Partner</span>
          </h2>
          <p className="text-muted-foreground text-lg max-w-3xl mx-auto">
            In nur drei einfachen Schritten werden Sie Teil des B2in Ecosystems
            und können von allen Vorteilen unserer Partnerschaft profitieren.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-16">
          {steps.map((step, index) => (
            <div key={index} className="card-elevated p-0 overflow-hidden group hover:shadow-[var(--shadow-elevated)] transition-all duration-300">
              <div className="relative overflow-hidden">
                <img
                  src={step.image}
                  alt={step.title}
                  className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                {/* Step Number Badge */}
                <div className="absolute top-4 left-4 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg">
                  {step.step}
                </div>
              </div>

              <div className="p-8">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                    <step.icon className="w-5 h-5 text-primary" />
                  </div>
                  <h3 className="text-2xl font-medium text-foreground">
                    {step.title}
                  </h3>
                </div>

                <p className="text-muted-foreground leading-relaxed mb-6">
                  {step.description}
                </p>

                {index === steps.length - 1 && (
                  <Link to="/contact">
                    <button className="btn-secondary w-full">
                      Jetzt starten
                    </button>
                  </Link>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* CTA Section */}
        <div className="text-center">
          <div className="card-elevated p-12 rounded-3xl bg-gradient-to-br from-primary/10 to-primary/5">
            <h3 className="text-3xl font-light text-foreground mb-6">
              Bereit für den nächsten <span className="text-primary">Schritt</span>?
            </h3>
            <p className="text-muted-foreground text-lg mb-8 max-w-2xl mx-auto">
              Werden Sie noch heute Teil des B2in Ecosystems und profitieren Sie
              von innovativen Geschäftsmodellen und nachhaltigen Erfolgsstrategien.
            </p>
            <Link to="/contact">
              <button className="btn-primary text-lg px-8 py-4">
                Jetzt Partner werden
              </button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PartnerProcess;
