import React from 'react';
import { companyDetails } from '@/content/company';
import { ContactForm } from '../forms/ContactForm';
import { MapPin, Phone, Mail, Clock, FileText } from 'lucide-react';

export function ContactSection() {
  return (
    <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
        {/* Lewa kolumna: Dane kontaktowe */}
        <div className="flex flex-col">
          <h2 className="text-3xl md:text-4xl font-extrabold text-primary font-heading mb-6">
            Porozmawiajmy o Twoim projekcie
          </h2>
          <p className="text-text-muted text-lg mb-12">
            Jesteśmy do Twojej dyspozycji. Zadzwoń, napisz e-mail lub skorzystaj z formularza obok. Odpowiadamy najszybciej jak to możliwe, najczęściej w ciągu kilku godzin.
          </p>

          <div className="space-y-8 flex-grow">
            {/* Telefon */}
            <div className="flex items-start gap-4 group">
              <div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
                <Phone className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Zadzwoń do nas</p>
                <a href={`tel:${companyDetails.phoneRaw}`} className="text-2xl font-bold text-primary hover:text-accent transition-colors font-heading">
                  {companyDetails.phone}
                </a>
              </div>
            </div>

            {/* Email */}
            <div className="flex items-start gap-4 group">
              <div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
                <Mail className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Napisz e-mail</p>
                <a href={`mailto:${companyDetails.email}`} className="text-xl font-bold text-primary hover:text-accent transition-colors font-heading">
                  {companyDetails.email}
                </a>
              </div>
            </div>

            {/* Adres */}
            <div className="flex items-start gap-4 group">
              <div className="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors">
                <MapPin className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm font-semibold text-text-muted uppercase tracking-wider mb-1">Nasze biuro</p>
                <div className="text-lg font-medium text-primary">
                  {companyDetails.name}<br />
                  {companyDetails.address.street}<br />
                  {companyDetails.address.zipCode} {companyDetails.address.city}
                </div>
              </div>
            </div>

            {/* Godziny i NIP */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-8 border-t border-border">
              <div className="flex items-start gap-3">
                <Clock className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-semibold text-text-muted mb-1">Godziny pracy</p>
                  <p className="text-sm text-primary font-medium">{companyDetails.hours}</p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <FileText className="w-5 h-5 text-primary/60 mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-semibold text-text-muted mb-1">Dane firmy</p>
                  <p className="text-sm text-primary font-medium">NIP: {companyDetails.nip}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Prawa kolumna: Formularz */}
        <div className="relative">
          {/* Tło dekoracyjne */}
          <div className="absolute inset-0 bg-primary/5 rounded-[2.5rem] transform translate-x-4 translate-y-4 -z-10 hidden sm:block" />
          <ContactForm />
        </div>
      </div>
    </section>
  );
}