import React, { useEffect } from "react";
import Layout from "@/components/layout/Layout";
import HeroSection from "@/components/sections/HeroSection";
import ContactForm from "@/components/contact/ContactForm";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { useLocation } from "react-router-dom";
const ContactPage = () => {
  const location = useLocation();
  const contactInfo = [{
    icon: MapPin,
    title: "Notre adresse",
    details: ["Le Connecteur", "45 Av. du Président J F Kennedy", "64200 Biarritz, France"],
    showLogo: true
  }, {
    icon: Phone,
    title: "Téléphone",
    details: ["+33 6 07 234 404"]
  }, {
    icon: Mail,
    title: "Email",
    details: ["contact@bbc.how"],
    isEmail: true
  }, {
    icon: Clock,
    title: "Horaires d'ouverture",
    details: ["Lundi - Vendredi: 9h - 18h", "Weekend: Fermé"]
  }];
  useEffect(() => {
    if (location.hash === '#contact-form') {
      setTimeout(() => {
        const contactForm = document.getElementById('contact-form');
        if (contactForm) {
          contactForm.scrollIntoView({
            behavior: 'smooth'
          });
        }
      }, 100);
    }
  }, [location]);
  return <Layout>
      <div className="pt-24">
        <HeroSection title="Accélérez votre transformation digitale" subtitle="Discutons de votre projet de site web ultra-rapide ou d'agent IA sur mesure. Notre équipe d'experts vous accompagne dans votre transformation digitale avec des solutions innovantes livrées en 48h." imageUrl="/lovable-uploads/b9595a1f-f00e-43c0-b4ca-80fa523503d0.png" buttonText="" />
      </div>

      {/* Contact Section */}
      <section id="contact-form" className="py-16 md:py-24 bg-gradient-to-b from-blue-50/40 via-slate-50 to-gray-50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Contact Information */}
            <div className="lg:col-span-1 space-y-8">
              <div>
                <h2 className="text-3xl font-bold mb-6">
                  Démarrons votre projet
                </h2>
                <p className="text-gray-700 mb-8">
                  Spécialistes en développement ultra-rapide et intelligence artificielle, nous transformons vos idées en solutions digitales innovantes. Contactez-nous pour discuter de votre projet.
                </p>
              </div>

              {contactInfo.map(item => {
              const Icon = item.icon;
              return <Card key={item.title}>
                    <CardContent className="p-6 flex">
                      <div className="h-12 w-12 rounded-full bg-primary-50 flex items-center justify-center mr-4">
                        <Icon className="h-6 w-6 text-primary-600" />
                      </div>
                      <div className="flex-1">
                        {item.showLogo && <img src="/lovable-uploads/42f7160a-d66f-4b1b-a41f-5afa0b1bb48e.png" alt="Big Brozers Consulting" className="h-16 mb-2" />}
                        <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
                        {item.details.map((detail, index) => <p key={index} className="text-gray-600">
                            {item.isEmail ? <a href={`mailto:${detail}`} className="text-primary-600 hover:text-primary-700 underline">
                                {detail}
                              </a> : detail}
                          </p>)}
                      </div>
                    </CardContent>
                  </Card>;
            })}
            </div>

            {/* Contact Form */}
            <div className="lg:col-span-2 bg-white/80 backdrop-blur-sm p-8 rounded-lg shadow-sm">
              <h2 className="text-2xl font-bold mb-6">
                Envoyez-nous un message
              </h2>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* Team Image Section */}
      <section className="py-16 bg-gradient-to-b from-purple-50/30 via-blue-50/20 to-slate-50">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <img alt="Équipe Big Brozers Consulting" className="w-full max-w-4xl mx-auto rounded-lg shadow-lg" onError={e => {
            console.log('Team image failed to load, using fallback');
            e.currentTarget.src = "/placeholder.svg";
          }} src="/lovable-uploads/aa11d349-72f0-4027-b734-1df81fb70816.jpg" />
          </div>
        </div>
      </section>

      {/* Location Section */}
      <section className="py-16 md:py-24 bg-gradient-to-b from-indigo-50/40 via-purple-50/20 to-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl font-bold mb-6">
              Retrouvez-nous
            </h2>
            <p className="text-gray-700">
              Notre bureau est situé au Connecteur, au cœur de Biarritz, facilement accessible en transports en commun.
            </p>
          </div>

          <div className="rounded-lg overflow-hidden shadow-lg bg-white">
            <img src="/lovable-uploads/a30a7841-a2ad-405b-ac0e-069a20bd1353.png" alt="Le Connecteur - Bâtiment moderne à Biarritz" className="w-full max-h-[600px] object-contain" onError={e => {
            console.log('Location image failed to load');
            e.currentTarget.src = "/placeholder.svg";
          }} />
          </div>
        </div>
      </section>
    </Layout>;
};
export default ContactPage;