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

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-4xl">
          {/* Section Header */}
          <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">
              Bereit für Ihr<br />
              nächstes Projekt?
            </h2>
            <p className="text-muted-foreground text-lg max-w-xl">
              Lassen Sie uns gemeinsam Ihre digitale Vision verwirklichen. 
              Buchen Sie jetzt ein kostenloses Erstgespräch.
            </p>
          </div>

          {/* CTA */}
          <div className="flex flex-col sm:flex-row gap-4 mb-16">
            <Link to="/kontakt">
              <Button
                size="lg"
                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
              >
                Termin buchen
                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
              </Button>
            </Link>
          </div>

          {/* Contact Info */}
          <div className="divider mb-12" />
          <div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
            <a href="mailto:hello@webklar.de" className="flex items-center gap-3 hover:text-foreground transition-colors group">
              <Mail className="w-5 h-5" />
              <span>hello@webklar.de</span>
            </a>
            <a href="tel:+4912345678" className="flex items-center gap-3 hover:text-foreground transition-colors group">
              <Phone className="w-5 h-5" />
              <span>+49 123 456 78</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;