'use client'
import React from 'react'
import { usePathname } from 'next/navigation'
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
import type { Page } from '../../payload-types'
import { motion } from 'framer-motion'

type BaseProps = Extract<NonNullable<Page['layout']>[0], { blockType: 'contactInfo' }>
type Props = BaseProps & { whatsappNumber?: string | null }

export const ContactInfoBlock: React.FC<Props> = ({
  address = 'DO POTWIERDZENIA PRZEZ KLIENTA',
  phone = '+49 123 456 789',
  email = 'kontakt@example.com',
  hours = 'Pon-Pt: 9:00 - 17:00\nPo wcześniejszym umówieniu',
}) => {
  const pathname = usePathname()
  const localeSegment = pathname?.split('/').filter(Boolean)[0]
  const isDe = localeSegment === 'de'
  const isEn = localeSegment === 'en'

  const t = {
    contactInfo: isEn ? 'Contact Information' : (isDe ? 'Kontaktinformationen' : 'Dane kontaktowe'),
    address: isEn ? 'Address' : (isDe ? 'Adresse' : 'Adres'),
    phone: isEn ? 'Phone' : (isDe ? 'Telefon' : 'Telefon'),
    email: isEn ? 'Email' : (isDe ? 'E-Mail' : 'E-mail'),
    hours: isEn ? 'Working Hours' : (isDe ? 'Öffnungszeiten' : 'Godziny pracy'),
  }

  return (
    <section className="py-16 md:py-24 bg-background">
      <div className="container-premium">
        <motion.div 
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-50px" }}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
          className="w-full max-w-4xl mx-auto bg-card border border-border p-8 md:p-16 relative overflow-hidden"
          style={{
            boxShadow: '0 10px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03)'
          }}
        >
          {/* Subtelny narożnik (zagięcie kartki) */}
          <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" />

          <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-10 text-center md:text-left">
            {t.contactInfo}
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
            {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">
                    {t.address}
                  </h3>
                </div>
                <p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base max-w-[65ch]">
                  {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">
                    {t.phone}
                  </h3>
                </div>
                <a 
                  href={`tel:${phone.replace(/\s+/g, '')}`} 
                  className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors max-w-[65ch]"
                >
                  {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">
                    {t.email}
                  </h3>
                </div>
                <a 
                  href={`mailto:${email}`} 
                  className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors max-w-[65ch]"
                >
                  {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">
                    {t.hours}
                  </h3>
                </div>
                <p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base max-w-[65ch]">
                  {hours}
                </p>
              </div>
            )}
          </div>
        </motion.div>
      </div>
    </section>
  )
}