import React from "react";
import {
  Box,
  Button,
  Divider,
  Heading,
  Link,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Stack,
  Text,
} from "@chakra-ui/react";

/**
 * Pantalla que aparece cuando el visitante agotó sus consultas de la lista de
 * precios. Dos caminos: hacerse socio, o entrar con la cuenta que ya tiene.
 */

export const URL_HACERSE_SOCIO = "https://cca.org.ar/unite/";
export const URL_LOGIN_PLATAFORMA = "https://admin.nuestrosautos.com.ar";

type Props = {
  isOpen: boolean;
  onClose: () => void;
};

const PriceListGate = ({ isOpen, onClose }: Props) => {
  return (
    <Modal isCentered isOpen={isOpen} scrollBehavior={"inside"} size="3xl" onClose={onClose}>
      <ModalOverlay />
      <ModalContent p={{ base: "12px", md: "20px" }}>
        <ModalHeader>
          <Text color="fontSecondary" fontSize={{ base: "1.2rem", md: "1.5rem" }} fontWeight="bold">
            Llegaste al límite de consultas
          </Text>
          <Text color="gray.600" fontSize="0.95rem" fontWeight="normal" mt="4px">
            Para seguir consultando la lista de precios, elegí una de estas opciones.
          </Text>
        </ModalHeader>
        <ModalCloseButton />

        <ModalBody pb="24px">
          <Divider mb="24px" />

          <Stack
            alignItems="stretch"
            direction={{ base: "column", md: "row" }}
            spacing={{ base: "24px", md: "32px" }}
          >
            {/* Hacerse socio */}
            <Box display="flex" flex="1" flexDirection="column">
              <Heading as="h3" color="fontSecondary" fontSize="1.15rem" mb="8px">
                Hacete Socio De la Cámara del Comercio Automotor
              </Heading>
              <Text color="gray.700" flex="1" fontSize="0.95rem" mb="16px">
                Accedé a todas las búsquedas que necesites, sin límite.
              </Text>
              <Link
                href={URL_HACERSE_SOCIO}
                isExternal
                _hover={{ textDecoration: "none" }}
                rel="noopener noreferrer"
              >
                <Button colorScheme="orange" w="100%">
                  Hacete socio acá
                </Button>
              </Link>
            </Box>

            {/* Ya tiene cuenta */}
            <Box display="flex" flex="1" flexDirection="column">
              <Heading as="h3" color="fontSecondary" fontSize="1.15rem" mb="8px">
                ¿Ya tenés cuenta en nuestrosautos?
              </Heading>
              <Text color="gray.700" flex="1" fontSize="0.95rem" mb="16px">
                Ingresá a nuestra plataforma y accedé a la lista sin límites y a otras
                funcionalidades.
              </Text>
              <Link
                href={URL_LOGIN_PLATAFORMA}
                isExternal
                _hover={{ textDecoration: "none" }}
                rel="noopener noreferrer"
              >
                <Button colorScheme="orange" variant="outline" w="100%">
                  Iniciar sesión
                </Button>
              </Link>
            </Box>
          </Stack>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
};

export default PriceListGate;