Untitled

// /components/footer-with-contact.tsx:

"use client"

import { useState } from "react"
import { Instagram, Mail, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "sonner"

async function sendEmail(data) {
  const response = await fetch("/api/send", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })

  if (!response.ok) {
    throw new Error("Failed to send email")
  }

  return response.json()
}

export function FooterWithContact({ clientConfig }) {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [message, setMessage] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)

    try {
      await sendEmail({ name, email, message })
      toast.success("Nachricht erfolgreich gesendet!")
      setName("")
      setEmail("")
      setMessage("")
    } catch (error) {
      toast.error("Fehler beim Senden der Nachricht. Bitte versuchen Sie es später erneut.")
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <footer className="w-full py-12 border-t border-muted">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          <div className="space-y-6">
            <h3 className="text-2xl font-bold">Interesse geweckt?</h3>
            <p className="text-muted-foreground">Ich freue mich auf Ihre Nachricht und melde mich zeitnah bei Ihnen.</p>
            <form onSubmit={handleSubmit} className="space-y-4">
              <Input
                type="text"
                placeholder="Name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                className="bg-muted"
              />
              <Input
                type="email"
                placeholder="E-Mail"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="bg-muted"
              />
              <Textarea
                placeholder="Ihre Nachricht"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                required
                className="bg-muted"
              />
              <Button type="submit" disabled={isSubmitting} className="w-full">
                {isSubmitting ? (
                  "Wird gesendet..."
                ) : (
                  <>
                    Nachricht senden
                    <Send className="ml-2 h-4 w-4" />
                  </>
                )}
              </Button>
            </form>
          </div>
          
          <div className="flex flex-col justify-between h-full">
            <div className="space-y-6">
              <div className="flex flex-col items-start space-y-4">
                <p className="text-lg font-semibold text-foreground">{clientConfig.photographerName}</p>
                <p className="text-base text-muted-foreground">{clientConfig.photographerCredit}</p>
              </div>
              <div className="flex items-center space-x-4">
                <Button variant="outline" size="icon" asChild className="hover:bg-muted transition-colors duration-200">
                  
                    href={clientConfig.photographerInstagram}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center"
                  >
                    <Instagram className="h-5 w-5" />
                    <span className="sr-only">Instagram</span>
                  </a>
                </Button>
                <Button variant="outline" size="icon" asChild className="hover:bg-muted transition-colors duration-200">
                  <a href={`mailto:${clientConfig.photographerEmail}`} className="flex items-center justify-center">
                    <Mail className="h-5 w-5" />
                    <span className="sr-only">E-Mail</span>
                  </a>
                </Button>
              </div>
            </div>
            <div className="mt-8 lg:mt-0 text-sm text-muted-foreground">
              © {new Date().getFullYear()} {clientConfig.photographerName}. Alle Rechte vorbehalten.
              <div className="mt-2">
                <a href="/datenschutz" className="hover:underline">
                  Datenschutzerklärung
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}