"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Linkedin, Twitter } from "lucide-react";

export default function ContactoPage() {
  const officeLocations = `
**Nuestras Oficinas:**\n
**Lampa:** Av. La Montaña 123, Lampa, Región Metropolitana\n
**Antofagasta:** Calle Esmeralda 456, Antofagasta\n
**La Serena:** Ruta 5 Norte Km 470, La Serena\n
**Curicó:** Av. Camilo Henríquez 789, Curicó\n
**Temuco:** Bernardo O'Higgins 101, Temuco
`;

  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumSizeLargeTitles"
        background="grid"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              {
                name: "Home",                id: "home"},
              {
                name: "About",                id: "about"},
              {
                name: "Features",                id: "features"},
              {
                name: "Equipment",                id: "equipment"},
              {
                name: "Impact",                id: "impact"},
              {
                name: "Partners",                id: "partners"},
              {
                name: "Testimonials",                id: "testimonials"},
              {
                name: "Mantenimiento",                id: "/mantenimiento"},
              {
                name: "Contacto",                id: "/contacto"},
            ]}
            brandName="ARRIMAQ"
          />
        </div>

        <div id="contacto" data-section="contacto">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Contáctanos"
            description={`Estamos aquí para ayudarte. Rellena el formulario o visítanos en una de nuestras oficinas.\n\n${officeLocations}`}
            inputs={[
              { name: "name", type: "text", placeholder: "Tu Nombre Completo", required: true },
              { name: "company", type: "text", placeholder: "Empresa (Opcional)" },
              { name: "email", type: "email", placeholder: "Tu Correo Electrónico", required: true },
              { name: "phone", type: "tel", placeholder: "Número de Teléfono", required: true },
            ]}
            textarea={{ name: "message", placeholder: "Tu Mensaje", rows: 5, required: true }}
            buttonText="Enviar Mensaje"
            imageSrc="http://img.b2bpic.net/free-photo/group-diverse-people-having-business-meeting_23-2149170366.jpg"
            imageAlt="Oficina moderna con equipo de trabajo"
            mediaPosition="right"
            mediaAnimation="opacity"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoText="ARRIMAQ"
            copyrightText="© 2024 ARRIMAQ. All rights reserved."
            socialLinks={[
              {
                icon: Twitter,
                href: "https://twitter.com/arrimaq",                ariaLabel: "Twitter"},
              {
                icon: Linkedin,
                href: "https://linkedin.com/company/arrimaq",                ariaLabel: "LinkedIn"},
              {
                icon: Facebook,
                href: "https://facebook.com/arrimaq",                ariaLabel: "Facebook"},
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
