webklar-alt/src/components/Contact.tsx

import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight, Mail, Phone } from "lucide-react";
import BorderGlow from "@/components/BorderGlow";

const Contact = () => {
  return (
    <section id="contact" className="py-24 md:py-32 bg-background relative">
      <div className="container mx-auto px-6">
        <div className="max-w-6xl mx-auto">
          <BorderGlow
            edgeSensitivity={30}
            glowColor="40 80 80"
            backgroundColor="#120F17"
            lightBackgroundColor="hsl(0 0% 96%)"
            borderRadius={28}
            glowRadius={40}
            glowIntensity={1}
            coneSpread={25}
            animated
            colors={['#c084fc', '#f472b6', '#38bdf8']}
          >
            <div className="p-8 md:p-12 lg:p-16">
              <div className="mb-12">
                <div className="label-tag mb-4">Kontakt</div>
                <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
                  Der nächste Schritt<br />
                  <span className="text-muted-foreground">ist ein Gespräch</span>
                </h2>
                <p className="text-muted-foreground text-lg max-w-xl">
                  In 15 Minuten klären wir, ob und wie WEBklar Ihr Unternehmen digital
                  voranbringt – kostenlos und ohne Verpflichtung.
                </p>
              </div>

              <div className="flex flex-col sm:flex-row gap-4 mb-16">
                <Link
                  to="/kontakt"
                  data-analytics-cta="Potenzialanalyse starten"
                  data-analytics-location="contact_section"
                >
                  {/* Etwas dunkleres Blau als der Standard-Button (3,45:1 -> 4,76:1 mit weißem Text, Hover 6,08:1);
                      die Farbe gilt in beiden Themes, weil der Button nicht von Theme-Farben abhängt. */}
                  <Button
                    size="lg"
                    className="btn-minimal rounded-full px-8 py-6 text-base font-medium group bg-[hsl(198,93%,35%)] hover:bg-[hsl(198,93%,30%)]"
                  >
                    Potenzialanalyse starten
                    <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>
              </div>

              <div className="divider mb-12" />
              <div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
                <a href="mailto:support@webklar.com" className="flex items-center gap-3 hover:text-foreground transition-colors group">
                  <Mail className="w-5 h-5" />
                  <span>support@webklar.com</span>
                </a>
                <a href="tel:+4917623726355" className="flex items-center gap-3 hover:text-foreground transition-colors group">
                  <Phone className="w-5 h-5" />
                  <span>0176 23726355</span>
                </a>
              </div>
            </div>
          </BorderGlow>
        </div>
      </div>
    </section>
  );
};

export default Contact;