"use client";

import { motion } from "motion/react";
import { ShimmerButton } from "@/components/magicui/shimmer-button";
import { useRef, useState } from "react";
import { usePortfolioData } from "@/lib/usePortfolioData";
import { ContactForm } from "./ContactForm"; // Importar o novo componente
import { ContactInfo } from "./ContactInfo"; // Importar o novo componente

export default function Contact() {
  const { data } = usePortfolioData();
  const contactSectionRef = useRef<HTMLElement>(null);
  const [formType, setFormType] = useState<"simple" | "advanced">("simple"); // Estado para controlar o tipo de formulário

  const handleWhatsAppClick = () => {
    setFormType("simple"); // Redireciona para o formulário simples
    if (contactSectionRef.current) {
      contactSectionRef.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  const scrollToContact = () => {
    if (contactSectionRef.current) {
      contactSectionRef.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  if (!data) {
    return null; // Ou um componente de carregamento/erro
  }

  return (
    <section
      id="contact"
      ref={contactSectionRef}
      className="py-20 px-4 bg-gradient-to-t from-black/20 to-transparent"
    >
      <div className="max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
            <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
            <span className="text-sm font-medium text-cyan-300">
              Vamos Conversar
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
            Vamos Conversar
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Estou sempre interessado em novos desafios e oportunidades. Vamos
            discutir como posso ajudar seu projeto?
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-8 items-start mt-16">
          {/* Contact Info */}
          <ContactInfo onWhatsAppClick={handleWhatsAppClick} />

          {/* Contact Options and Map */}
          <div className="flex flex-col gap-8">
            <ContactForm formType={formType} setFormType={setFormType} />{" "}
            {/* Usar o novo componente ContactForm */}
            {/* Mapa */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              viewport={{ once: true }}
            >
              <h3 className="text-2xl font-semibold mb-4 text-blue-400">
                Onde me encontrar
              </h3>
              <div className="overflow-hidden rounded-lg shadow-lg">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41412.34944306462!2d-48.8485392!3d-26.0388466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dc04ecd7709991%3A0x91fa53b8c6ced1e0!2sGaruva%2C%20SC%2C%2089248-000!5e1!3m2!1spt-BR!2sbr!4v1760215413380!5m2!1spt-BR!2sbr"
                  width="100%"
                  height="450"
                  style={{ border: 0 }}
                  allowFullScreen={true}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                ></iframe>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}