'use client';

import React, { Suspense } from 'react';
import { Section, Container } from '@/components/ui';
import { ContactForm } from '@/components/forms/ContactForm';
import dynamic from 'next/dynamic';

const ContactMap = dynamic(() => import('@/components/ContactMap'), {
  ssr: false,
  loading: () => <div className="h-full w-full bg-neutral-medium animate-pulse" />,
});

export interface ContactSectionProps {
  showForm?: boolean;
  showMap?: boolean;
}

export const ContactSection: React.FC<ContactSectionProps> = (props) => {
  const { showForm, showMap } = props;

  return (
    <Section className="bg-neutral-light py-12 md:py-28">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
          <div className="lg:col-span-5 flex flex-col justify-center">
            <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</h2>
            <h3 className="font-heading text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</h3>
            <p className="text-lg text-text-secondary mb-8">
              Haben Sie Fragen zu unseren Leistungen oder möchten Sie ein konkretes Projekt besprechen? Rufen Sie uns an oder schreiben Sie uns eine E-Mail.
            </p>
            
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                </div>
                <div>
                  <h4 className="font-bold text-neutral-dark">Telefon</h4>
                  <p className="text-primary hover:text-primary-dark font-medium transition-colors">
                    <a href="tel:+4935616892550">+49 3561 6892 550</a>
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                </div>
                <div>
                  <h4 className="font-bold text-neutral-dark">E-Mail</h4>
                  <p className="text-primary hover:text-primary-dark font-medium transition-colors">
                    <a href="mailto:info@e-tib.com">info@e-tib.com</a>
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                </div>
                <div>
                  <h4 className="font-bold text-neutral-dark">Standort</h4>
                  <p className="text-text-secondary leading-relaxed">
                    Gewerbestraße 22<br />
                    03172 Guben<br />
                    Deutschland
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          {showForm && (
            <div className="lg:col-span-7 relative">
              <Suspense
                fallback={
                  <div className="animate-pulse bg-white border border-neutral-100 shadow-xl h-96 rounded-2xl md:rounded-3xl" />
                }
              >
                <ContactForm />
              </Suspense>
            </div>
          )}
        </div>
      </Container>
      {showMap && (
        <section className="mt-12 h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
          <Suspense
            fallback={<div className="h-full w-full bg-neutral-medium animate-pulse" />}
          >
            <ContactMap
              address="Gewerbestraße 22\n03172 Guben"
              lat={51.9547}
              lng={14.7214}
            />
          </Suspense>
        </section>
      )}
    </Section>
  );
};