128 lines
5.4 KiB
TypeScript
128 lines
5.4 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { usePathname } from 'next/navigation'
|
|
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
|
|
import { motion } from 'framer-motion'
|
|
|
|
export const ContactSectionClient: React.FC<any> = ({
|
|
address,
|
|
phone,
|
|
email,
|
|
hours,
|
|
formNode,
|
|
}) => {
|
|
const pathname = usePathname()
|
|
const isDe = pathname?.split('/').filter(Boolean)[0] === 'de'
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-background">
|
|
<div className="container-premium">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
|
|
|
|
{/* Lewa kolumna: Informacje kontaktowe */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -16 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
|
className="flex flex-col"
|
|
>
|
|
<h2 className="font-heading text-3xl md:text-4xl font-extrabold text-foreground mb-8 text-balance">
|
|
{isDe ? 'Kontaktinformationen' : 'Dane kontaktowe'}
|
|
</h2>
|
|
|
|
<div className="bg-card border border-border p-8 relative overflow-hidden flex-grow"
|
|
style={{ boxShadow: '0 10px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03)' }}
|
|
>
|
|
<div className="absolute top-0 right-0 w-12 h-12 bg-background border-l border-b border-border shadow-sm transform translate-x-6 -translate-y-6 rotate-45 pointer-events-none" />
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-10">
|
|
{address && (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
|
|
<MapPin size={24} strokeWidth={2.5} />
|
|
<h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
|
|
{isDe ? 'Adresse' : 'Adres'}
|
|
</h3>
|
|
</div>
|
|
<p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base">
|
|
{address}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{phone && (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
|
|
<Phone size={24} strokeWidth={2.5} />
|
|
<h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
|
|
{isDe ? 'Telefon' : 'Telefon'}
|
|
</h3>
|
|
</div>
|
|
<a
|
|
href={`tel:${phone.replace(/\s+/g, '')}`}
|
|
className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors"
|
|
>
|
|
{phone}
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{email && (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
|
|
<Mail size={24} strokeWidth={2.5} />
|
|
<h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
|
|
{isDe ? 'E-Mail' : 'E-mail'}
|
|
</h3>
|
|
</div>
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors"
|
|
>
|
|
{email}
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{hours && (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
|
|
<Clock size={24} strokeWidth={2.5} />
|
|
<h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
|
|
{isDe ? 'Öffnungszeiten' : 'Godziny pracy'}
|
|
</h3>
|
|
</div>
|
|
<p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base">
|
|
{hours}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Prawa kolumna: Formularz kontaktowy */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 16 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
|
|
className="flex flex-col"
|
|
>
|
|
<h2 className="font-heading text-3xl md:text-4xl font-extrabold text-foreground mb-8 text-balance">
|
|
{isDe ? 'Schreiben Sie uns' : 'Napisz do nas'}
|
|
</h2>
|
|
<div className="bg-card border border-border p-8 relative overflow-hidden flex-grow"
|
|
style={{ boxShadow: '0 10px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03)' }}
|
|
>
|
|
{formNode}
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|