"use client";
import { motion } from "motion/react";
import style from "./Caminos.module.css";
import { useNavigation } from "@core/app/hooks/goto";

export default function Caminos() {
    const { goTo } = useNavigation();
    return (
        <div className={style.caminosContainer}>
            <h1>Reservar u ofrecer turnos</h1>
            <p>
                Tu tiempo es valioso. Aquí lo hacemos simple para que encuentres justo lo que
                necesitas. Explora nuestras opciones y elige cómo quieres usar nuestra plataforma
            </p>
            <div>
                <ul>
                    <motion.li
                        whileHover={{ scale: 1.1, backgroundColor: "#fff480" }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => goTo("/landing/get-appointments")}
                    >
                        <h3>Quiero reservar</h3>
                        <p>
                            Encuentra profesionales capacitados para brindarte el mejor servicio.
                            Reserva tu turno, y nosotros te ayudaremos a encontrar a tu profesional.
                        </p>
                    </motion.li>
                    <motion.li
                        whileHover={{ scale: 1.1, backgroundColor: "#fff480" }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => goTo("/landing/offer-appointments")}
                    >
                        <h3>Quiero ofrecer turnos</h3>
                        <p>
                            Llega a más personas de forma simple y organizada. Publica tus
                            servicios, gestiona tus horarios y deja que nuevos clientes te
                            encuentren fácilmente.
                        </p>
                    </motion.li>
                </ul>
            </div>
        </div>
    );
}
