import Header from "../components/Header";
import Footer from "../components/Footer";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { MapPin, Mail, Phone, ArrowRight } from "lucide-react";

const Contact = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main>
        
        {/* Hero Section with Contact Form */}
        <section className="min-h-screen flex items-center relative overflow-hidden">
          <div className="container-padding py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              {/* Left Side - Hero Text */}
              <div>
                <h1 className="text-5xl lg:text-6xl font-light mb-6 font-secondary tracking-wide">
                  Send us a<br />
                  <span className="text-secondary font-medium">message.</span>
                </h1>
                <p className="text-large text-dark-muted mb-8 max-w-md">
                  Wir freuen uns auf Ihre Nachricht und werden uns schnellstmöglich bei Ihnen melden.
                </p>
              </div>

              {/* Right Side - Contact Form */}
              <div className="card-elevated p-8">
                <form className="spacing-content">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="firstName" className="text-foreground mb-2 block">
                        First name
                      </Label>
                      <Input
                        id="firstName"
                        type="text"
                        className="bg-muted border-border"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="lastName" className="text-foreground mb-2 block">
                        Last name
                      </Label>
                      <Input
                        id="lastName"
                        type="text"
                        className="bg-muted border-border"
                        required
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="company" className="text-foreground mb-2 block">
                      Company
                    </Label>
                    <Input
                      id="company"
                      type="text"
                      className="bg-muted border-border"
                    />
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="email" className="text-foreground mb-2 block">
                        Email
                      </Label>
                      <Input
                        id="email"
                        type="email"
                        className="bg-muted border-border"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="phone" className="text-foreground mb-2 block">
                        Phone
                      </Label>
                      <Input
                        id="phone"
                        type="tel"
                        className="bg-muted border-border"
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="subject" className="text-foreground mb-2 block">
                      Subject
                    </Label>
                    <Select>
                      <SelectTrigger className="bg-muted border-border">
                        <SelectValue placeholder="Wählen Sie einen Betreff" />
                      </SelectTrigger>
                      <SelectContent className="bg-background border-border z-50">
                        <SelectItem value="general">Allgemeine Anfrage</SelectItem>
                        <SelectItem value="press">Presse</SelectItem>
                        <SelectItem value="partnership">Partnerschaft</SelectItem>
                        <SelectItem value="career">Karriere</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <Label htmlFor="message" className="text-foreground mb-2 block">
                      Message
                    </Label>
                    <Textarea
                      id="message"
                      rows={5}
                      className="bg-muted border-border resize-none"
                      placeholder="Ihre Nachricht..."
                      required
                    />
                  </div>

                  <Button 
                    type="submit"
                    className="w-full btn-primary"
                  >
                    Senden
                    <ArrowRight className="ml-2 w-4 h-4" />
                  </Button>
                </form>
              </div>
            </div>
          </div>
        </section>

        {/* Contact Information Cards */}
        <section className="section-padding">
          <div className="container-padding">
            <div className="grid md:grid-cols-3 gap-8">
              {/* Location */}
              <div className="section-dark p-8 rounded-xl text-center">
                <div className="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <MapPin className="w-6 h-6 text-secondary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Our Office Location</h3>
                <p className="text-dark-muted text-sm">
                  Musterstraße 123<br />
                  12345 Berlin, Deutschland
                </p>
              </div>

              {/* Email */}
              <div className="section-dark p-8 rounded-xl text-center">
                <div className="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="w-6 h-6 text-secondary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Our Email Address</h3>
                <p className="text-dark-muted text-sm">
                  info@b2in.com<br />
                  support@b2in.com
                </p>
              </div>

              {/* Phone */}
              <div className="section-dark p-8 rounded-xl text-center">
                <div className="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Phone className="w-6 h-6 text-secondary" />
                </div>
                <h3 className="text-lg font-medium mb-2">Our Contact Numbers</h3>
                <p className="text-dark-muted text-sm">
                  +49 30 12345678<br />
                  +49 30 87654321
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Location Map Section */}
        <section className="section-dark section-padding">
          <div className="container-padding">
            <div className="text-center mb-12">
              <h2 className="text-section-title mb-4 font-secondary">
                Locate us
              </h2>
              <p className="text-dark-muted max-w-2xl mx-auto">
                Besuchen Sie uns in unserem Büro oder kontaktieren Sie uns für ein persönliches Gespräch.
              </p>
            </div>
            
            {/* Map Placeholder */}
            <div className="bg-muted rounded-xl h-96 flex items-center justify-center">
              <div className="text-center">
                <MapPin className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground">
                  Interactive Map<br />
                  <span className="text-sm">Musterstraße 123, 12345 Berlin</span>
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Social Media Section */}
        <section className="section-padding">
          <div className="container-padding">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
              <h2 className="text-section-title mb-6 font-secondary">
                Follow for<br />
                <span className="text-secondary font-medium">exclusives</span>
              </h2>
                <p className="text-muted-foreground mb-8 max-w-md">
                  Bleiben Sie auf dem Laufenden mit exklusiven Angeboten und News.
                </p>
              </div>

              <div className="spacing-small">
                {[
                  { name: "Instagram", handle: "@b2in_official" },
                  { name: "Youtube", handle: "B2IN Channel" },
                  { name: "Pinterest", handle: "B2IN Inspiration" },
                  { name: "Facebook", handle: "B2IN Deutschland" },
                  { name: "LinkedIn", handle: "B2IN Company" }
                ].map((social) => (
                  <div key={social.name} className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors cursor-pointer">
                    <div>
                      <h3 className="font-medium text-foreground">{social.name}</h3>
                      <p className="text-sm text-muted-foreground">{social.handle}</p>
                    </div>
                    <ArrowRight className="w-4 h-4 text-muted-foreground" />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Contact;