import React, { useEffect, useState } from 'react'
import { actions } from 'astro:actions'
import { toast } from 'sonner'

import { formatCOP } from '@/lib/FormaterCOP'
import { getPricingByAge, getVehicleCategory, type SchedulingPricingResult } from '@/lib/schedulingPricing'

import { Checkbox } from '../ui/checkbox'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle
} from '../ui/dialog'
import { Input } from '../ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '../ui/select'

interface SchedulingPricingCardProps {
  isVisible?: boolean
  isSchedulingFormComplete?: boolean
  onIncompleteSchedulingForm?: () => void | Promise<void>
  onPaymentButtonEnabledChange?: (enabled: boolean) => void
  termsChecked: boolean
  onTermsCheckedChange: (checked: boolean) => void
  termsErrorMessage?: string
  ownerNameLabel: string
  plateLabel: string
  ownerIdLabel: string
  cityLabel: string
  headquartersLabel: string
  headquartersValue: string
  selectedVehicleLabel: string
  selectedVehicleValue: string
  serviceTypeLabel: string
  vehicleAge: number | null
  vehicleAgeLabel: string
  selectedDateLabel: string
  selectedDateValue: string
  selectedHourLabel: string
  emailLabel: string
  phoneLabel: string
}

interface PendingVoucherPayload {
  nombre: string
  placa: string
  identificacion: string
  telefono: string
  correo: string
  recipient_email: string
  ciudad: string
  sede: string
  sede_nombre?: string
  tipo_vehiculo: string
  servicio: string
  antiguedad: number | null
  fecha_agendamiento: string
  hora: string
  subtotal: number
  descuento: number
  total: number
  numero_baucher?: string
  pagador_nombre: string
  pagador_correo: string
  pagador_tipo_identificacion: string
  pagador_numero_identificacion: string
}

interface ConfirmedPaymentModalData {
  nombre: string
  placa: string
  correoVoucher: string
  total: number
  fechaAgendada: string
  horaAgendada: string
}

const PENDING_VOUCHER_KEY = 'previcar_pending_wompi_voucher'
const isValidEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())

const getReadablePaymentError = (error: unknown) => {
  const message = error instanceof Error ? error.message : String(error)

  if (message.includes('payerEmail') || message.includes('Invalid email')) {
    return 'Ingresa un correo electronico valido para continuar con el pago.'
  }

  if (message.includes('payerPhoneNumber') || message.includes('at least 7 character')) {
    return 'Ingresa un numero de celular valido para continuar con el pago.'
  }

  if (message.includes('payerFullName')) {
    return 'Ingresa el nombre del pagador para continuar con el pago.'
  }

  if (message.includes('Failed to validate')) {
    return 'Revisa los datos del pagador antes de continuar con el pago.'
  }

  return error instanceof Error ? error.message : 'No fue posible iniciar el checkout de Wompi.'
}

export default function SchedulingPricingCard ({
  isVisible = true,
  isSchedulingFormComplete = false,
  onIncompleteSchedulingForm,
  onPaymentButtonEnabledChange,
  termsChecked,
  onTermsCheckedChange,
  termsErrorMessage,
  ownerNameLabel,
  plateLabel,
  ownerIdLabel,
  cityLabel,
  headquartersLabel,
  headquartersValue,
  selectedVehicleLabel,
  selectedVehicleValue,
  serviceTypeLabel,
  vehicleAge,
  vehicleAgeLabel,
  selectedDateLabel,
  selectedDateValue,
  selectedHourLabel,
  emailLabel,
  phoneLabel
}: SchedulingPricingCardProps) {
  const [isSendingVoucher, setIsSendingVoucher] = useState(false)
  const [payerIsDifferent, setPayerIsDifferent] = useState(false)
  const [showPayerErrors, setShowPayerErrors] = useState(false)
  const [showPaymentConfirmedModal, setShowPaymentConfirmedModal] = useState(false)
  const [confirmedPaymentModalData, setConfirmedPaymentModalData] = useState<ConfirmedPaymentModalData | null>(null)
  const [payerInfo, setPayerInfo] = useState({
    nombre: '',
    correo: '',
    tipoIdentificacion: '',
    numeroIdentificacion: ''
  })

  const [pricing, setPricing] = useState<SchedulingPricingResult>(() => getPricingByAge())
  const vehicleCategory = getVehicleCategory(selectedVehicleLabel)
  const crmServiceType = vehicleCategory === 'MOTOS'
    ? 'MOTOS'
    : serviceTypeLabel && serviceTypeLabel !== 'Pendiente por seleccionar'
      ? serviceTypeLabel
      : ''
  const hasOnlineDiscount = (pricing.discount ?? 0) > 0
  const shouldShowLeoncyNote = hasOnlineDiscount && vehicleCategory === 'LIVIANOS'
  const isPayerInfoValid = !payerIsDifferent || (
    payerInfo.nombre.trim() !== '' &&
    isValidEmail(payerInfo.correo) &&
    payerInfo.tipoIdentificacion.trim() !== '' &&
    payerInfo.numeroIdentificacion.trim() !== ''
  )

  const payerName = payerIsDifferent ? payerInfo.nombre.trim() : ownerNameLabel
  const payerEmail = payerIsDifferent ? payerInfo.correo.trim() : emailLabel
  const payerLegalId = payerIsDifferent ? payerInfo.numeroIdentificacion.trim() : undefined
  const payerLegalIdType = payerIsDifferent ? payerInfo.tipoIdentificacion.trim() : undefined
  const isPaymentButtonEnabled = termsChecked &&
    isSchedulingFormComplete &&
    Boolean(pricing.total) &&
    !isSendingVoucher &&
    isPayerInfoValid

  useEffect(() => {
    onPaymentButtonEnabledChange?.(isVisible && isPaymentButtonEnabled)
  }, [isPaymentButtonEnabled, isVisible, onPaymentButtonEnabledChange])

  useEffect(() => {
    let isCancelled = false
    const unavailablePricing = getPricingByAge()

    setPricing(unavailablePricing)

    if (!selectedVehicleLabel || vehicleAge == null || !crmServiceType) {
      console.log('[Scheduling Pricing Card] Esperando datos para consultar CRM', {
        selectedVehicleLabel,
        vehicleAge,
        serviceTypeLabel: crmServiceType
      })
      return () => {
        isCancelled = true
      }
    }

    const syncPricingFromCrm = async () => {
      try {
        console.log('[Scheduling Pricing Card] Solicitando pricing a CRM', {
          selectedVehicleLabel,
          vehicleAge,
          serviceTypeLabel: crmServiceType
        })

        const { data, error } = await actions.getSchedulingPricing({
          vehicleType: selectedVehicleLabel,
          vehicleAge,
          serviceType: crmServiceType
        })

        if (isCancelled || error || !data) {
          console.warn('[Scheduling Pricing Card] CRM no devolvio pricing valido', {
            error,
            data
          })
          return
        }

        console.log('[Scheduling Pricing Card] Pricing recibido desde CRM', data)
        setPricing(data)
      } catch (error) {
        console.warn('[Scheduling Pricing Card] Error consultando pricing CRM', error)
      }
    }

    void syncPricingFromCrm()

    return () => {
      isCancelled = true
    }
  }, [crmServiceType, selectedVehicleLabel, vehicleAge])

  const handlePayWithWompi = async () => {
    if (!isSchedulingFormComplete) {
      await onIncompleteSchedulingForm?.()
      return
    }

    if (!termsChecked || !pricing.subtotal || pricing.discount == null || !pricing.total) return

    if (!isPayerInfoValid) {
      setShowPayerErrors(true)
      toast.error('Completa correctamente la informacion del pagador para continuar.')
      return
    }

    setIsSendingVoucher(true)

    try {
      const pendingVoucherPayload: PendingVoucherPayload = {
        nombre: ownerNameLabel,
        placa: plateLabel,
        identificacion: ownerIdLabel,
        telefono: phoneLabel,
        correo: emailLabel,
        recipient_email: payerEmail,
        ciudad: cityLabel,
        sede: headquartersValue,
        sede_nombre: headquartersLabel,
        tipo_vehiculo: selectedVehicleValue,
        servicio: serviceTypeLabel,
        antiguedad: vehicleAge,
        fecha_agendamiento: selectedDateValue,
        hora: selectedHourLabel,
        subtotal: pricing.subtotal ?? 0,
        descuento: pricing.discount ?? 0,
        total: pricing.total ?? 0,
        pagador_nombre: payerName,
        pagador_correo: payerEmail,
        pagador_tipo_identificacion: payerLegalIdType ?? 'No aplica',
        pagador_numero_identificacion: payerLegalId ?? ownerIdLabel
      }

      window.localStorage.setItem(PENDING_VOUCHER_KEY, JSON.stringify(pendingVoucherPayload))

      const redirectUrl = `${window.location.origin}/agendamientos`
      const { data, error } = await actions.createWompiSandboxCheckout({
        amount: pricing.total,
        payerEmail,
        payerFullName: payerName,
        payerPhoneNumber: phoneLabel,
        payerLegalId,
        payerLegalIdType,
        redirectUrl,
        pendingVoucher: pendingVoucherPayload
      })

      if (error || !data) {
        throw new Error(error?.message ?? 'No fue posible preparar el checkout de Wompi.')
      }

      window.location.assign(data.checkoutUrl)
    } catch (error) {
      console.error(error)
      window.localStorage.removeItem(PENDING_VOUCHER_KEY)
      toast.error(getReadablePaymentError(error))
    } finally {
      setIsSendingVoucher(false)
    }
  }

  return (
    <>
      <Dialog open={showPaymentConfirmedModal} onOpenChange={setShowPaymentConfirmedModal}>
        <DialogContent className="max-w-md border-[#E8D9CF] bg-[#FFF8F2]">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold text-[#7A160F]">Pago confirmado</DialogTitle>
            <DialogDescription className="text-sm leading-6 text-[#5B4336]">
              Tu pago fue aprobado correctamente y el baucher ya fue enviado al correo registrado del pagador.
            </DialogDescription>
          </DialogHeader>

          <div className="rounded-2xl border border-[#F0D4C6] bg-white p-4">
            <p className="text-sm font-semibold text-[#3D2418]">{confirmedPaymentModalData?.nombre ?? ownerNameLabel}</p>
            <div className="mt-3 space-y-2 text-sm text-[#5B4336]">
              <div className="flex items-center justify-between gap-3">
                <span>Placa</span>
                <span className="font-medium text-[#2F241D]">{confirmedPaymentModalData?.placa ?? plateLabel}</span>
              </div>
              <div className="flex items-center justify-between gap-3">
                <span>Correo del voucher</span>
                <span className="text-right font-medium text-[#2F241D]">{confirmedPaymentModalData?.correoVoucher ?? payerEmail}</span>
              </div>
              <div className="flex items-center justify-between gap-3">
                <span>Total pagado</span>
                <span className="font-semibold text-[#7A160F]">
                  {confirmedPaymentModalData?.total ? formatCOP(confirmedPaymentModalData.total) : (pricing.total ? formatCOP(pricing.total) : 'Pendiente')}
                </span>
              </div>
              <div className="flex items-center justify-between gap-3">
                <span>Fecha agendada</span>
                <span className="text-right font-medium text-[#2F241D]">{confirmedPaymentModalData?.fechaAgendada ?? selectedDateLabel}</span>
              </div>
              <div className="flex items-center justify-between gap-3">
                <span>Hora de agendamiento</span>
                <span className="font-medium text-[#2F241D]">{confirmedPaymentModalData?.horaAgendada ?? selectedHourLabel}</span>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {isVisible && (
        <aside className="w-full self-start rounded-[22px] border border-[#E8D9CF] bg-[#FFF8F2] p-2.5 shadow-[0_16px_42px_rgba(114,44,0,0.11)] lg:sticky lg:top-6 lg:max-w-[332px] lg:p-2">
        <picture className="mb-2 block overflow-hidden rounded-[16px]">
          <source media="(min-width: 1024px)" srcSet="/assets/images/EDITABLE-01.webp" />
          <source media="(min-width: 640px)" srcSet="/assets/images/EDITABLE-02.webp" />
          <img
            src="/assets/images/EDITABLE-03.webp"
            alt="Promocion de Previcar"
            className="block h-auto w-full"
          />
        </picture>

        <div className="overflow-hidden rounded-[18px] bg-white shadow-sm lg:rounded-[14px]">
          <div className="bg-[linear-gradient(135deg,#FFCD1E_0%,#F59E0B_55%,#D97706_100%)] px-3 pb-3 pt-3 lg:px-2.5 lg:py-2">
            <div className="mb-2 flex items-start justify-between gap-2 lg:mb-0">
              <div>
                <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-[#6B2908] lg:text-[9px]">
                  {hasOnlineDiscount ? 'Convenio Leoncy' : 'Tarifa en linea'}
                </p>
                <h2 className="mt-1 text-[15px] font-extrabold leading-[1.15] text-[#5A2106] lg:text-[12px]">
                  {hasOnlineDiscount ? 'Paga tu tecnicomecanica en linea' : 'Consulta el valor de tu tecnicomecanica'}
                </h2>
              </div>
              {hasOnlineDiscount && (
                <span className="rounded-full bg-[#C7352D] px-3 py-1 text-xs font-bold uppercase tracking-[0.16em] text-white lg:px-2 lg:text-[10px]">
                  {formatCOP(pricing.discount ?? 0)}
                </span>
              )}
            </div>
          </div>

          <div className="space-y-2 p-2 lg:space-y-1.5 lg:p-1.5">
            <div className="rounded-[18px] bg-[#FFF6EE] p-2.5 lg:rounded-[12px] lg:p-1.5">
            <div className="flex items-center justify-between gap-3 border-b border-[#F2DDD1] pb-2 lg:pb-1">
              <div>
                <p className="text-xs uppercase tracking-[0.2em] text-[#A6602C] lg:text-[9px]">Propietario</p>
                <p className="text-sm font-semibold text-[#3D2418] lg:text-[11px]">{ownerNameLabel}</p>
              </div>
              <span className="rounded-full bg-[#FCE2D4] px-2.5 py-1 text-xs font-semibold text-[#8A3D14] lg:px-2 lg:py-0.5 lg:text-[10px]">{plateLabel}</span>
            </div>

            <div className="space-y-2 pt-2 text-xs text-[#5B4336] lg:space-y-0.5 lg:pt-1 lg:text-[10px]">
              <div className="flex items-start justify-between gap-2">
                <span>Ciudad</span>
                <span className="text-right font-medium text-[#2F241D]">{cityLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Sede</span>
                <span className="text-right font-medium text-[#2F241D]">{headquartersLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Vehiculo</span>
                <span className="text-right font-medium text-[#2F241D]">{selectedVehicleLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Años de antigüedad</span>
                <span className="text-right font-medium text-[#2F241D]">{vehicleAgeLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Servicio</span>
                <span className="text-right font-medium text-[#2F241D]">{serviceTypeLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Fecha</span>
                <span className="text-right font-medium text-[#2F241D]">{selectedDateLabel}</span>
              </div>
              <div className="flex items-start justify-between gap-2">
                <span>Hora</span>
                <span className="text-right font-medium text-[#2F241D]">{selectedHourLabel}</span>
              </div>
            </div>
          </div>

          <div className="rounded-[18px] border border-[#F2DDD1] p-2 lg:rounded-[12px] lg:p-1.5">
            <div className="flex items-start justify-between gap-2 text-[11px] text-[#5B4336] lg:text-[9px]">
              <span>Correo</span>
              <span className="text-right font-medium text-[#2F241D]">{emailLabel}</span>
            </div>
            <div className="mt-1.5 flex items-start justify-between gap-2 text-[11px] text-[#5B4336] lg:mt-0.5 lg:text-[9px]">
              <span>Celular</span>
              <span className="text-right font-medium text-[#2F241D]">{phoneLabel}</span>
            </div>
          </div>

          <div className="rounded-[18px] border border-[#F2DDD1] bg-white p-2 lg:rounded-[12px] lg:p-1.5">
            <label className="mb-2 flex cursor-pointer items-start gap-2 lg:mb-0">
              <Checkbox
                checked={payerIsDifferent}
                onCheckedChange={(value) => {
                  const isChecked = value === true
                  setPayerIsDifferent(isChecked)
                  setShowPayerErrors(false)
                }}
              />
              <span className="text-[11px] leading-4 font-medium text-[#5B4336] lg:text-[9px] lg:leading-3">
                La informacion del pagador es diferente a la persona que tomara el servicio
              </span>
            </label>

            {payerIsDifferent && (
              <fieldset className="rounded-xl border border-[#F2DDD1] bg-[#FFF8F2] p-2 lg:p-1.5">
                <legend className="px-1 text-[10px] font-bold uppercase tracking-[0.18em] text-[#8B4A1F]">
                  Datos del pagador
                </legend>

                <div className="mt-1 space-y-2 lg:space-y-1">
                  <div>
                    <Input
                      type="text"
                      placeholder="Nombre"
                      value={payerInfo.nombre}
                      onChange={(event) => setPayerInfo((current) => ({ ...current, nombre: event.target.value }))}
                      className="h-9 p-2 border-[#E8D9CF] bg-white text-xs"
                    />
                    {showPayerErrors && payerInfo.nombre.trim() === '' && <p className="mt-1 text-[10px] text-red-600">El nombre es obligatorio.</p>}
                  </div>

                  <div>
                    <Input
                      type="email"
                      placeholder="Correo Electronico"
                      value={payerInfo.correo}
                      onChange={(event) => setPayerInfo((current) => ({ ...current, correo: event.target.value }))}
                      className="h-9 p-2 border-[#E8D9CF] bg-white text-xs"
                    />
                    {showPayerErrors && !isValidEmail(payerInfo.correo) && <p className="mt-1 text-[10px] text-red-600">Ingresa un correo valido.</p>}
                  </div>

                  <div>
                    <Select
                      value={payerInfo.tipoIdentificacion}
                      onValueChange={(value) => setPayerInfo((current) => ({ ...current, tipoIdentificacion: value }))}
                    >
                      <SelectTrigger className="h-9 border-[#E8D9CF] bg-white text-xs">
                        <SelectValue placeholder="Tipo de Identificacion" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="CC">Cedula de ciudadania</SelectItem>
                        <SelectItem value="CE">Cedula de extranjeria</SelectItem>
                        <SelectItem value="NIT">NIT</SelectItem>
                        <SelectItem value="PASAPORTE">Pasaporte</SelectItem>
                      </SelectContent>
                    </Select>
                    {showPayerErrors && payerInfo.tipoIdentificacion.trim() === '' && <p className="mt-1 text-[10px] text-red-600">El tipo de identificacion es obligatorio.</p>}
                  </div>

                  <div>
                    <Input
                      type="text"
                      placeholder="Numero de Identificacion"
                      value={payerInfo.numeroIdentificacion}
                      onChange={(event) => setPayerInfo((current) => ({ ...current, numeroIdentificacion: event.target.value }))}
                      className="h-9 p-2 border-[#E8D9CF] bg-white text-xs"
                    />
                    {showPayerErrors && payerInfo.numeroIdentificacion.trim() === '' && <p className="mt-1 text-[10px] text-red-600">El numero de identificacion es obligatorio.</p>}
                  </div>
                </div>
              </fieldset>
            )}
          </div>

          <div className="rounded-[18px] border border-[#F2DDD1] bg-white p-2 lg:rounded-[12px] lg:p-1.5">
            <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-[#8B4A1F] lg:text-[8px]">Terminos y condiciones</p>
            <label className="mt-2 flex cursor-pointer items-start gap-2 lg:mt-1">
              <Checkbox checked={termsChecked} onCheckedChange={(value) => onTermsCheckedChange(value === true)} />
              <span className="text-[11px] leading-4 text-[#5B4336] lg:text-[9px] lg:leading-3">
                Al marcar esta casilla acepto todos los{' '}
                <a className="font-semibold text-primary underline underline-offset-2" href="/assets/files/Términos-condiciones-previcar.pdf" target="_blank" rel="noreferrer">
                  Terminos y condiciones
                </a>{' '}
                y la{' '}
                <a className="font-semibold text-primary underline underline-offset-2" href="/assets/files/PD-DA-01-politica-de-tratamiento-de-datos.pdf" target="_blank" rel="noreferrer">
                  politica de privacidad
                </a>
                , asi como el{' '}
                <a className="font-semibold text-primary underline underline-offset-2" href="/assets/files/PD-DA-02-consentimiento-web.pdf" target="_blank" rel="noreferrer">
                  consentimiento web
                </a>
                .
              </span>
            </label>
            {termsErrorMessage && (
              <p className="mt-1 text-[10px] text-red-600">{termsErrorMessage}</p>
            )}
          </div>

          <div className="rounded-[18px] border border-[#F0D4C6] bg-[#FFF9F4] p-2.5 shadow-[0_8px_18px_rgba(147,66,0,0.08)] lg:rounded-[12px] lg:p-1.5">
            <div className="mb-2 flex items-center justify-between lg:mb-1">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-[#8B4A1F] lg:text-[9px]">Tarifa</span>
              {hasOnlineDiscount && (
                <span className="rounded-full bg-[#C7352D] px-2.5 py-1 text-[11px] font-bold text-white lg:px-2 lg:py-0.5 lg:text-[9px]">
                  Ahorras {formatCOP(pricing.discount ?? 0)}
                </span>
              )}
            </div>

            <div className="space-y-1.5 text-xs lg:space-y-0.5 lg:text-[10px]">
              <div className="flex items-center justify-between text-[#7B665A]">
                <span>Subtotal</span>
                <span>{pricing.subtotal ? formatCOP(pricing.subtotal) : 'Pendiente'}</span>
              </div>
              <div className="flex items-center justify-between text-[#7B665A]">
                <span>Convenio Leoncy</span>
                <span className={`font-semibold ${hasOnlineDiscount ? 'text-[#C7352D]' : 'text-[#7B665A]'}`}>
                  {pricing.discount == null
                    ? 'Pendiente'
                    : hasOnlineDiscount
                      ? `- ${formatCOP(pricing.discount)}`
                      : 'No aplica'}
                </span>
              </div>
            </div>

            <div className="my-3 h-px bg-[#EBCDBF] lg:my-1.5" />

            <div className="flex items-end justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#A6602C] lg:text-[9px]">Total</p>
                <p className="text-xs text-[#7F6557] lg:text-[9px]">Valor estimado de tu RTM</p>
              </div>
              <span className="text-[1.08rem] font-extrabold leading-none text-[#3D2418] lg:text-sm">
                {pricing.total ? formatCOP(pricing.total) : 'Pendiente'}
              </span>
            </div>

            <button
              type="button"
              className="mt-2 w-full rounded-full bg-[linear-gradient(180deg,#FFD54A_0%,#F3B313_100%)] px-4 py-2 text-[10px] font-extrabold uppercase tracking-[0.18em] text-[#6B2908] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)] transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100 lg:mt-1 lg:py-1.5 lg:text-[9px]"
              disabled={!isPaymentButtonEnabled}
              onClick={() => { void handlePayWithWompi() }}
            >
              {isSendingVoucher ? 'Conectando...' : 'Pagar y agendar'}
            </button>

            <div className="mt-1 w-full px-3 text-center text-[8.8px] font-semibold leading-[1.05] text-[#8B4A1F] lg:px-2 lg:text-[8.2px]">
              <p className="whitespace-nowrap">Antes de proceder con el pago, valide que su vehículo cumple</p>
              <p className="whitespace-nowrap">con las tipologías incluidas dentro del alcance autorizado del</p>
              <p className="whitespace-nowrap">CDA para la prestación del servicio.</p>
            </div>

            <div className="mt-2 rounded-xl bg-[#FFF1CC] px-3 py-1.5 text-center text-[10px] font-semibold text-[#7A5610] lg:mt-1 lg:py-1 lg:text-[9px]">
              Pago 100% seguro
            </div>
            </div>
          </div>
        </div>
        </aside>
      )}
    </>
  )
}