{"id":24748,"date":"2025-11-15T17:11:42","date_gmt":"2025-11-15T17:11:42","guid":{"rendered":"https:\/\/web.cincosopas.com\/?page_id=24748"},"modified":"2025-12-02T22:09:25","modified_gmt":"2025-12-02T22:09:25","slug":"libro-de-reclamaciones","status":"publish","type":"page","link":"https:\/\/web.cincosopas.com\/en\/libro-de-reclamaciones\/","title":{"rendered":"Libro de reclamaciones"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"24748\" class=\"elementor elementor-24748\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40c8888 elementor-section-content-top elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"40c8888\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f16c856\" data-id=\"f16c856\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-ae10f33 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"ae10f33\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f62ee55\" data-id=\"f62ee55\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f7379f0 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"f7379f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INICIO DEL WIDGET LIBRO DE RECLAMACIONES CINCO SOPAS -->\r\n<!-- Sistema de reclamaciones desarrollado por DS8 Agency -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n\r\n<!-- Configuraci\u00f3n de Estilos -->\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          primary: '#BB1818', \/* Color Rojo Cinco Sopas *\/\r\n          accent: '#dc2626',\r\n          success: '#16a34a'\r\n        },\r\n        animation: {\r\n          'fade-in-down': 'fadeInDown 0.3s ease-out',\r\n        },\r\n        keyframes: {\r\n          fadeInDown: {\r\n            '0%': { opacity: '0', transform: 'translateY(-10px)' },\r\n            '100%': { opacity: '1', transform: 'translateY(0)' },\r\n          },\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n<style>\r\n  \/* Estilos para impresi\u00f3n *\/\r\n  @media print {\r\n    .no-print { display: none !important; }\r\n    .print-only { display: block !important; }\r\n    body, #libro-reclamaciones-root { background: white; }\r\n    input, textarea, select { border: none !important; background: transparent !important; resize: none; appearance: none; }\r\n    .shadow-lg { box-shadow: none !important; }\r\n    .border { border: 1px solid #000 !important; }\r\n    .text-white { color: black !important; }\r\n    .bg-primary { background: transparent !important; border-bottom: 2px solid black; color: black !important; } \r\n    .text-primary { color: black !important; }\r\n  }\r\n  \r\n  .hover\\:bg-primary-dark:hover {\r\n    background-color: #991b1b;\r\n  }\r\n<\/style>\r\n\r\n<!-- Contenedor Principal de la App -->\r\n<div id=\"libro-reclamaciones-root\"><\/div>\r\n\r\n<!-- L\u00f3gica de la Aplicaci\u00f3n -->\r\n<script type=\"text\/babel\">\r\n  const { useState, useEffect } = React;\r\n\r\n  \/\/ --- 1. CONSTANTES CINCO SOPAS ---\r\n  const COMPANY_INFO = {\r\n    legalName: \"AFE FOOD & DRINKS SOCIEDAD ANONIMA CERRADA - AFE FOOD & DRINKS S.A.C.\",\r\n    commercialName: \"Cinco Sopas\",\r\n    ruc: \"20608862570\", \r\n    address: \"Av. Guardia Civil Nro. 1321 (Of. 1003), Surquillo, Lima\",\r\n    hours: \"Lunes a S\u00e1bado: 12:00 pm. A 11:00 pm. Domingo: 12:00 pm. A 6:00 pm.\",\r\n    email: \"cincosopasperu@gmail.com\"\r\n  };\r\n\r\n  \/\/ Credenciales Proporcionadas para Cinco Sopas\r\n  const EMAILJS_CONFIG = {\r\n    SERVICE_ID: \"service_roltx44\",\r\n    TEMPLATE_ID: \"template_va6y2n5\",\r\n    PUBLIC_KEY: \"L4Z3jBC1glHL1gkk8\"\r\n  };\r\n\r\n  const DEPARTMENTS = [\r\n    \"Lima\", \"Callao\", \"Amazonas\", \"Ancash\", \"Apurimac\", \"Arequipa\", \"Ayacucho\", \r\n    \"Cajamarca\", \"Cusco\", \"Huancavelica\", \"Huanuco\", \"Ica\", \"Junin\", \"La Libertad\", \r\n    \"Lambayeque\", \"Loreto\", \"Madre de Dios\", \"Moquegua\", \"Pasco\", \"Piura\", \"Puno\", \r\n    \"San Martin\", \"Tacna\", \"Tumbes\", \"Ucayali\"\r\n  ];\r\n\r\n  const INITIAL_FORM_STATE = {\r\n    userName: '',\r\n    userId: '',\r\n    userPhone: '',\r\n    userEmail: '',\r\n    userAddress: '',\r\n    userRegion: 'Lima',\r\n    userProvince: '',\r\n    userDistrict: '',\r\n    isMinor: false,\r\n    parentName: '',\r\n    goodType: 'Producto',\r\n    claimedAmount: '',\r\n    goodDescription: '',\r\n    claimType: 'Reclamo',\r\n    claimDetail: '',\r\n    claimRequest: '',\r\n    acceptedTerms: false,\r\n    acceptedPrivacyPolicy: false\r\n  };\r\n\r\n  \/\/ --- 2. COMPONENTE MODAL DE \u00c9XITO ---\r\n  const SuccessModal = ({ isOpen, claimCode, onClose }) => {\r\n    if (!isOpen) return null;\r\n\r\n    const handlePrint = () => {\r\n      window.print();\r\n    };\r\n\r\n    return (\r\n      <div className=\"fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4\">\r\n        <div className=\"bg-white rounded-xl shadow-2xl p-8 max-w-md w-full relative transform transition-all scale-100\">\r\n          <div className=\"text-center\">\r\n            <div className=\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n              <i className=\"fa-solid fa-check text-2xl text-green-600\"><\/i>\r\n            <\/div>\r\n            <h3 className=\"text-xl font-bold text-gray-900 mb-2\">\u00a1Reclamo Registrado!<\/h3>\r\n            <p className=\"text-gray-600 mb-6\">\r\n              Su hoja de reclamaci\u00f3n <strong className=\"text-primary\">{claimCode}<\/strong> ha sido generada correctamente.\r\n            <\/p>\r\n            <div className=\"bg-gray-50 p-4 rounded-lg text-sm text-left mb-6 border border-gray-200\">\r\n              <p className=\"mb-2 flex items-center\">\r\n                <i className=\"fa-solid fa-envelope text-gray-400 mr-2\"><\/i>\r\n                Hemos enviado una copia a su correo.\r\n              <\/p>\r\n              <p className=\"flex items-center\">\r\n                <i className=\"fa-solid fa-print text-gray-400 mr-2\"><\/i>\r\n                Puede imprimir esta pantalla como constancia.\r\n              <\/p>\r\n            <\/div>\r\n            <div className=\"flex gap-3 flex-col sm:flex-row\">\r\n              <button \r\n                onClick={handlePrint} \r\n                className=\"flex-1 border border-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg hover:bg-gray-50 transition\"\r\n              >\r\n                Imprimir\r\n              <\/button>\r\n              <button \r\n                onClick={onClose} \r\n                className=\"flex-1 bg-primary text-white font-bold py-2 px-4 rounded-lg hover:opacity-90 transition\"\r\n              >\r\n                Finalizar\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  \/\/ --- 3. COMPONENTE PRINCIPAL (APP) ---\r\n  const App = () => {\r\n    const [formData, setFormData] = useState(INITIAL_FORM_STATE);\r\n    const [loading, setLoading] = useState(false);\r\n    const [claimCode, setClaimCode] = useState('Generando...');\r\n    const [currentDate, setCurrentDate] = useState('');\r\n    const [showModal, setShowModal] = useState(false);\r\n\r\n    useEffect(() => {\r\n      const now = new Date();\r\n      const formatted = now.toLocaleDateString('es-PE', { \r\n        year: 'numeric', \r\n        month: 'long', \r\n        day: 'numeric',\r\n        hour: '2-digit',\r\n        minute: '2-digit'\r\n      });\r\n      setCurrentDate(formatted);\r\n\r\n      const year = now.getFullYear();\r\n      const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0');\r\n      setClaimCode(`RE-${year}-${randomNum}`);\r\n    }, []);\r\n\r\n    const handleChange = (e) => {\r\n      const { name, value, type, checked } = e.target;\r\n      setFormData(prev => ({\r\n        ...prev,\r\n        [name]: type === 'checkbox' ? checked : value\r\n      }));\r\n    };\r\n\r\n    const saveToWordpress = async (data, code) => {\r\n      try {\r\n        const payload = { ...data, claimCode: code };\r\n        \/\/ URL endpoint hipot\u00e9tica para Cinco Sopas\r\n        const response = await fetch('\/wp-json\/cincosopas\/v1\/submit', {\r\n          method: 'POST',\r\n          headers: { 'Content-Type': 'application\/json' },\r\n          body: JSON.stringify(payload)\r\n        });\r\n        const result = await response.json();\r\n        console.log('Guardado en BD:', result);\r\n      } catch (error) {\r\n        console.error('Error guardando en BD:', error);\r\n      }\r\n    };\r\n\r\n    const handleSubmit = async (e) => {\r\n      e.preventDefault();\r\n      setLoading(true);\r\n\r\n      \/\/ 1. Guardar en Base de Datos\r\n      await saveToWordpress(formData, claimCode);\r\n\r\n      \/\/ 2. Enviar Correo (EmailJS)\r\n      const templateParams = {\r\n        \/\/ --- VARIABLES DE LA PLANTILLA VISUAL ---\r\n        codigo_reclamacion: claimCode,\r\n        fecha: currentDate,\r\n        nombre: formData.userName,\r\n        dni: formData.userId,\r\n        telefono: formData.userPhone,\r\n        email: formData.userEmail,\r\n        direccion: formData.userAddress,\r\n        region: formData.userRegion,\r\n        provincia: formData.userProvince,\r\n        distrito: formData.userDistrict,\r\n        apoderado: formData.isMinor ? formData.parentName : '-',\r\n        tipo_bien: formData.goodType,\r\n        monto: formData.claimedAmount,\r\n        descripcion_bien: formData.goodDescription,\r\n        tipo_reclamo: formData.claimType,\r\n        detalle_reclamo: formData.claimDetail,\r\n        pedido_consumidor: formData.claimRequest,\r\n        \r\n        \/\/ --- VARIABLES DE CONFIGURACI\u00d3N ---\r\n        to_email: formData.userEmail, \r\n        from_name: formData.userName,\r\n        reply_to: formData.userEmail,\r\n      };\r\n\r\n      if (window.emailjs) {\r\n        window.emailjs.send(\r\n            EMAILJS_CONFIG.SERVICE_ID, \r\n            EMAILJS_CONFIG.TEMPLATE_ID, \r\n            templateParams, \r\n            EMAILJS_CONFIG.PUBLIC_KEY\r\n        )\r\n          .then(() => {\r\n             setLoading(false);\r\n             setShowModal(true);\r\n          })\r\n          .catch((error) => {\r\n            console.error('Error EmailJS:', error);\r\n            alert(`Hubo un error al enviar el correo: ${JSON.stringify(error)}. Por favor verifique su conexi\u00f3n.`);\r\n            setLoading(false);\r\n          });\r\n      } else {\r\n        console.warn(\"Librer\u00eda EmailJS no detectada. Modo simulaci\u00f3n.\");\r\n        setTimeout(() => {\r\n          setLoading(false);\r\n          setShowModal(true);\r\n        }, 1500);\r\n      }\r\n    };\r\n\r\n    const resetForm = () => {\r\n      setFormData(INITIAL_FORM_STATE);\r\n      setShowModal(false);\r\n      const now = new Date();\r\n      const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0');\r\n      setClaimCode(`RE-${now.getFullYear()}-${randomNum}`);\r\n    };\r\n\r\n    return (\r\n      <div className=\"min-h-screen bg-gray-50 text-gray-800 font-sans pb-12 print:bg-white print:pb-0\">\r\n        <div className=\"max-w-4xl mx-auto p-4 md:p-8 print:p-0\">\r\n          \r\n          {\/* Main Container *\/}\r\n          <div className=\"bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden print:shadow-none print:border-none print:rounded-none\">\r\n            \r\n            {\/* Header *\/}\r\n            <div className=\"bg-primary text-white p-6 text-center relative print:bg-white print:text-black print:border-b-2 print:border-black\">\r\n              <h1 className=\"text-2xl font-bold uppercase tracking-wider\">Libro de Reclamaciones Virtual<\/h1>\r\n              <p className=\"text-sm opacity-90 mt-1 print:opacity-100 print:text-black\">Conforme a lo establecido por el C\u00f3digo de Protecci\u00f3n y Defensa del Consumidor<\/p>\r\n              <div className=\"mt-4 p-3 bg-white\/20 rounded-lg text-sm inline-block text-left print:bg-transparent print:border print:border-black\">\r\n                <p><strong>Fecha:<\/strong> {currentDate}<\/p>\r\n                <p><strong>Hoja de Reclamaci\u00f3n N\u00ba:<\/strong> <span className=\"font-mono text-white font-bold print:text-black\">{claimCode}<\/span><\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            {\/* Company Info *\/}\r\n            <div className=\"bg-gray-100 p-4 border-b border-gray-200 text-sm print:bg-white print:border-b\">\r\n              <h3 className=\"font-bold text-gray-700 uppercase mb-2 text-xs\">Datos del Proveedor:<\/h3>\r\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\r\n                <p><span className=\"font-semibold\">Raz\u00f3n Social:<\/span> {COMPANY_INFO.legalName}<\/p>\r\n                <p><span className=\"font-semibold\">RUC:<\/span> {COMPANY_INFO.ruc}<\/p>\r\n                <p><span className=\"font-semibold\">Direcci\u00f3n:<\/span> {COMPANY_INFO.address}<\/p>\r\n                <p><span className=\"font-semibold\">Horario:<\/span> {COMPANY_INFO.hours}<\/p>\r\n                <p><span className=\"font-semibold\">Comercial:<\/span> {COMPANY_INFO.commercialName}<\/p>\r\n                <p><span className=\"font-semibold\">Email:<\/span> {COMPANY_INFO.email}<\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <form onSubmit={handleSubmit} className=\"p-6 md:p-8 space-y-8 print:p-4 print:space-y-4\">\r\n              \r\n              {\/* Section 1: User ID *\/}\r\n              <section>\r\n                <h2 className=\"text-lg font-bold text-primary border-b-2 border-primary\/20 pb-2 mb-4 print:border-black\">\r\n                  1. Identificaci\u00f3n del Consumidor Reclamante\r\n                <\/h2>\r\n                <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 print:gap-2\">\r\n                  <div className=\"md:col-span-2\">\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Nombre y Apellido *<\/label>\r\n                    <input \r\n                      type=\"text\" \r\n                      name=\"userName\" \r\n                      required \r\n                      value={formData.userName}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\" \r\n                      placeholder=\"Juan P\u00e9rez\"\r\n                    \/>\r\n                  <\/div>\r\n                  \r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">DNI \/ C.E. *<\/label>\r\n                    <input \r\n                      type=\"text\" \r\n                      name=\"userId\" \r\n                      required \r\n                      value={formData.userId}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\" \r\n                      placeholder=\"12345678\"\r\n                    \/>\r\n                  <\/div>\r\n\r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Tel\u00e9fono *<\/label>\r\n                    <div className=\"flex\">\r\n                      <span className=\"inline-flex items-center px-3 rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm print:hidden\">\r\n                          +51\r\n                      <\/span>\r\n                      <input \r\n                        type=\"tel\" \r\n                        name=\"userPhone\" \r\n                        required \r\n                        value={formData.userPhone}\r\n                        onChange={handleChange}\r\n                        className=\"w-full px-4 py-2 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:rounded-none print:p-0 print:bg-transparent\" \r\n                        placeholder=\"987654321\"\r\n                      \/>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <div className=\"md:col-span-2\">\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Correo Electr\u00f3nico *<\/label>\r\n                    <input \r\n                      type=\"email\" \r\n                      name=\"userEmail\" \r\n                      required \r\n                      value={formData.userEmail}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\" \r\n                      placeholder=\"correo@ejemplo.com\"\r\n                    \/>\r\n                    <p className=\"text-xs text-gray-500 mt-1 print:hidden\">Se enviar\u00e1 una copia del reclamo a este correo.<\/p>\r\n                  <\/div>\r\n\r\n                  <div className=\"md:col-span-2\">\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Domicilio *<\/label>\r\n                    <input \r\n                      type=\"text\" \r\n                      name=\"userAddress\" \r\n                      required \r\n                      value={formData.userAddress}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition mb-2 print:border-none print:p-0 print:bg-transparent\" \r\n                      placeholder=\"Direcci\u00f3n (Calle, Av., Jr.)\"\r\n                    \/>\r\n                    \r\n                    <div className=\"grid grid-cols-1 md:grid-cols-3 gap-2\">\r\n                      <select \r\n                        name=\"userRegion\" \r\n                        value={formData.userRegion}\r\n                        onChange={handleChange}\r\n                        className=\"w-full px-4 py-2 border border-gray-300 rounded-lg bg-white print:border-none print:p-0 print:bg-transparent\"\r\n                      >\r\n                        {DEPARTMENTS.map(dept => (\r\n                          <option key={dept} value={dept}>{dept}<\/option>\r\n                        ))}\r\n                      <\/select>\r\n                      <input \r\n                        type=\"text\" \r\n                        name=\"userProvince\" \r\n                        placeholder=\"Provincia\" \r\n                        value={formData.userProvince}\r\n                        onChange={handleChange}\r\n                        className=\"w-full px-4 py-2 border border-gray-300 rounded-lg print:border-none print:p-0 print:bg-transparent\"\r\n                      \/>\r\n                      <input \r\n                        type=\"text\" \r\n                        name=\"userDistrict\" \r\n                        placeholder=\"Distrito\" \r\n                        value={formData.userDistrict}\r\n                        onChange={handleChange}\r\n                        className=\"w-full px-4 py-2 border border-gray-300 rounded-lg print:border-none print:p-0 print:bg-transparent\"\r\n                      \/>\r\n                    <\/div>\r\n                  <\/div>\r\n                  \r\n                  {\/* Minor Check *\/}\r\n                  <div className=\"md:col-span-2 pt-2\">\r\n                    <div className=\"flex items-center\">\r\n                      <input \r\n                        id=\"isMinor\" \r\n                        name=\"isMinor\"\r\n                        type=\"checkbox\" \r\n                        checked={formData.isMinor}\r\n                        onChange={handleChange}\r\n                        className=\"w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary\"\r\n                      \/>\r\n                      <label htmlFor=\"isMinor\" className=\"ml-2 text-sm font-medium text-gray-700\">\r\n                        Menor de Edad\r\n                      <\/label>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  {formData.isMinor && (\r\n                    <div className=\"md:col-span-2 bg-gray-50 p-4 rounded-lg border border-gray-200 animate-fade-in-down\">\r\n                        <label className=\"block text-sm font-medium text-gray-700 mb-1\">Nombres y Apellidos del Padre, Madre o Apoderado *<\/label>\r\n                        <input \r\n                          type=\"text\" \r\n                          name=\"parentName\" \r\n                          required={formData.isMinor}\r\n                          value={formData.parentName}\r\n                          onChange={handleChange}\r\n                          className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\" \r\n                          placeholder=\"Nombre del apoderado\"\r\n                        \/>\r\n                    <\/div>\r\n                  )}\r\n\r\n                <\/div>\r\n              <\/section>\r\n\r\n              {\/* Section 2: Product Info *\/}\r\n              <section>\r\n                <h2 className=\"text-lg font-bold text-primary border-b-2 border-primary\/20 pb-2 mb-4 print:border-black\">\r\n                  2. Identificaci\u00f3n del Bien Contratado\r\n                <\/h2>\r\n                <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 print:gap-2\">\r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">Tipo de Bien *<\/label>\r\n                    <div className=\"flex gap-4\">\r\n                      <label className=\"flex items-center space-x-2 cursor-pointer\">\r\n                        <input \r\n                          type=\"radio\" \r\n                          name=\"goodType\" \r\n                          value=\"Producto\" \r\n                          checked={formData.goodType === 'Producto'}\r\n                          onChange={handleChange}\r\n                          className=\"w-4 h-4 text-primary focus:ring-primary\"\r\n                        \/>\r\n                        <span>Producto<\/span>\r\n                      <\/label>\r\n                      <label className=\"flex items-center space-x-2 cursor-pointer\">\r\n                        <input \r\n                          type=\"radio\" \r\n                          name=\"goodType\" \r\n                          value=\"Servicio\" \r\n                          checked={formData.goodType === 'Servicio'}\r\n                          onChange={handleChange}\r\n                          className=\"w-4 h-4 text-primary focus:ring-primary\"\r\n                        \/>\r\n                        <span>Servicio<\/span>\r\n                      <\/label>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Monto Reclamado (S\/.)<\/label>\r\n                    <input \r\n                      type=\"number\" \r\n                      step=\"0.01\" \r\n                      name=\"claimedAmount\" \r\n                      value={formData.claimedAmount}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\"\r\n                    \/>\r\n                  <\/div>\r\n\r\n                  <div className=\"md:col-span-2\">\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Descripci\u00f3n del Producto o Servicio *<\/label>\r\n                    <input \r\n                      type=\"text\" \r\n                      name=\"goodDescription\" \r\n                      required \r\n                      value={formData.goodDescription}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent\" \r\n                      placeholder=\"Ej: Consumo en local \/ Delivery\"\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/section>\r\n\r\n              {\/* Section 3: Claim Details *\/}\r\n              <section>\r\n                <h2 className=\"text-lg font-bold text-primary border-b-2 border-primary\/20 pb-2 mb-4 print:border-black\">\r\n                  3. Detalle de la Reclamaci\u00f3n\r\n                <\/h2>\r\n                \r\n                <div className=\"mb-4\">\r\n                  <label className=\"block text-sm font-medium text-gray-700 mb-2\">Tipo de Reclamaci\u00f3n *<\/label>\r\n                  <select \r\n                    name=\"claimType\" \r\n                    value={formData.claimType}\r\n                    onChange={handleChange}\r\n                    className=\"w-full md:w-1\/2 px-4 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-primary focus:border-primary outline-none print:border-none print:p-0 print:bg-transparent\"\r\n                  >\r\n                    <option value=\"Reclamo\">Reclamo<\/option>\r\n                    <option value=\"Queja\">Queja<\/option>\r\n                  <\/select>\r\n                  \r\n                  <div className=\"mt-3 p-3 bg-blue-50 text-blue-800 rounded-lg text-xs md:text-sm border border-blue-100 print:bg-white print:border-gray-200\">\r\n                    <p className=\"mb-1\"><strong className=\"font-bold\">Reclamo:<\/strong> Disconformidad relacionada a los productos o servicios.<\/p>\r\n                    <p><strong className=\"font-bold\">Queja:<\/strong> Disconformidad no relacionada a los productos o servicios; o, malestar o descontento respecto a la atenci\u00f3n al p\u00fablico.<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <div className=\"space-y-4\">\r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Detalle del Reclamo o Queja *<\/label>\r\n                    <textarea \r\n                      name=\"claimDetail\" \r\n                      rows=\"4\" \r\n                      required \r\n                      value={formData.claimDetail}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent print:resize-none\" \r\n                      placeholder=\"Describa los hechos detalladamente...\"\r\n                    ><\/textarea>\r\n                  <\/div>\r\n\r\n                  <div>\r\n                    <label className=\"block text-sm font-medium text-gray-700 mb-1\">Pedido del Consumidor *<\/label>\r\n                    <textarea \r\n                      name=\"claimRequest\" \r\n                      rows=\"2\" \r\n                      required \r\n                      value={formData.claimRequest}\r\n                      onChange={handleChange}\r\n                      className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition print:border-none print:p-0 print:bg-transparent print:resize-none\" \r\n                      placeholder=\"\u00bfQu\u00e9 soluci\u00f3n espera? (Ej: Cambio de producto, devoluci\u00f3n, disculpas, etc.)\"\r\n                    ><\/textarea>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/section>\r\n\r\n              {\/* Legal Statement Box *\/}\r\n              <div className=\"bg-gray-50 border border-gray-200 p-4 rounded-lg text-xs md:text-sm text-justify text-gray-700 print:text-xs\">\r\n                <p>\r\n                  De acuerdo a las disposiciones del libro de reclamaciones y normas del C\u00f3digo de Protecci\u00f3n y Defensa del Consumidor, el libro de reclamaciones virtual podr\u00e1 ser usado por los consumidores para presentar sus quejas y reclamos. La formulaci\u00f3n del reclamo no impide acudir a otras v\u00edas de soluci\u00f3n de controversias ni es requisito para interponer una denuncia ante el INDECOPI. El proveedor debe dar respuesta al reclamo o queja en un plazo no mayor a quince (15) d\u00edas h\u00e1biles, el cual es improrrogable.\r\n                <\/p>\r\n              <\/div>\r\n\r\n              {\/* Terms *\/}\r\n              <div className=\"space-y-3\">\r\n                <div className=\"flex items-start\">\r\n                  <div className=\"flex items-center h-5\">\r\n                    <input \r\n                      id=\"privacyPolicy\" \r\n                      name=\"acceptedPrivacyPolicy\"\r\n                      type=\"checkbox\" \r\n                      required \r\n                      checked={formData.acceptedPrivacyPolicy}\r\n                      onChange={handleChange}\r\n                      className=\"w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary\"\r\n                    \/>\r\n                  <\/div>\r\n                  <label htmlFor=\"privacyPolicy\" className=\"ml-2 text-sm font-medium text-gray-900\">\r\n                    Acepto las <span className=\"font-bold\">Pol\u00edticas de Privacidad<\/span>.\r\n                  <\/label>\r\n                <\/div>\r\n\r\n                <div className=\"flex items-start\">\r\n                  <div className=\"flex items-center h-5\">\r\n                    <input \r\n                      id=\"terms\" \r\n                      name=\"acceptedTerms\"\r\n                      type=\"checkbox\" \r\n                      required \r\n                      checked={formData.acceptedTerms}\r\n                      onChange={handleChange}\r\n                      className=\"w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary\"\r\n                    \/>\r\n                  <\/div>\r\n                  <label htmlFor=\"terms\" className=\"ml-2 text-sm font-medium text-gray-900\">\r\n                    Declaro que los datos consignados son verdaderos y acepto que una copia de este reclamo sea enviada a mi correo electr\u00f3nico.\r\n                  <\/label>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              {\/* Actions *\/}\r\n              <div className=\"flex flex-col md:flex-row gap-4 pt-4 border-t border-gray-200 print:hidden\">\r\n                <button \r\n                  type=\"submit\" \r\n                  disabled={loading}\r\n                  className={`flex-1 text-white font-bold py-3 px-6 rounded-lg transition transform active:scale-95 flex justify-center items-center ${loading ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary hover:bg-primary-dark'}`}\r\n                >\r\n                  {loading ? (\r\n                    <>\r\n                      <i className=\"fa-solid fa-circle-notch fa-spin mr-2\"><\/i> Procesando...\r\n                    <\/>\r\n                  ) : (\r\n                    <>\r\n                      <i className=\"fa-solid fa-paper-plane mr-2\"><\/i> Enviar Hoja de Reclamaci\u00f3n\r\n                    <\/>\r\n                  )}\r\n                <\/button>\r\n              <\/div>\r\n            <\/form>\r\n          <\/div>\r\n\r\n          {\/* Footer *\/}\r\n          <div className=\"text-center mt-6 text-xs text-gray-500 print:hidden\">\r\n            <p>Este libro de reclamaciones virtual cumple con las normas de INDECOPI.<\/p>\r\n            <p className=\"mt-2\">\r\n              Sistema de reclamaciones  desarrollado por <a href=\"https:\/\/ds8marketing.com\/\" target=\"_blank\" className=\"underline hover:text-gray-800\">DS8 Agency<\/a>.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <SuccessModal \r\n            isOpen={showModal} \r\n            claimCode={claimCode} \r\n            onClose={resetForm} \r\n          \/>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  \/\/ --- 4. RENDERIZADO ---\r\n  const rootElement = document.getElementById('libro-reclamaciones-root');\r\n  const root = ReactDOM.createRoot(rootElement);\r\n  root.render(<App \/>);\r\n<\/script>\r\n<!-- FIN DEL WIDGET -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd18096 elementor-widget elementor-widget-spacer\" data-id=\"bd18096\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8811636 elementor-widget elementor-widget-spacer\" data-id=\"8811636\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-24748","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/pages\/24748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/comments?post=24748"}],"version-history":[{"count":61,"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/pages\/24748\/revisions"}],"predecessor-version":[{"id":25582,"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/pages\/24748\/revisions\/25582"}],"wp:attachment":[{"href":"https:\/\/web.cincosopas.com\/en\/wp-json\/wp\/v2\/media?parent=24748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}