'use client';

import { ContactForm } from '@/features/contact/ContactForm';
import { motion, useReducedMotion } from 'framer-motion';
import { Square } from 'lucide-react';
import Image from 'next/image';
import { useRef } from 'react';
import { forwardRef } from 'react';

const listItems = [
  'Más de veinte años de experiencia en el segmento premium',
  'Atención exclusiva en el primer contacto',
  'Operaciones transparentes seguras y personalizadas',
];

export const Register = forwardRef<HTMLElement>((props, ref) => {
  const shouldReduceMotion = useReducedMotion();

  const formRef = useRef<HTMLDivElement>(null);

  return (
    <section id="register" ref={ref} className="bg-foreground px-4 py-21.25 md:px-10 lg:px-28">
      <div className="malek-containter flex gap-16">
        <div className="text-text-primary flex flex-1 flex-col gap-6">
          <h2 className="title-h2 mb-10 text-center font-light lg:text-left">
            CADA OPERACIÓN ES UN COMPROMISO
          </h2>
          <p className="show-on-desktop text-base leading-11">
            Te compañamos en todo el proceso de selección, gestión y adquisición de vehículos de
            alta gama. Cada operación es tratada con <strong>dedicación</strong>,{' '}
            <strong>confidencialidad</strong> y <strong>excelencia</strong>.
          </p>
          <ul className="space-y-5 px-4 text-xs lg:px-16 lg:text-base">
            {listItems.map((item, idx) => (
              <li key={idx} className="flex items-center gap-2">
                <Square className="fill-text-primary h-2 w-2" /> {item}
              </li>
            ))}
          </ul>
        </div>
        <figure className="show-on-desktop w-fit">
          <Image
            src={'/images/malek-fara.webp'}
            alt="Malek Fara"
            width={806}
            height={1102}
            className="max-h-137.5 max-w-100"
          />
          <figcaption className="text-right text-xs font-bold">MÁLEK FARA</figcaption>
        </figure>
      </div>

      <motion.div
        key="contact-form"
        layout
        initial={{
          opacity: 0,
        }}
        animate={{
          opacity: 1,
        }}
        exit={{
          opacity: 0,
        }}
        transition={{
          duration: shouldReduceMotion ? 0.15 : 0.25,
          ease: [0.22, 1, 0.36, 1],
        }}
        className="overflow-hidden"
      >
        <motion.div layout className="mt-9 px-0 lg:px-16">
          <div ref={formRef}></div>
          <h3 className="mb-8 hidden text-center text-2xl font-light lg:block">
            Contanos qué estás buscando y uno de nuestros especialistas te asesorará
          </h3>

          <h3 className="mb-8 text-center text-lg font-light lg:hidden">
            Dejanos tu mensaje y datos
          </h3>
          <ContactForm />
        </motion.div>
      </motion.div>
    </section>
  );
});

Register.displayName = 'Register';